KineticJS - 檢測多個圖像的碰撞

Question

我創建了一個包含多個圖像的圖層。通過拖放，您可以在畫布周圍移動圖像。在「dragend」事件中，我想檢查實際圖像是否位於任何其他圖像上。

我將所有Kinetic.Image對象都放入一個數組中：形狀。

function start() { 

for (var i = 0; i < imgs.length; i++) { 
    var img = new Kinetic.Image({ 
     x: i * 75 + 15, 
     y: i * 75 + 15, 
     width: 60, 
     height: 60, 
     image: imgs[i], 
     id: "img" + i, 
     draggable: true 
    }); 
    layer.add(img); 

    img.on('dragend', function(e) { 
     var shape = e.targetNode; 
     doObjectsCollide(shape); 
    }); 
    shapes.push(img); 
} 

layer.draw(); 

}

我發現了一個SO Question，其描述兩個元件之間的碰撞的檢測。我嘗試了我的情況的解決方案，但在拖動結束後，沒有檢測到碰撞：

doObjectsCollide = function(a) { 
    for (var i = 0; i < shapes.length; i++) { 
    b = shapes[i]; 
    if (a.id != b.id) { 
     if (
      ((a.getY() + a.getHeight()) < (b.getY())) || 
      (a.getY() > (b.y + b.getHeight())) || 
      ((a.getX() + a.getWidth()) < b.getX()) || 
      (a.getX() > (b.getX() + b.getWidth())) 
     ) { console.log("Detection")}; 
    } 
    } 
} 

是否有問題的循環？或者形狀是圖像的事實？

Answer 1

一對夫婦的毛刺：

• 獲得ID作爲函數調用：（！a.id（）= b.id（））如果

• 您的碰撞試驗必須不-ted：如果（！（...））

所以doObjectsCollide應該是這樣的：

doObjectsCollide = function(a) { 

    for (var i = 0; i < shapes.length; i++) { 
    b = shapes[i]; 
    if (a.id() != b.id()) { 
     if (
      !(((a.getY() + a.getHeight()) < (b.getY())) || 
      (a.getY() > (b.y + b.getHeight())) || 
      ((a.getX() + a.getWidth()) < b.getX()) || 
      (a.getX() > (b.getX() + b.getWidth()))) 
     ) { console.log("Detection: "+a.id()+" hit "+b.id())}; 
    } 
    } 
} 

這裏有一個演示：http://jsfiddle.net/m1erickson/PFH55/

乾杯！