在SVG中順時針的銷燬路徑

所以第一個函數創建一個圓並且它的工作非常好，但是我有一個destroyCircle函數的問題。有什麼辦法可以順時針摧毀圓圈嗎？在SVG中順時針的銷燬路徑

HTML代碼：

<div style="width:160px;height:160px;"> 
    <svg width="160" height="160" viewBox="0 0 160 160"> 
     <path id="arc" transform="translate(80, 80) scale(0.85)" fill="rgba(0,0,0,0.73)" d="M 0, 0 V -80 A 0 0 1 1 1 -0.001 -80 Z"></path> 
    </svg> 
</div>

的Javascript代碼：

function destroyCircle(id) { 
    var circle = document.getElementById(id); 
    var angle = 270; 
    var radius = 80; 
    window.timerx = window.setInterval(

    function() { 
     angle = angle + 3; 
     var radians = (angle/180) * Math.PI; 
     var x = -Math.cos(radians) * radius; 
     var y = Math.sin(radians) * radius; 
     var e = circle.getAttribute("d"); 
     var d = e + " L " + x + ", " + y; 

     if (angle > (270 + 356)) { 
      window.clearInterval(window.timerx); 
     } 
     circle.setAttribute("d", d); 
    }, 20); 
} 

function drawCircle(id) { 
    var circle = document.getElementById(id); 
    var angle = 90; 
    var radius = 80; 
    window.timer = window.setInterval(

    function() { 
     angle = angle + 3; 
     var radians = (angle/180) * Math.PI; 
     var x = -Math.cos(radians) * radius; 
     var y = -Math.sin(radians) * radius; 
     var e = circle.getAttribute("d"); 
     var d = e + " L " + x + " " + y; 
     circle.setAttribute("d", d); 
     if (angle > 449) { 
      window.clearInterval(window.timer); 
      destroyCircle("arc"); // DESTROY THE CIRCLE 
     } 
    }, 10); 
} 

// draw the circle 
drawCircle("arc");

來源

2014-09-04 Emre

感謝您的評論，我剛剛更新的問題@ codename- – Emre 2014-09-04 14:29:59

看到我的回答如下@Emre – 2014-09-04 15:37:35

我覺得這是最簡單的方法：您需要刪除添加的所有片段

在你的drawCircle功能。要做到這一點，你可以將字符串轉換爲數組，並簡單地使用shift或pop（pop將按逆時針方向執行）。

function destroyCircle(id) { 
    var circle = document.getElementById(id); 
    var angle = 0; 
    var radius = 80; 

    var e = circle.getAttribute("d"); 
    var x = e.split('Z'); 
    var y = x[1].split('L'); 

    window.timerx = window.setInterval(function() { 
     y.shift() 
     var d = x[0] + 'Z L' + y.join('L'); 

     if (!y.length) { 
      d = x[0] + 'Z'; 
      clearTimeout(window.timerx) 
     } 

     circle.setAttribute("d", d); 
    }, 10); 
}

我已經更新您的jsfiddle：http://jsfiddle.net/mkn9t627/1/

來源

2014-09-04 15:21:42

在SVG中順時針的銷燬路徑

回答

相關問題