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

Question

我有一个中心点，每 20 度向外有 18 个轴。我如何从一条路径的任何一点到另一条路径绘制一条路径，一路走来。例如，从中心 0 度外 20 像素开始，然后在 20 度外画到 40 像素，然后在 40 度外画到 100 像素，等等。

我开始走一些路（对不起），但在文档中找不到任何东西来做我想做的事（至少不是公开的）。我想也许 getPointAtLength 会是答案，但无法到达那里。

Answer 1

您需要构建一个定义路径的字符串，如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);