Question

我的舞台上有多层。每个图层都包含用blub围绕的图像（请参阅此question）。每个俱乐部都是可拖的。

有可能在移动blubs时检测它们之间的碰撞吗？我不想要重叠的气泡，但如果它们碰撞，它们应该融化。

Answer 1

您可以确定blob是否发生碰撞。

至少有两种方法：

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

边界框方法更快。

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

一个例子：

以下是计算和测试2个blob边界框是否发生碰撞的方法。

演示：http://jsfiddle.net/m1erickson/9tB7d/

从Kinetic Blob开始

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

那个斑点由一组贝塞尔曲线组成。

获取构成blob的Bezier曲线：

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

使用Bezier曲线计算blob边界框：

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

确定2个边界框（矩形）是否发生碰撞：

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

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

}

可以检测路径或动态Blob /层的碰撞？

1 个答案: