javascript - jQuery / canvas：检查矩形是否穿过另一个矩形

Question

我有一个网格，用户可以在上面绘制矩形（实际上是房子里的房间）。因为房间不能相互交叉，所以我尝试在绘制第二个房间之前检查是否存在冲突。到目前为止，我设法检查了第二个矩形的“到点”是否在第一个矩形内（=> return false）。但是当房间的边界穿过另一个房间时，代码也必须“返回：false” 。

我在这里设置了一个示例页面

要尝试它，请单击网格中的任意位置，然后单击其他位置以创建第一个房间。然后在此框外单击并移动光标以查看问题...

在源代码中，我标记了相关代码（从第 175 行开始）。

提前致谢！

Answer 1

这个http://www.gamedev.net/page/resources/_/technical/game-programming/collision-detection-r735算法看起来相当容易被窃取。

Answer 2

您在每个语句调用的匿名函数中返回 false :-) checkConflict 函数始终返回 true ！看 ：

function checkConflict(fromx, fromy, tox, toy) {
    $.each(rooms, function() {
        var left1 = fromx;
        var left2 = $(this)[0];
        var right1 = tox;
        var right2 = $(this)[2];
        var top1 = fromy;
        var top2 = $(this)[1];
        var bottom1 = toy;
        var bottom2 = $(this)[3];

        if (bottom1 < top2) { return false; }
        if (top1 > bottom2) { return false; }
        if (right1 < left2) { return false; }
        if (left1 > right2) { return false; }
    });  
    return true;
}

这很容易解决，但我给你更新的代码，因为你的测试也不正确（你想测试你是否在盒子里面，你以前的代码总是返回 false ）所以这可能是这样的（你必须改进此代码，因为它也不能完美运行）：

  function checkConflict(fromx, fromy, tox, toy) {
    var returnValue = true;
    $.each(rooms, function() {
       if (tox > this[0] &&
           tox < this[2] && 
           toy > this[1] && 
           toy < this[3]) 
        { returnValue = false; return false; }

        if (fromx > this[0] && 
            fromx < this[2] &&
            fromy > this[1] && 
            fromy < this[3]) 
        { returnValue = false; return false; }

    });
    return returnValue;
}

编辑： 我写了正确的代码。我认为这会更容易，但是，承诺就是承诺......可能有重构代码的方法，但现在头痛已经足够了:-D

我做了一个 JSFiddle，所以你可以看到结果：http: //jsfiddle.net/T4ta9/2/

function checkConflict(fromx, fromy, tox, toy) {
    var returnValue = true;
    $.each(rooms, function() {

         var squareLeft = Math.min( parseInt(this[0]) ,parseInt(this[2])) , 
            squareRight = Math.max(parseInt(this[0]) ,parseInt(this[2]))  , 
            squareTop = Math.min(parseInt(this[1]) ,parseInt(this[3])) ,
            squareBot = Math.max(parseInt(this[1]) ,parseInt(this[3])) ;

         //drawing inside a shape
         if ((fromx > squareLeft && fromx < squareRight && fromy > squareTop && fromy < squareBot) 
         && (tox > squareRight || tox < squareLeft || toy > squareBot || toy < squareTop)) {
        returnValue = false;
        return false;
    }

        // meet the bottom of the current square ?
        if (fromy >= squareBot && // we are below this square 
                ( 
                (toy < squareBot) &&  // and our destination is above the bottom of this square
                    ( 
                        (
                            fromx < squareRight && // we are drawing on the inner left side of this square
                            (tox > squareLeft || fromx > squareLeft)  // and our destination is on the left of this square, or we started to draw on the right part of this square
                        ) 
                        || 
                        (
                            fromx > squareLeft && // we are drawing on the inner right side of this square
                            (tox < squareRight || fromx < squareRight)  // and our destination is on 
                        )
                    )
                )
            ) 
        {
            returnValue = false;
            return false;
        }

        // meet the top of a square ?
        if (fromy <= squareTop && 
                ( 
                (toy > squareTop) &&  
                    ( 
                        (
                            fromx < squareRight && 
                            (tox > squareLeft || fromx > squareLeft) 
                        ) 
                        || 
                        (
                            fromx > squareLeft && 
                            (tox < squareRight || fromx < squareRight)  
                        )
                    )
                )
            ) 
        {
            returnValue = false;
            return false;
        }

        // meet the left of a square ?
        if (fromx <= squareLeft && 
                ( 
                (tox > squareLeft) &&  
                    ( 
                        (
                            fromy < squareBot && 
                            (toy > squareTop || fromy > squareTop) 
                        ) 
                        || 
                        (
                            fromy > squareTop && 
                            (toy < squareBot || fromy < squareBot)  
                        )
                    )
                )
            ) 
        {
            returnValue = false;
            return false;
        }

        // meet the right of a square ?
        if (fromx >= squareRight && 
                ( 
                (tox < squareRight) &&  
                    ( 
                        (
                            fromy < squareBot && 
                            (toy > squareTop || fromy > squareTop) 
                        ) 
                        || 
                        (
                            fromy > squareTop && 
                            (toy < squareBot || fromy < squareBot)  
                        )
                    )
                )
            ) 
        {
            returnValue = false;
            return false;
        }

    });
    return returnValue;
}