7

我试图确定一个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");
            }
        }
    }
});

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

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

4

1 回答 1

7

我发现通过在调用 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");
            }
        }
    }
});
于 2012-12-18T22:25:51.217 回答