javascript - 如何删除 raphael 中我可能想在两秒后重绘的路径

Question

我在下面粘贴的代码非常适合在定义的时间间隔内逐步绘制一条线。 (它使用了一些此处未显示的变量)。我遇到的问题是，如果我在 raphael 中使用 remove() 函数删除路径对象 myPath1 或 2，它不想绘制下一个对象，也不想重绘自身。这似乎有点打破路径方法。

我应该怎么做？我希望能够重绘/重新激活路径，但这需要它从零开始，所以我想我也可以删除它。

var strokes1 = [ { stroke: "M "+second_start_circle+" 20", time: 0},
            { stroke: "l-70 70", time: 200},
            { stroke: "l800 0", time: 400}];

var drawnPath1 = strokes1[0].stroke;
var myPath1 = paper.path(drawnPath1);
myPath1.toBack();
var section1 = 1;
myPath1.attr({
    "stroke-width": 8,
    "stroke": color_services,
    "stroke-opacity": 1
});

function animatePath1() {
    if (section1 < strokes1.length) {
        drawnPath1 += strokes1[section1].stroke;
        myPath1.animate({
            path: drawnPath1
        }, strokes1[section1].time, animatePath1);
        section1++;
    }
}

var strokes2 = [ { stroke: "M "+third_start_circle+" 20", time: 0},
            { stroke: "l-70 70", time: 200},
            { stroke: "l500 0", time: 400}];

var drawnPath2 = strokes2[0].stroke;
var myPath2 = paper.path(drawnPath2);
myPath2.toBack();
var section2 = 1;
myPath2.attr({
    "stroke-width": 8,
    "stroke": color_about,
    "stroke-opacity": 1
});

function animatePath2() {
    if (section2 < strokes2.length) {
        drawnPath2 += strokes2[section2].stroke;
        myPath2.animate({
            path: drawnPath2
        }, strokes2[section2].time, animatePath2);
        section2++;
    }
}

Answer 1

我将其更改为具有删除功能。将不得不稍微优化此代码(我相信您可以看到自学编码器)。但现在它按预期工作。

var strokes1 = [ { stroke: "M "+second_start_circle+" 20", time: 0},
                { stroke: "l-70 70", time: 200},
                { stroke: "l800 0", time: 400}];

    var drawnPath1 = strokes1[0].stroke;
    var myPath1 = paper.path(drawnPath1);
    myPath1.toBack();
    var section1 = 1;       

    function animatePath1() {
        if (section1 < strokes1.length) {
            drawnPath1 += strokes1[section1].stroke;
            myPath1.attr({
                "stroke-width": 8,
                "stroke": color_services,
                "stroke-opacity": 1
            });
            myPath1.animate({
                path: drawnPath1
            }, strokes1[section1].time, animatePath1);
            section1++;
        }
    }
    function removePath1(){
        if (section1 == strokes1.length) {
            myPath1.remove();

        }
        section1 = 1;
        drawnPath1 = strokes1[0].stroke;
        myPath1 = paper.path(drawnPath1);
        myPath1.toBack();
    }