更改Raphael弧的起始位置

Question

我一直在试图使用Raphael JavaScript库在指定起始位置的同时逆时针绘制一个圆的百分比。

目前我已经设法使用下面的代码逆时针绘制并从6点钟位置开始，但我希望它开始在4点钟位置绘图（或理想地在我指定的任何位置）。

var amount = 75; 

var archtype = Raphael("canvas", 500, 500); 
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; 
      console.log('x - ' + x); 
      console.log('y - ' + y); 
     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), 0, x, y] 
      ]; 
     } 
     return { 
      path: path 
     }; 
    }; 

var my_arc = archtype.path().attr({ 
    "stroke": "#00A5FF", 
    "stroke-width": 14, 
    arc: [90, 90, 0, 100, 80] 
}); 

my_arc.animate({ 
    arc: [90, 90, amount, 100, 80] 
}, 1500); 

我刚开始使用拉斐尔图书馆，真的很感谢任何帮助。

感谢

Answer 1

刚刚发现的.rotate功能。以下代码旋转从4点钟位置开始的圆-45度。我想你需要使用Raphael v2中的transform函数。

my_arc.rotate(-45, 90, 90).animate({ 
    arc: [90, 90, amount, 100, 80] 
}, 1500);