jQuery / canvas:检查矩形是否穿过另一个矩形

时间:2012-05-14 08:03:49

标签: javascript jquery html5-canvas

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

I have set up an example page here

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

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

提前致谢!

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

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