Raphaël JS가 각도 선을 동적으로 그립니다.

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. 좌표를 결정을 각도를 결정

   x = cx + r * cos (a)모든 분할 선의 끝점을 원에 대한 파라 메트릭 방정식을 사용하여 계산합니다.

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

   작업 예 :

코드는 다음과 같이 보일 것이다Y = CY + r에 * 죄 (A)

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