4

这个问题描述起来真的很简单。我有一个简单的 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>

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

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

4

2 回答 2

6

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

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

于 2013-05-24T17:04:16.210 回答
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]);

希望能帮助到你。

于 2013-10-17T00:27:35.580 回答