Question

我需要在svg路径内生成随机点。我想在svg路径内的所有随机生成的点中添加圆。

Answer 1

您可以使用getBBox来获取路径的边界框并生成该范围内的随机点。然后将elementFromPoint与随机点一起使用，以检查您是否确实在形状上。

如果有任何元素覆盖路径，则将其设置为pointer-events =“ none”，以便在执行此操作时将其忽略。

或者如果路径是凸的，也可以这样做：


Raphael.el.getRandomPointInsideConvex=function(){
    if(this.type!='path') return undefined;

    //sample two points along the path
    var len=this.getTotalLength(),
        p1=this.getPointAtLength(Math.random()*len),
        p2=this.getPointAtLength(Math.random()*len),
        ratio=Math.random();

    //get the random point
    var x=p1.x+(p2.x-p1.x)*ratio,
        y=p1.y+(p2.y-p1.y)*ratio;

    return {x:x,y:y};
};
You can call the method this way:

//el is an element
var r=el.getRandomPointInsideConvex();
//draw a cross at this point to show it.
el.paper.path(['M',r.x-2,r.y,'L',r.x+2,y,'M',r.x,r.y-2,'L',r.x,r.y+2]);

svg路径中的随机点（x，y）

1 个答案: