jQuery/canvas：檢查矩形是否穿過另一個矩形

Question

我有一個網格，用戶可以在其上繪製矩形（實際上是房間中的房間）。由於房間不能相互交叉，因此在繪製第二個房間之前我會嘗試檢查衝突。到目前爲止，我設法檢查第二個矩形的'to-point'是否在第一個矩形內（=> 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; 
} 

編輯： 我寫正確的代碼。我認爲這會更容易，但承諾是承諾...有可能重構代碼的方法，但現在頭痛已足夠：-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; 
} 

Answer 2

此http://www.gamedev.net/page/resources/_/technical/game-programming/collision-detection-r735算法看起來相當易於拆分。