RaphaëlJS动态绘制角线

2013-10-14 50 views 1 likes

我正在用Raphael JS手动绘制线，我会动态创建无限线（使用foreach函数）。RaphaëlJS动态绘制角线

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

任何线索？

在此先感谢。

来源

2013-10-14 MSTRKRFT

有什么问题吗？我在黑色圆圈上看到红线，因为您提供的标记符合我的预期。 –

这些坐标是硬编码的，所以我正在寻找自动化这个过程来增加坐标轴的数量而不用写新坐标:) – MSTRKRFT

通过将不同的碎片添加到一起来动态地创建字符串将是一种方法。 –

回答

如果你需要的是圆的分工，该解决方案将需要：

确定角度划分的给定数量的

360/nrOfDivisons
确定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/

来源

2013-10-15 06:19:15

RaphaëlJS动态绘制角线

回答

相关问题