Javascript 是否可能检测路径或动力学斑点/层的碰撞？

我的舞台上有多个层次。每一层都包含由一个图标包围的图像（请参见此）。每个blub都是可拖动的

移动BLUB时是否可能检测到BLUB之间的碰撞？

---

我不想有重叠的气泡，但如果它们碰撞，它们应该会融化

您可以确定水滴是否碰撞。

至少有两种方法：

• 计算所有水滴的边界框，并测试边界框是否发生碰撞
• 在单独的屏幕外画布上绘制每个斑点，并使用像素测试查看它们是否发生碰撞

边界框方法更快

像素测试方法更精确，但速度较慢需要更多资源

例如：

下面介绍如何计算和测试两个水滴边界框是否发生碰撞。

演示：

从动态水滴开始

var blueBlob = new Kinetic.Line({
   points: [73,140,340,23,500,109,300,170],
   stroke: 'blue',
   strokeWidth: 10,
   fill: '#aaf',
   tension: 0.8,
   closed: true
});

这个斑点是由一组贝塞尔曲线组成的

获取构成水滴的贝塞尔曲线：

function kineticBlob2Beziers(blob){
    var beziers=[];
    var start=blob.getPoints();
    var pts=blob.getTensionPoints();
    var n=0;
    var lastN=pts.length-2;
    var sx=start[0];
    var sy=start[1];
    while(n<lastN){
        bez={
            s: {x:sx,y:sy},
            c1:{x:pts[n++],y:pts[n++]},
            c2:{x:pts[n++],y:pts[n++]},
            e: {x:pts[n++],y:pts[n++]}
        };
        beziers.push(bez);
        sx=pts[n-2];
        sy=pts[n-1];
    }
    return(beziers);
}

function getBlobBB(beziers){
    var minX=1000000;
    var minY=1000000;
    var maxX=-1000000;
    var maxY=-1000000;
    for(var i=0;i<beziers.length;i++){
        var bez=beziers[i];
        for(var t=0.00;t<=1.00;t+=.01){
            var pt=getCubicBezierXYatT(bez.s,bez.c1,bez.c2,bez.e,t);
            if(pt.x<minX){minX=pt.x;}
            if(pt.x>maxX){maxX=pt.x;}
            if(pt.y<minY){minY=pt.y;}
            if(pt.y>maxY){maxY=pt.y;}
        }
    }
    return({x:minX,y:minY,width:maxX-minX,height:maxY-minY});
}

function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
    return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
    var t2 = T * T;
    var t3 = t2 * T;
    return a + (-a * 3 + T * (3 * a - a * T)) * T
    + (3 * b + T * (-6 * b + b * 3 * T)) * T
    + (c * 3 - c * 3 * T) * t2
    + d * t3;
}

function Colliding(left1,top1,right1,bottom1,left2,top2,right2,bottom2){

    return(!(
        left1   > right2 ||
        right1  < left2  ||
        bottom1 < top2   ||
        top1    >bottom2
    ));

}

函数kineticBlob2Beziers（blob）{
var beziers=[]；
var start=blob.getPoints（）；
var pts=blob.getTensionPoints（）；
var n=0；
var lastN=pts.length-2；
var sx=开始[0]；
var sy=开始[1]；
虽然（太感谢你了。效果很好！但我有一个小问题。一开始，图像是相邻放置的。如果两个图像发生碰撞，它们会移动到一个新的层，并在两个对象周围绘制斑点，也在新的层上。但我必须将形状移动到层的底部，否则，你看不到图像。但如果我这样做，它会消失无法拖动blob:-/I更新了小提琴：也许，有另一种方法可以将blob放到背景中？我尝试将setZIndex（0）设置为rect和blob，但这也不起作用：-/Hups。我解决了这个问题。我使用zIndex处理blob，在“dragend”中，我移除了框。。。