Question

我正在使用Raphael JS库开发一种由同心圆形扇区组成的雷达。我已经能够创建这些扇区，但是，我很难想出一个合适的解决方案，如何在每个扇区内放置点（基本上是简单的拉斐尔形状 - 圆形，三角形等）。我不确定，但可能的解决方案是使用每个路径的getBBox（）吗？请记住，圆形形状的边界框的点不在形状本身内。

Answer 1

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

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

并使用该点作为中心绘制随机对象

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

http://jsfiddle.net/5L9g0xh4/

更新：

路径交叉存在但有点作弊，但在Raphael中效果不佳

约束随机点然后旋转每个： http://jsfiddle.net/crockz/opqhas0w/

在Raphael弧路径中动态放置点

1 个答案: