1

アニメーションで四角形の線を描画したい。

これは私が得たものです:

    window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
            paper.path("M510 10").animate({path: "M510 10 L510 14"}, 80, function(){
                paper.path("M510 14").animate({path: "M510 14 L10 14"}, 1000, function(){
                    paper.path("M10 14").animate({path: "M10 14 L10 10"}, 80);
                });
            });
        }); 
      }

長方形が描かれていますが、よく見ると長方形の角が閉じていません。

次の例を見てください。

var balk2 = paper.path ("M10 256 L510 256 L510 260 L10 260 z");

このように長方形を作ると、角がシャープになります。

どうすれば修正できますか？

4

2 に答える 2

2

以前のばかげたことをお詫びするために更新しました：

私は通常、次のようなユーティリティ関数を使用して、一定期間にわたって任意のパスを描画します。

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 25;
    var result = path;       

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;
        path.animate( attr, interval_length );                         
        if ( elapsed_time >= duration )
        {
            clearInterval( interval_id );
            if ( callback != undefined ) callback();
        }                                       
    }, interval_length );  
    return result;
}

この場合、単に呼び出すだけです

var rectPath = drawpath( paper, "M10 10 L510 10 L510 14 L10 14 z", 4000, function()
    {
        // want to apply some other attributes to the finished rectangular path?  Here's where you'd do it.
    } );

これには、あらゆる種類の複雑な形状を操作できるという利点があり、使用している場合はテキスト パスを含めますprint。つまり、こののように、適度に印象的な描画効果を実現できます。

于 2012-08-29T17:56:11.877 に答える
1

オリジナルを修正する方法がわかりませんが、オリジナルを削除してから、1 つのパスを使用して再描画できる可能性があります

http://jsfiddle.net/XhHgs/1/

   window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
                var path2=paper.path("M510 10");
                path2.animate({path: "M510 10 L510 14"}, 80, function(){
                var path3 = paper.path("M510 14");
                path3.animate({path: "M510 14 L10 14"}, 1000, function(){
                    paper.path("M10 14").animate({path: "M10 14 L10 10"}, 80).remove();
                    path3.remove();
                    path2.remove();
                    balk1.remove();
                    balk1  = paper.path ("M10 10 L510 10 L510 14 L10 14 z");
                });
            });
        }); 
      }​

編集

考え直して、これを使用してください

http://jsfiddle.net/XhHgs/3/

   window.onload = function() {  
        var paper = new Raphael(document.getElementById('ornament2'), 520, 520);

        var balk1 = paper.path("M10 10").animate({path: "M10 10 L510 10"}, 1000, function() {
                balk1 .animate({path: "M10 10 L510 10 L510 14"}, 80, function(){
                  balk1 .animate({path: "M10 10 L510 10 L510 14 L10 14"}, 1000, function(){
                   balk1.animate({path: "M10 10 L510 10 L510 14 L10 14 z"}, 80);
                });
            });
        }); 
      }​
于 2012-08-29T16:23:47.213 に答える