1

以下に貼り付けたコードは、時間間隔を定義して段階的に線を描画するために正常に機能します。（ここに示されていないいくつかの変数を使用します）。私が抱えている問題は、ラファエルのremove（）関数を使用してパスオブジェクトmyPath1または2を削除すると、次のオブジェクトを描画したり、自分自身を再描画したりしたくないということです。パスメソッドを壊しているようです。

これはどのようにすればよいですか？パスを再描画/蘇生できるようにしたいのですが、ポイント0からやり直す必要があるので、削除したほうがいいと思いました。

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 に答える