svg - SVG内的随机点

Question

这个问题描述起来真的很简单。我有一个简单的 SVG 闭合形状，如下所示：

<path d="M435.95,147.99l0.33,0.49l-0.11,1.07l-0.39,0.04l-0.29,-0.15l0.21,-1.4l0.25,-0.05Z"></path>

我想在这个形状内的某个地方随机画一个点。

怎么做？我希望解决方案尽可能简单。

Answer 1

您可以使用getBBox获取路径的边界框并在该范围内生成一个随机点。然后使用elementFromPoint和随机点来检查你是否真的超出了形状。

如果任何元素覆盖了路径，则将它们设置为 pointer-events="none" 以便在您执行此操作时忽略它们。

Answer 2

如果路径是一个凸的，我们可以用一种简单的方式来做：

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

您可以这样调用该方法：

//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]);

希望能帮助到你。