如何在拉斐尔中删除我可能想要在两秒钟后重新绘制的路径

How do I remove a path in raphael that I may want to redraw two seconds later

本文关键字：新绘制 两秒钟 绘制 路径 删除      更新时间：2023-09-26

我在下面粘贴的代码可以很好地在定义时间间隔的情况下逐步绘制一条线。（它使用一些此处未显示的变量）。我遇到的问题是，如果我在 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++;
    }
}

我把它改成了具有删除功能。将不得不稍微优化此代码（我相信您可以看到的自学编码器）。但现在它按预期工作。

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();
    }
相关文章：