javascript - Raphaël JS 动态绘制 Angular 线

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. 确定给定分割数的 Angular

   360/nrOfDivisions

2. 使用圆的参数方程确定所有分界线的终点坐标:

   x = cx + r * cos(a)y = cy + r * sin(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);

工作示例:

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