Question

我能够在http://raphaeljs.com/polar-clock.html

找到极地时钟的示例

我将其修改为绘制同心圆，但我需要弧线从6点开始。我试图剖析它是如何工作的，但却无法弄明白。

JS小提琴：

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

我修改了主要功能，使弧线从6点开始等效位置。请注意，在极坐标中找到点的公式始终为：

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

相应地找出起点和终点。

要将起始角度改为“delta”，所有角度都应加“delta”。因此，

newAngle = angle + 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};
};

raphael js绘制的弧线从6点钟开始，以cocentric为中心

1 个答案: