当Object为fabric.Rect时,Fabricjs intersectsWithObject返回false

Question

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

当我在Rect实例上移动Group时,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");
            }
        }
    }
});

我创造了一个小提琴.尝试选择两个或多个块来对它们进行分组.当您将分组对象拖过任何其他fabric.Rect或fabric.Group实例时,您会看到该对象变为红色.当你将一个Rect拖到另一个fabric.Object任何类型的对象上时,它永远不会变成红色,因为intersectsWithObject总是返回false ...

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

Answer 1

我发现通过在调用myObj.intersectsWithObject(otherObj)之前显式调用myObj.setCoords()来修复问题.

我在这里更新了小提琴 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");
            }
        }
    }
});