在拉斐尔圆弧路径中动态放置点

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

来源

2014-12-04 Ogo

绘制随机无形的路径区域内

获取路径

内随机点并绘制利用这一点为中心

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/

更新随机对象：

A点亮但TLE位作弊的路径存在交集在拉斐尔都不尽如人意

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

来源

2014-12-05 04:10:26 crockz

感谢您的答复，这似乎是一个解决方案，但是，因为随机性，可能会出现我不想要的点（物体）重叠。有没有办法避免这种情况发生？ – Ogo 2014-12-15 15:16:08

嗯......好像很多黑客:)。我试试看，让你知道我如何继续。非常感谢您的帮助。 – Ogo 2014-12-16 11:45:29

在拉斐尔圆弧路径中动态放置点

回答

相关问题