дуги в raphael js Нарисуйте как калибр

Question

Мой круг начинается с 12 часов. Но мне нужно начинать с 7 и заканчиваться в 5. Всегда запускается горизонтально, но мне нужно начинать вертикально. Также как добавлять эффекты, такие как тень и т. Д.

var amount = ("80"); 


var archtype = Raphael("canvas", 600, 400); 
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) { 
    var alpha = 360/total * value, 
     a = (90 - alpha) * Math.PI/180, 
     x = xloc + R * Math.cos(a), 
     y = yloc - R * Math.sin(a), 
     path; 
    if (total == value) { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
     ]; 
    } else { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, +(alpha > 180), 1, x, y] 
     ]; 
    } 
    return { 
     path: path 
    }; 
}; 

//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
var my_arc = archtype.path().attr({ 
    "stroke": "#f00", 
    "stroke-width": 14, 
    arc: [200, 200, 0, 100, 60] 
}); 

my_arc.animate({ 
    arc: [200, 200, amount, 100, 60] 
}, 1500, "bounce"); 

Answer 1

я наконец нашел его: D только что добавили my_arc.rotate (215, 100, 100)

<script > 

var amount = ("50"); 


var archtype = Raphael("canvas", 300, 200); 
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) { 
    var alpha = 360/total * value, 
     a = (90 - alpha) * Math.PI/180, 
     x = xloc + R * Math.cos(a), 
     y = yloc - R * Math.sin(a), 
     path; 
    if (total == value) { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
     ]; 
    } else { 
     path = [ 
      ["M", xloc, yloc - R], 
      ["A", R, R, 0, +(alpha > 180), 1, x, y] 
     ]; 
    } 
    return { 
     path: path 
    }; 
}; 

//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
var my_arc = archtype.path().attr({ 
    "stroke": "#f00", 
    "stroke-width": 14, 
    arc: [100, 100, 0, 100, 60] 
}); 

my_arc.rotate(215, 100 ,100).animate({ 
    arc: [100, 100, 80, 100, 60] 
}, 2000, "bounce"); 

Answer 2

Крошечное обновление, чтобы эта работа работала над IE8.
Вам нужно удалить дополнительную запятую в конце массива путей, иначе IE8 даст ошибку JS.

var arcseg = function (cx, cy, radius, start_r, finish_r) { 
    start_r = Raphael.rad(start_r); 
    finish_r = Raphael.rad(finish_r); 

    var start_x = cx + Math.cos(start_r) * radius, 
    start_y = cy + Math.sin(start_r) * radius, 
    finish_x = cx + Math.cos(finish_r) * radius, 
    finish_y = cy + Math.sin(finish_r) * radius, 
    path; 

    path = [ 
    [ "M", start_x, start_y ], 
    [ "A", radius, radius, finish_r - start_r, 
     (finish_r - start_r > Raphael.rad(180)) ? 1 : 0, 
     (finish_r > start_r) ? 1 : 0,   
     finish_x, finish_y ]    
    ]; 
    return { path: path }; 
};