Canvas KineticJS-检测多个图像的碰撞

我创建了一个包含多个图像的图层。通过拖放，可以在画布上移动图像。在“dragend”事件中，我想检查实际图像是否位于任何其他图像上

我推送所有的动态图像对象：形状

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();

函数开始（）{
对于（变量i=0；i

}

我发现了一个描述两个元素之间碰撞检测的方法。我尝试解决我的案例，但在拖动结束后，未检测到碰撞：

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

doObjectsCollide=函数（a）{
对于（var i=0；i（b.y+b.getHeight（））||
（（a.getX（）+a.getWidth（））（b.getX（）+b.getWidth（））
){console.log（“检测”）}；
}
}
}

---

循环有问题吗？或者形状是图像这一事实？

有几个小问题：

• 作为函数调用获取id:if（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())};
    }
  }
}

doObjectsCollide=函数（a）{
对于（var i=0；i（b.y+b.getHeight（））||
（（a.getX（）+a.getWidth（））（b.getX（）+b.getWidth（）））
){console.log（“检测：+a.id（）+“命中”+b.id（））}；
}
}
}

下面是一个演示：

干杯