当对象是 fabric.Rect 时，Fabricjs intersectsWithObject 返回 false

Question

我试图确定一个 fabric.Rect 何时与另一个 fabric.Rect 重叠，同时观察 'object:moving' 事件但在 fabric.Group 与 fabric.Rect 之间有不一致的结果

当我将 Group 移到 Rect 实例上时， intersectsWithObject 方法返回 true，但是当我将 Rect 实例移到另一个 Rect 实例上时，它返回 false。

我想知道我是否在这里做错了什么。

这是我的事件处理程序

cvs.observe('object:moving', function(e) {

    var targ = e.target;

    // filter out itself
    var items = cvs.getObjects().filter(function(o){
        return targ !== o;
    });

    var hit = false;

    for (var i = 0, n = items.length; i < n; i++) {
        var m = items[i];

        if (targ.type == "group") {
            if (targ.intersectsWithObject(m)) {
                targ.setFill("red");
                hit = true;
                console.log("GROUP HIT");
            } else {
                if (!hit) {
                    targ.setFill("#CCCCCC");
                }
            }
        } 
        else {
            // this is always returning false! why?
            if (targ.intersectsWithObject(m)) {
                var id = m.data ? m.data.entityId : " ??"
                console.log("OBJECT HIT:" + id);
                targ.setFill("red");
            }
        }
    }
});

我创建了一个 fiddle 。尝试选择两个或更多块将它们分组。当将分组对象拖到任何其他 fabric.Rect 或 fabric.Group 实例上时，您会看到分组对象变为红色。当您将单个 Rect 拖到任何类型的另一个 fabric.Object 上时，它永远不会变成红色，因为 intersectsWithObject 总是返回 false...

http://jsfiddle.net/cyberpantz/9MkYJ/27/

Answer 1

我发现通过在调用 myObj.intersectsWithObject(otherObj) 之前显式调用 myObj.setCoords() 解决了这个问题。

我在这里更新了 fiddle
http://jsfiddle.net/cyberpantz/9MkYJ/29/

看起来fabric.Rect 坐标在移动时不会自动更新，而fabric.Group 坐标是，尽管我在这里可能不在基地......

更新(和简化)代码

cvs.observe('object:moving', function(e) {

    var targ = e.target;

    // this fixes it
    targ.setCoords();

    var items = cvs.getObjects().filter(function(o){
        return targ !== o;
    });

    var hit = false;

    for (var i = 0, n = items.length; i < n; i++) {
        var m = items[i];

        if (targ.intersectsWithObject(m)) {
            targ.setFill("red");
            hit = true;
        } 
        else {
            if (!hit) {
                targ.setFill("#CCCCCC");
            }
        }
    }
});