在拉斐爾圓弧路徑中動態放置點

我正在開發一種雷達，它由使用拉斐爾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

在拉斐爾圓弧路徑中動態放置點

回答

相關問題