Path 移动拉斐尔中的元素，并检查它是否与其他元素碰撞

我想检查动画圆形元素是否与一组路径元素中的动画路径元素发生碰撞（重叠）

为了使示例更易于理解，我创建了一个动画圆圈，并希望您向我展示如何在其中一个黑色圆圈与之碰撞时使绿色圆圈显示为红色：

小提琴上的代码：

JS
var paper = Raphael("canvas", 800, 800);
var cx = 400;
var cy = 400;   
// Helpers
function rand(min, max) {
    return Math.random() * (max - min) + min;
}

var bigCircle = paper.circle(cx, cy, 500);
function flyMeteor(){
    var ptOnCircle = bigCircle.getPointAtLength(rand(1,bigCircle.getTotalLength()));
    var anim = Raphael.animation({
        fill: 'black',
        opacity: 0,
        cx: ptOnCircle.x,
        cy: ptOnCircle.y,
        stroke: 0,
        r: 0
    },1200,function(){
        this.remove();
    });
    var circle = paper.circle(cx, cy, 4).attr({
        fill:'black',
        stroke: 0
    }).animate(anim);
};
setInterval(function(){
    flyMeteor();
},200); 

var circle = paper.circle(250, 250, 80).attr({
    fill:'green',
    stroke: 0
});

HTML
<div id="canvas"></div>

JS
var paper=Raphael（“帆布”，800800）；
var-cx=400；
var-cy=400；
//助手
函数随机数（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
var bigCircle=纸张圆（cx，cy，500）；
函数flyMeteor（）{
var ptOnCircle=bigCircle.getPointAtLength（rand（1，bigCircle.getTotalLength（））；
var anim=Raphael.animation({
填充：“黑色”，
不透明度：0，
cx:ptOnCircle.x，
西：托恩西尔，
笔划：0，
r:0
}，1200，函数（）{
这个。删除（）；
});
var循环=纸张循环（cx，cy，4）.attr({
填充：'黑色'，
行程：0
}).动画（动画）；
};
setInterval（函数（）{
流星（）；
},200); 
var循环=纸张循环（250250,80）.attr({
填充：'绿色'，
行程：0
});
HTML

---

非常感谢你的帮助

我不确定是否有一个简单的答案。这里引用了一些类似SVG的方法，但我不确定它们是否真的可以用于此目的。这还取决于它是否只是圆，或者这些圆是否只是更复杂事物的占位符。如果它是圆的，你可以遵循碰撞检测，就像我在下面的例子中使用的那样

对于检查，我将检查动画之外的所有对象。这感觉有点笨重，最好是在动画中加入动画，但还没有找到一种方法可以做到这一点（你可以自己制作动画功能）

在这里拉小提琴

circle.data('myAnim', anim);

....

function collision (p1x, p1y, r1, p2x, p2y, r2) {
    var a;
    var x;
    var y;

    a = r1 + r2;
    x = p1x - p2x;
    y = p1y - p2y;

    if ( a > Math.sqrt( (x*x) + (y*y) ) ) {
       return true;
    } else {
        return false;
    }   
}

....

setInterval( function() {   // maybe use requestAnimationFrame
    paper.forEach( function(el) { 
        if( el.type=='circle' ) { 
            if( collision( el.attr('cx'), el.attr('cy'), el.attr('r'), bigCircle.attr('cx'), bigCircle.attr('cy'), bigCircle.attr('r') ) ) {
                if( el.data('myAnim') ) {
                    el.stop( el.data('myAnim') );
                    el.remove();
                }
            };
        }
   } );