RaphaëlJS動態繪製角線

Question

我正在用Raphael JS手動繪製線，我會動態創建無限線（使用foreach函數）。

var r = Raphael('canvas', 300, 300); 

var axis = { 
    2: "M 0 150 L 150 150", 
    3: "M 150 0 L 150 150, M 150 150 L 280 225, M 150 150 L 20 225", 
    4: "M 150 150 L 300 150, M 150 150 L 150 0, M 150 300 L 150 150, M 0 150 L 150 150", 
    6: "M 150 0 L 150 150, M 150 150 L 280 225, M 150 150 L 20 225, M 280 75 L 150 150, M 20 75 L 150 150 ,M 150 150 L 150 300" 
}; 

r.path(axis[6]).attr({'stroke-width':2, stroke:"#ff0000"}).toBack(); 

Example in JSFiddle

任何線索？

在此先感謝。

Answer 1

如果你需要的是圓的分工，該解決方案將需要：

1. 確定角度劃分的給定數量的

   360/nrOfDivisons

2. 確定COORDS所有分界線的終點使用參數方程爲一個圓：

   x = cx + r * cos（a） Y = CY + R *罪（一）

的代碼看起來如下：

var r = Raphael('canvas', 300, 300);  


var divideCircle = function(posX,posY,radius,nrOfDivisions){ 
    var xStart = posX 
     , yStart = posY 
     , step = 360/nrOfDivisions 
    ; 
    for(var i = 0 ; i < nrOfDivisions ; i++){ 
     //x = cx + r * cos(a) 
     //y = cy + r * sin(a) 
     var xEnd = Math.cos(step * i *(Math.PI/ 180))*radius + xStart, 
      yEnd = Math.sin(step * i * (Math.PI/180))*radius + yStart, 
      pathString = 'M '+ xStart.toString() + ',' + yStart.toString() + 'L '+ xEnd.toString() + ',' + yEnd.toString() 

     r.path(pathString).attr({'stroke-width':2, stroke:"#ff0000"}).toBack();   
    } 
} 

divideCircle(150,150,150,4); 

工作示例：

http://jsfiddle.net/RkdJZ/1/