Raphael JS 绘制同心线答案

【问题标题】：Raphael JS to draw concentric linesRaphael JS 绘制同心线
【发布时间】：2015-07-13 18:07:37
【问题描述】：

我无法使用 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/

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

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

有什么想法吗？

【问题讨论】：

标签： javascript raphael

【解决方案1】：

我无法让你的小提琴运行，但是：

您可以将Math.PI/2 添加/减去Math.cos 和Math.sin 在坐标变量中的角度参数（以弧度为单位），这应该可以解决问题！

【讨论】：

小提琴的控制台有什么错误吗？你能提供一个包含代码修改部分的答案吗？（我看不到在哪里添加/减去 Math.PI/2 :(
jsfiddle.net/rfuqjL65/1 这对你有用吗？另外，我已经澄清了我的答案
好吧，这个例子不起作用：它说 Raphael 没有定义，当 Raphael 应该由 JSFiddle 加载时......但是你的回答很好，谢谢！

【解决方案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));

【讨论】：