Javascript 在Raphael圆弧路径中动态放置点

我正在使用Raphael JS库开发一种由同心圆形扇区组成的雷达。我已经能够创建这些扇区，但是，我很难想出一个合适的解决方案，如何在每个扇区中放置基本上是简单拉斐尔形状的点-圆、三角形等。

---

我不确定，但可能的解决方案是否在于对每个路径使用getBBox？请记住，圆形的边界框具有不在形状本身内的点。

在区域内绘制一条随机的不可见路径

在该路径内获取一个随机点

并以该点为中心绘制一个随机对象

var radius1 = 80;
var radius2 = 50;
var center = 250;
function circleToPath(c, r, d) {
  if(d == 1) {
    return "M "+(c-r)+","+c+" q 0,-"+r+" "+r+",-"+r+" "+r+",0 "+r+","+r+" 0,"+r+" -"+r+","+r+" -"+r+",0 "+"-"+r+",-"+r;
  } else {
    return "M "+(c-r)+","+c+" q 0,"+r+" "+r+","+r+" "+r+",0 "+r+",-"+r+" 0,-"+r+" -"+r+",-"+r+" -"+r+",0 "+"-"+r+","+r;
  }
}
region = paper.path(circleToPath(center, radius1, 1) + circleToPath(center, radius2, 0) + "z").attr({fill: "red", "fill-opacity": 0.5,stroke: "none"});
for(i=0;i<5;i++){
  randomRadius = Math.floor((Math.random() * (radius1 - radius2)) + radius2);
  vir = paper.path(circleToPath(center, randomRadius, 1)).attr({fill: "none", stroke: "none"});
  len = vir.getTotalLength();
  pointCenter = vir.getPointAtLength(Math.floor(Math.random() * len));
  paper.circle(pointCenter.x,pointCenter.y,(Math.floor(Math.random() * 15)) + 5);
}

更新：

存在一点作弊，因为存在路径交叉，但在拉斐尔不起作用

约束随机点，然后旋转每个点：

---

感谢您的回复，这似乎是一个解决方案，但是，由于随机性，可能存在点对象重叠的情况，这是我不希望看到的。有什么方法可以避免这种情况发生吗？嗯…看起来有很多黑客。我试一试，让你知道我进展如何。非常感谢你的帮助。