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://auth0.com/docs/libraries/lock/v10/customization#additionalsignupfields-array-。

如果您需要任何进一步的帮助，请与我们联系。

FabricJS Fluid搭扣到网格

1 个答案: