jQuery / canvas：检查矩形是否与另一个矩形交叉

Question

I have a grid on which users can draw rectangles (actually rooms in a house). Because rooms cannot cross each other, I try to check for conflicts before drawing the second room. So far I managed to check if the 'to-point' of the second rectangle is inside the first rectangle (=> return false). But the code has to 'return: false' also when the boundaries of the room cross another room.

I have set up an example page here

To try it, click anywhere in the grid and click somewhere else to create the first room. Then click outside this box and move the cursor to see the problem...

In the source code I have marked the concerning code (starts on line 175).

Thanks in advance!

Answer 1

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

Answer 2

You return false in the anonymous function called by the each statement :-) the checkConflict function always return true ! Look :

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

This is easy to fix but I give you the updated code because your tests are not correct too ( you want to test if you are INSIDE the box, your previous code would always return false ) So this is probably something like this (you have to improve this code because it won't work perfectly either) :

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

EDIT: I wrote the correct code. I thought it would be easier but, a promise is a promise... There are probably ways to refactor the code but the headache is enough for now :-D

I made a JSFiddle so you can see the result : 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;
}