1

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

1 回答 1

3

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

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();
    }
于 2012-06-20T08:33:27.580 回答