当Object是fabric时，Fabricjs intersectsWithObject返回false [英] Fabricjs intersectsWithObject returning false when Object is fabric.Rect

问题描述

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

I'm trying to determine when a fabric.Rect overlaps another fabric.Rect while observing the 'object:moving' event but having inconsistent results between fabric.Group vs fabric.Rect

当我在Rect实例上移动Group时，intersectsWithObject方法返回true，但是当我在另一个Rect实例上移动Rect实例时，它返回false.

When I move Group over a Rect instance the intersectsWithObject method returns true, but when I'm moving a Rect instance over another Rect instance it returns false.

我想知道我在这里做错什么了吗.

I'm wondering if I'm doing something wrong here.

这是我的事件处理程序

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 ...

I've created a fiddle. Try selecting two or more blocks to group them. You'll see the grouped object turn red when it is dragged over any other fabric.Rect or fabric.Group instance. When you drag a single Rect over another fabric.Object of any type, it never turns red as intersectsWithObject is always returning false...

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

推荐答案

我发现，通过在调用myObj.intersectsWithObject(otherObj)之前显式调用myObj.setCoords()可以解决此问题.

I found that by explicitly calling myObj.setCoords() prior to calling myObj.intersectsWithObject(otherObj) fixes the issue.

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

I updated the fiddle here http://jsfiddle.net/cyberpantz/9MkYJ/29/

fabric.Rect坐标似乎在fabric.Group坐标正在移动时不会自动更新，尽管我在这里可能会偏离基准...

It appears that fabric.Rect coordinates are not updated automatically while it is being moved while fabric.Group coordinates are, although I could be off-base here...

更新(并简化)的代码

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

这篇关于当Object是fabric时，Fabricjs intersectsWithObject返回false的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！