0

I managed to draw multiple concentric arcs based on previous so posts and put up a jsfiddle to illustrate it

http://jsfiddle.net/9YzHR/8/

var arcsL = [12, 80, 15];
var arcsR = [34, 90, 70];
var colori = ["c91485", "feca12", "3addee"];
var strokeWidth = 10,
r = 150,
rg = 150;
var archFn = function (xloc, yloc, value, total, R) {
    var alpha = 180 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xloc + R * Math.cos(a),
        y = yloc - R * Math.sin(a),
        path;
    path = [
        ["M", xloc, yloc - R],
        ["A", R, R, 0, +(alpha > 180), 1, x, y] // 
    ];
    return {
        path: path
    };
};

// create left circles - start
var archtypeL = Raphael("l", 160, 320);
archtypeL.customAttributes.arc = archFn;
rg = 150;
for (var i=0; i<arcsL.length; i++) {
    createCirclesL(arcsL[i], i);
}

// create right circles - start
var archtypeR = Raphael("r", 160, 320);
archtypeR.customAttributes.arc = archFn;
rg = 150;
for (var i=0; i<arcsR.length; i++) {
    createCirclesR(arcsR[i], i);
}

function createCirclesL(v, i){
    var my_arc = archtypeL.path().attr({
        "stroke": "#" + colori[i],
        "stroke-width": strokeWidth,
        arc: [-r/2, -r/2, v, 100, rg] // x, y, valore su, totale, raggio
    });
    my_arc.rotate(180, 40, 40);
    rg = rg-15;
}
function createCirclesR(v, i){
    var my_arc = archtypeR.path().attr({
        "stroke": "#" + colori[i],
        "stroke-width": strokeWidth,
        arc: [r/2-70, -r-5, v, 100, rg] // x, y, valore su, totale, raggio
    });
    my_arc.scale(1,-1, 0, 0);
    rg = rg-15;
}

but to make it so I tweaked the arcs scaling and rotating the graphics. Is there a better way to make the arcs without using any raphael tranlsate method, just using math formula (which i'm not very good at)?

4

0 回答 0