FabricJS Fluid 对齐网格

Question

我想使用此 http://jsfiddle.net/fabricjs/S9sLu/ 功能，其中对象可以捕捉到网格，问题是我不希望它直接捕捉到线条但是当它接近它时只要。所以物体的运动是流畅的，如果用户愿意，它可以被捕捉。

这是javascript，我认为它与Math.round()有关：

grid = 50;

// Grid display part
for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}

// Snapping part
canvas.on('object:moving', function(options) { 
  options.target.set({
    left: Math.round(options.target.left / 50) * 50,
    top: Math.round(options.target.top / 50) * 50
  });
});

有什么关于如何实现的建议吗？

Answer 1

如果我没理解错的话，这个小调整应该可以解决：

canvas.on('object:moving', function(options) {
  if (Math.round(options.target.left / grid * 4) % 4 == 0 &&
    Math.round(options.target.top / grid * 4) % 4 == 0) {
    options.target.set({
      left: Math.round(options.target.left / grid) * grid,
      top: Math.round(options.target.top / grid) * grid
    }).setCoords();
  }
});

（或者让你朝着正确的方向前进，在鼠标松开时平滑并对齐）

这是更新后的 Plunker，https://jsfiddle.net/rekrah/q0xe7yfz/。

如果您需要任何进一步的帮助，请告诉我。

FabricJS Fluid 对齐网格

FabricJS Fluid snap to grid

javascript

fabricjs