拉斐爾JS繪製同心線

我被卡住使用拉斐爾JS：我想做一個基本的動畫，繪製同心線，同時加載一些東西。拉斐爾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°）。

還有，問題是：我想動畫從頂部開始。

任何想法？

來源

2015-07-13 enguerranws

我不能讓你的小提琴運行，但：

您可以在您的座標變量Math.cos和Math.sin添加/ Math.PI/2。減去的角度參數（弧度），應該做的伎倆！

來源

2015-07-13 09:52:41 franciscod

你在小提琴的控制檯有任何錯誤嗎？你能提供一個包含代碼修改部分的答案嗎？（我沒有看到在哪裏添加/減去Math.PI/2 :( – enguerranws

https://jsfiddle.net/rfuqjL65/1/這樣做對你有用嗎？另外，我已經澄清了我的答案 – franciscod

那麼，例子不起作用：它說拉斐爾沒有被定義，當拉斐爾應該由JSFiddle加載時......但是你的回答很好，謝謝！ – enguerranws

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));

來源

2015-07-13 10:07:37

拉斐爾JS繪製同心線

回答

相關問題