2

http://raphaeljs.com/polar-clock.htmlで極地時計の例を見つけることができました

同心円を描くように修正しましたが、円弧を 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']});
4

1 に答える 1