这个问题描述起来真的很简单。我有一个简单的 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>
我想在这个形状内的某个地方随机画一个点。
怎么做?我希望解决方案尽可能简单。
您可以使用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};
};
您可以这样调用该方法:
//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]);
希望能帮助到你。