javascript - Canvas :矩形——对齐网格/对齐对象

Question

我设法通过以下方式操作 Fabric.js 以向网格功能添加捕捉和缩放:

var grid = 100;
//Snap to Grid
canvas.on('object:moving', function (options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});
canvas.on('object:scaling', function (options) {
    options.target.set({
        left: Math.round(options.target.left / grid) * grid,
        top: Math.round(options.target.top / grid) * grid
    });
});

现在我想添加对齐对象功能。我的想法是检查两个物体的交点，然后以某种方式锁定运动。我知道这不是最好的尝试，但至少它会捕捉到它，但不允许再将物体移开。并且:现在它没有得到很好的实现。请参阅:http://jsfiddle.net/gcollect/y9kyq/

我有三个问题:

1. “捕捉”效果不佳，因为对象的左属性以某种方式依赖于指针。通过拖动对象并观察我的控件输出进行复制。例如，将红色矩形移动到位置 left:62 时，矩形不与蓝色矩形相交，仍然可以移开。如何重新加载矩形的实际左侧值。由于我对齐网格线，它位于左侧:100 而不是左侧:62。
2. 知道如何向对象功能添加快照吗？并禁止交叉路口？
3. 我如何检查 n 个对象而不是两个？

感谢您的评论。

附言: jsfiddle 示例没有显示网格功能的比例，因为它需要在行中进行 Fabric.js 操作:11100

var distroundedforgrid = Math.round(dist/100)*100;      
      transform.newScaleX = Math.round((transform.original.scaleX * distroundedforgrid / lastDist)*10)/10;
      transform.newScaleY = Math.round((transform.original.scaleY * distroundedforgrid / lastDist)*10)/10;

      target.set('scaleX', transform.newScaleX);
      target.set('scaleY', transform.newScaleY);
    }

Answer 1

对于那些仍然对解决方案感兴趣的人: 我在这里解决了:https://stackoverflow.com/a/22649022/3207478 参见 jsfiddle:http://jsfiddle.net/gcollect/FD53A/

使用 .oCoords.tl .tr .bl。 .br 解决了它。