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/ .

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