Raphaël JS 动态绘制角度线答案

【问题标题】：Raphaël JS draw angle lines dynamicallyRaphaël JS 动态绘制角度线
【发布时间】：2013-10-14 17:45:51
【问题描述】：

我正在使用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

有什么线索吗？

提前致谢。

【问题讨论】：

有什么问题？我看到黑色圆圈上有红线，鉴于您提供的标记是我所期望的。
坐标是硬编码的，所以我正在寻找自动化这个过程来增加轴的数量而不写新的坐标:)
通过将各种片段附加在一起来动态创建字符串是一种方法。
@RobertLongson 你看过一个有效的例子吗？
我需要为数据可视化创建无限变化

标签： javascript svg raphael data-visualization pi

【解决方案1】：

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

确定给定分割数的角度

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

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/

【讨论】：