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

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

Answer 2

如果有人需要它，这里是解决方案的工作片段，因为原来的小提琴不再工作了。

var canvas = new fabric.Canvas('c', {
  selection: false
});
var grid = 50;

// create grid

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
  }))
}

// add objects

canvas.add(new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: '#faa',
  originX: 'left',
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({
  left: 300,
  top: 300,
  radius: 50,
  fill: '#9f9',
  originX: 'left',
  originY: 'top',
  centeredRotation: true
}));

// snap to grid

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();
  }
});

canvas {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

<script src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>

<canvas id="c" width="600" height="600"></canvas>