按鈕結算聖拉斐爾畫布單擊

Question

我有使用聖拉斐爾圓形餅圖倒計時+一個數字計時器組合倒數計時器，當點擊按鈕＃Timer60SecStart時運行。我在這裏作弊，拉斐爾動畫是完全獨立的倒數計時器，但通過點擊＃Timer60SecStart調用並運行60秒，似乎匹配OK。

我的問題是，每次我打電話畫圓（）加上一個新的循環，同時使現有的圈子裏，所以你風與分散在多個頁面倒計時圈。我想要一個clearCircle（）函數，在開始繪製新的圓之前清除前一個圓。

看了一下這個答案how-to-properly-remove-a-raphael-svg-element-referenced-in-an-animated-set但無法得到的設置/項/剪接位與我在做什麼工作。

這裏是我的代碼：

//Raphael Start 

var archtype = Raphael("canvas", 100, 100); 

function drawCircle() { 
    var archtype = Raphael("canvas", 100, 100); 
    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; 
    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), 1, x, y] 
     ]; 
    } 
    return { 
     path: path 
    }; 
    }; 

    //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce 
    var my_arc = archtype.path().attr({ 
     "stroke": "#f00", 
     "stroke-width": 40, 
     arc: [50, 50, 0, 100, 30] 
    }); 

    my_arc.animate({ 
    arc: [50, 50, 100, 100, 30] 
    }, 60000); 

    set.push(my_arc); 
    console.log(set) 

} //end drawCircle 

function clearCircle() { 
    alert("clear Circle"); 
} 

// Countdown Timer Stuff 
var longTimer = 0; 


$('#Timer60Sec').countdown({until: longTimer, compact:true}); 


$('#Timer60SecStart').click(function() { 
    longTimer = new Date(); 
    longTimer.setSeconds(longTimer.getSeconds() + 60.5) 
    $('#Timer60Sec').countdown('option',{until: longTimer}); 
    drawCircle();  
    clearCircle(); 
}); 

在這裏，這一切是作爲一個方便的jsfiddle：http://jsfiddle.net/WDpKP/2/

援助欣然讚賞。

Answer 1

卸下固定弧標籤。

function clearCircle() { 
    $('svg').remove(); 
} 

當你編寫自己的<svg>的標籤，你可以在需要的id添加到他們，你的代碼更改爲

function clearCircle() { 
    $('svg#youridhere').remove(); 
} 

這將防止其他<svg>標籤在你的頁面被移除。

Answer 2

你就能更好地運用Element.remove()

if(my_arc != undefined) { 
    my_arc.remove(); 
} 

因爲當你有多個SVG的，你會全部刪除...

例子：http://jsfiddle.net/WDpKP/6/