可以检测路径或动态Blobs/图层的碰撞

Possible to detect collisions of Paths or Kinetic Blobs/Layers?

本文关键字：图层 碰撞 Blobs 动态 检测 路径      更新时间：2023-09-26

我的舞台上有多个图层。每一层包含的图像周围都有一个圆块(参见这个问题)。每个球都是可拖拽的。

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

你可以判断blobs是否在碰撞

至少有2种方法:

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

边界框方法更快。

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

一个例子:

下面是如何计算和测试两个blob边界框是否碰撞

示例:http://jsfiddle.net/m1erickson/9tB7d/

从一个动态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曲线组成。

获取组成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曲线计算blobs边界框:

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
    ));
}
相关文章：