Случайная точка внутри SVG <path>

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 со случайной точкой, чтобы проверить, что вы действительно находитесь над формой.

Если какие-либо элементы охватывают путь, то установите для них указатель-события = "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]); 

Надеется, что это помогает.