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

希望它有所帮助。

SVG <path> </path>中的随机点

2 个答案: