javascript - jQuery/ Canvas : check if rectangle crosses another rectangle

Question

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

I have set up an example page here

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

在源代码中我已经标记了相关代码(从第175行开始)。

提前致谢!

Answer 1

在每个语句调用的匿名函数中返回 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;
}

编辑:我写了正确的代码。我认为这会更容易，但是， promise 就是 promise ...可能有多种方法可以重构代码，但现在已经足够头痛了:-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;
}