raphael js, resize canvas then setViewBox to show

Question

I have a problem with my canvas.

My canvas in first width = 1300, height = 500

Then I resize it to width = 800px, height = 500

I try setViewBox to zoom it. But mouse not fix with element when I drag them.

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

how to calculate it???

Thank for your help. :)

Answer 1

You can calculate the necessary dimensions using an approach like this:

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 );
}

Essentially, you simply walk the contents of the canvas and construct a meta-bounding box, then adjust the viewBox to it.

If you wanted to get a little fancy, you could always animate the viewbox so that it transitions fluidly to it's new size. Not functionally important, but moderately sexy...