画布:矩形 - 对齐网格/对齐对象

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. "snap"不能很好地工作,因为对象left属性以某种方式依赖于指针.通过拖动对象并观察我的控件输出进行复制.例如,当将红色矩形移动到左侧位置时:62,矩形不与蓝色矩形相交,仍然可以移开.如何重新加载矩形的实际左值.由于我对网格线的捕捉,它在左边:100而不是左边:62.
2. 知道如何添加对象功能的快照吗？并禁止交集？
3. 如何检查n个对象,而不仅仅是两个？

感谢您的意见.

PS: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. and .br solved it.