Raphael.js围绕中心点的不规则路径

时间:2013-06-20 16:04:07

标签: javascript canvas svg raphael

我的中心点有18个轴,每20度向外移动一次。 如何从一条路径的任何点到下一条路径绘制路径。 例如。在0deg处从中心开始以20px开始,然后在20deg处从40px拉出,然后在40deg处拉到100px,等等。

我开始走下一些路径(对不起),但在documentation找不到任何可以做我想做的事情(至少不公开)。我想也许getPointAtLength会是答案,但无法到达那里。

1 个答案:

答案 0 :(得分:2)

您需要构建一个定义路径的字符串,如http://raphaeljs.com/reference.html#Paper.path中所述,这将需要一些三角函数。假设你有一个中心点(cx,cy)和一个半径数组:

var commands = 'M';
var radii = [20, 40, 100, ...];
var cx = 200;
var cy = 200;

for (var i=0; i<18; i++) {
    var theta = Math.PI * i/9;
    var x = cx + radii[i] * Math.cos(theta);
    var y = cy + radii[i] * Math.sin(theta);
    commands += x + ' ' + y + ' ';
}

var p = paper.path(commands);