Raphael JS 绘制同心线

Question

我无法使用 Raphael JS：我想制作一个基本动画，在加载一些内容时绘制同心线。

所以，我做了这个功能：

function loadingButton(width, height) {

    width = width ? width : 240;
    height = height ? height : 240;




    var loadingButton = Raphael("loading-button", width, height);
    var center = 120,
        xloc = center,
        yloc = center,
        R = 120,
        imgW = 124,
        imgH = 140;
    var lines;
    var percent = loadingButton.text(center, center, '0');
    percent.attr({'font-size': 36, 'fill': '#fff'});
    var count = 0;
    var interval = setInterval(function(){

        if( count <= 100){
            var start_x = center+Math.round((center-30)*Math.cos(4*count*Math.PI/200));
            var start_y = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
            var end_x = center+Math.round((center-10)*Math.cos(4*count*Math.PI/200));
            var end_y = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));   
            lines = loadingButton.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y).attr({"stroke":"#FFF","stroke-width":"1"});
            percent.attr({text: count});
            count++;
        }

        else {
            clearInterval(interval);
        }
    }, 50);






};

现场演示：http://jsfiddle.net/rfuqjL65/

问题是，正如您在 fiddle 上看到的那样，动画是从第一节 (90°) 开始的，而不是从顶部 (0°) 开始的。

好吧，问题是：我希望动画从顶部开始。

有什么想法吗？

Answer 1

我听不到你的 fiddle 运行，但是：

您可以 add/substract Math.PI/2 到坐标变量中 Math.cos 和 Math.sin 的角度参数（以弧度为单位），这应该可以解决问题！[= 13=]

Answer 2

http://jsfiddle.net/rfuqjL65/2/ 我改变你的代码。这奏效了。还有

 var start_x = center+Math.round((center-30)*Math.sin(4*count*Math.PI/200));
                var start_y = center-Math.round((center-30)*Math.cos(4*count*Math.PI/200));
                var end_x = center+Math.round((center-10)*Math.sin(4*count*Math.PI/200));
                var end_y = center-Math.round((center-10)*Math.cos(4*count*Math.PI/200));

Raphael JS 绘制同心线

Raphael JS to draw concentric lines

javascript

raphael