6

Raphael JS で描画されているベクター パスをアニメーション化するにはどうすればよいですか?

Raphael JS を使用して接続したい座標のセットがあります。

グリッドでは、座標は (x,y セット) です。ユーザーが見ているように、一方の端から始めて「点をつなぐ」ようにしたいと思います。最終製品は次のようになります。

写真9.png http://img213.imageshack.us/img213/8013/picture9my.png

理想的には、パスを曲線にして、次のように見えるようにしたいと考えています (参照用に追加された座標):

写真10.png http://img534.imageshack.us/img534/1789/picture10fc.png

座標は次のとおりです。

26,-6
14,-12
5,-20
11,-28
14,-37
5,-40

私はGoogleを検索してきましたが、この質問を読みましたベクターパスを段階的に描画する方法は? （Raphael.js）しかし、私はRaphael.jsを具体的に使用しようとしています.Raphael.jsのそのページの例は機能していないようで、入力に複数の座標点を使用することについても話していません.

4

2 に答える 2

19

プログレッシブ パス

徐々にパスを描くのは簡単です。この質問に対する 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 = 50;
    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();
                guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

あなたは私のサイトで実際にそれを見ることができます.

これだけで、ポイントのプログレッシブ パスの構築を直線的にアニメートすることが非常に簡単になります。パスをコンパイルするだけです...

var sequence_path = ["M26,-6", "L14,-12", "L5,-20", "L11,-28", "L14,-37", "L5,-40"];

そして、設定したパス アニメーション関数に渡します。私の場合、

drawpath( paper, 
          sequence_path, 
          3500, 
          { stroke: 'black', 'stroke-width': 2, 'stroke-opacity': 1, fill: 'none', 'fill-opacity': 0 }, 
          function()
          {
              alert("All done");    // trigger whatever you want here
          } );

カーブ補間

Raphael 2.0 の Catmull Rom 機能により、ポイント間を優雅にカーブさせることが非常に簡単になります (これを指摘してくれた Erik Dahlström に感謝します)。「R」コマンドを使用してポイント間を移動するパスを作成するだけで、後は Raphael が行います。

function generateInterpolatedPath( points )
{
    var path_sequence = [];
    path_sequence.push( "M", points[0].x, points[0].y );
    path_sequence.push( "R" );
    for ( var i = 1; i < points.length; i++ )
    {
        path_sequence.push( points[i].x, points[i].y );
    }
    return path_sequence;
}

すべての部品が連携して動作している様子をここで見ることができます。

于 2012-10-25T18:24:14.663 に答える
3

Catmull Rom ( http://raphaeljs.com/reference.html#Paper.pathを参照) を使用して、指定された点を通る滑らかな曲線を取得することもできます。

ライブ デモはこちら(クリックしてポイントを割り当て、Shift キーを押しながらクリックして Catmull Rom カーブに切り替えます)。

于 2012-10-26T12:30:55.387 に答える