svg - raphael js、キャンバスのサイズを変更し、setViewBox を使用してすべての要素を表示する

Question

キャンバスに問題があります。

最初の幅 = 1300、高さ = 500 の私のキャンバス

次に、幅 = 800px、高さ = 500 にサイズ変更します

setViewBox をズームしてみます。しかし、マウスをドラッグしても要素が修正されません。

@canvas.resize(800, 500)
@canvas.setViewBox(0,0, ??, ??)

どうやって計算するの？？？

お手伝いありがとうございます。:)

Answer 1

次のようなアプローチを使用して、必要な寸法を計算できます。

function recalculateViewBox( canvas )
{
    var max_x = 0, max_y = 0;
    canvas.forEach( function( el )
        {
            var box = el.getBBox();
            max_x = Math.max( max_x, box.x2 );
            max_y = Math.max( max_y, box.y2 );
        } );
    if ( max_x && max_y )
        canvas.setViewBox( 0, 0, max_x, max_y );
}

基本的に、キャンバスのコンテンツをたどってメタバウンディング ボックスを構築し、それに合わせて viewBox を調整するだけです。

少し派手にしたい場合は、いつでもビューボックスをアニメーション化して、新しいサイズに滑らかに移行することができます。機能的には重要ではありませんが、適度にセクシーです...