raphael js 绘制从 6 点开始的同心圆弧

Question

我在 http://raphaeljs.com/polar-clock.html 找到了 Polar 时钟的示例

我修改它以绘制同心圆，但我需要弧线从 6 点开始。我正在尝试剖析它的工作原理，但无法弄清楚。

JS 小提琴：

http://jsfiddle.net/5frQ8/

var r = Raphael("holder", 600, 600);

// Custom Attribute
r.customAttributes.arc = function (value, total, R, color) 
{
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 - R * Math.sin(a),
        path;
    if (total == value) 
    {
        path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]];
    } 
    else 
    {
        path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
    }
    return {path: path, stroke: color,"stroke-width": 30};
};

//West
r.path().attr({arc: [575, 2000, 200, '#19A69C']});

//Total#
r.path().attr({arc: [1000, 2000, 160, '#FEDC38']});

//East
r.path().attr({arc: [425, 2000, 120, '#7BBD26']});

Answer 1

我修改了 main 函数，使圆弧从 6 点钟的等效位置开始。请注意，在极坐标中查找点的公式始终是：

x = centerX + radius * cos(angle)
y = centerY + radius * sin(angle)

相应地找到起点和终点。

要通过“delta”更改起始角度，所有角度都应添加“delta”。因此，

newAngle = angle + delta

delta 的值为 -90 和 +90，弧线分别从 12 点和 6 点开始。

圆弧绘制功能相应改变。

// Custom Attribute
r.customAttributes.arc = function (value, total, R, color) 
{
    var angleShift = 90,
        alpha = 360 / total * value,
        a = (alpha + angleShift) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 + R * Math.sin(a),
        path;
    if (total == value) 
    {
        path = [["M", 300, 300 + R], ["A", R, R, 0, 1, 1, 300.01, 300 + R]];
    } 
    else 
    {
        path = [["M", 300, 300 + R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
    }
    return {path: path, stroke: color,"stroke-width": 30};
};