7

「object:moving」イベントを観察しながら、fabric.Rect がいつ別の fabric.Rect とオーバーラップするかを判断しようとしていますが、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");
            }
        }
    }
});

私はフィドルを作成しました。2 つ以上のブロックを選択してグループ化してみてください。他の 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 に答える