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

如果您需要的是划分圆圈，解决方案需要：

确定给定分割数的角度

360 / nrOfDivisons
使用圆的参数方程确定所有分界线的终点的坐标：

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/

RaphaëlJS动态绘制角度线

1 个答案: