Javascript 画布：矩形--捕捉到栅格/捕捉到对象

我设法通过以下方式操纵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
    });
});

现在我想添加“捕捉到对象”功能。我的想法是检查两个物体的交点，然后以某种方式锁定运动。我知道这不是最好的尝试，但至少它会捕捉到它，但不允许再移动对象。而且：目前还没有很好地实施。见：

我有三个问题：

“捕捉”不起作用，因为objectleft属性以某种方式依赖于指针。通过拖动对象并查看控件输出进行复制。例如，将红色矩形移动到位置left:62时，该矩形与蓝色矩形不相交，仍然可以移开。如何重新加载矩形的实际左值。由于我的捕捉网格线，它位于左侧：100，而不是左侧：62

你知道如何添加捕捉到对象功能吗？禁止交叉

如何检查n个对象，而不仅仅是两个

谢谢你的评论

附言： jsfiddle示例没有显示scale-to-grid功能，因为它需要在第11100行中对Fabric.js进行操作

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

---

我找到了解决x轴上对象捕捉的方法，并将研究y轴的解决方案

当我检测到交叉点时，我通过为活动对象设置一个新的“左”值来实现这一点

        if (options.target.isContainedWithinObject(obj)||options.target.intersectsWithObject(obj)||obj.isContainedWithinObject(options.target)) {

            var distx = ((obj.left + obj.width)/2) - ((options.target.left + options.target.width)/2);
            var disty = ((obj.top + obj.height)/2) - ((options.target.top + options.target.height)/2);                  

            if (distx > 0){
                options.target.left = obj.left - options.target.width;
            } else {
                options.target.left = obj.left + obj.width;
            }

        }

---

对于那些仍然对解决方案感兴趣的人： 我在这里解决了这个问题： 参见JSFIDLE：

---

使用

.ocoods.tl.tr.bl。和.br解决了这个问题。

有关基于网格的重新缩放，请参见JSFIDLE

函数快照缩放（选项）{
var target=options.target；
var type=canvas.getActiveObject（）.get（'type'）；
var角点=目标。\角点；
var w=target.getWidth（）；
var h=target.getHeight（）；
var snap={//最近的捕捉点
顶部：数学圆（target.top/grid）*网格，
左：数学圆（target.left/grid）*网格，
底部：数学圆（（target.top+h）/网格）*网格，
右：数学圆（（target.left+w）/grid）*grid，
};
snap.height=snap.top-snap.bottom；
如果（捕捉高度<0）{
捕捉高度*=-1；
}
snap.width=snap.left-snap.right；
如果（捕捉宽度<0）{
snap.width*=-1；
}
道岔（转角）{
案例“mt”：
案例“mb”：
target.top=snap.top；
target.height=snap.height；
target.scaleY=1；
打破
案例“ml”：
案例‘mr’：
target.left=snap.left；
target.width=snap.width；
target.scaleX=1；
打破
案例“tl”：
案例“bl”：
案例‘tr’：
案例“br”：
target.top=snap.top；
target.left=snap.left；
target.height=snap.height；
target.width=snap.width；
target.scaleY=1；
target.scaleX=1；
}
如果（类型==“椭圆”）{
target.rx=（target.width/2）；
target.ry=（target.height/2）；
}
}

现在，我在修改对象的高度或宽度后遇到一些问题，然后尝试捕捉它们。由于旧值，对象仍在对象内相交和捕捉。我是否需要渲染新对象？小提琴是否可能再次可见pelasE？嗨，Steve Green，这里是相同的示例。我还没有设法解决这个问题。如果你能帮忙，那就太好了。问题从第59行开始。在distx行中添加注释以查看错误行为。不幸的是，到目前为止，我还没有关于“捕捉到对象”功能的任何进展。这很好，但当对象旋转90度，并且您尝试使用顶部控件（现在位于侧面）进行缩放时，这会中断。

function snapScaling(options) {
    var target = options.target;
    var type = canvas.getActiveObject().get('type');
    var corner = target.__corner;
    var w = target.getWidth();
    var h = target.getHeight();
    var snap = {   // Closest snapping points
      top: Math.round(target.top / grid) * grid,
      left: Math.round(target.left / grid) * grid,
      bottom: Math.round((target.top + h) / grid) * grid,
      right: Math.round((target.left + w) / grid) * grid,
    };
    snap.height = snap.top - snap.bottom;
    if(snap.height < 0) {
      snap.height *= - 1;
    }
    snap.width = snap.left - snap.right;
    if(snap.width < 0) {
      snap.width *= - 1;
    }
    switch (corner) {
      case 'mt':
      case 'mb':
          target.top = snap.top;
          target.height = snap.height;
          target.scaleY = 1;
        break;
      case 'ml':
      case 'mr':
        target.left = snap.left;
        target.width = snap.width;
        target.scaleX = 1;
        break;
      case 'tl':
      case 'bl':
      case 'tr':
      case 'br':
        target.top = snap.top;
        target.left = snap.left;

        target.height = snap.height;
        target.width = snap.width;

        target.scaleY = 1;
        target.scaleX = 1;
    }

    if(type == 'ellipse') {
      target.rx = (target.width / 2);
      target.ry = (target.height / 2);
    }
  }