1

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. :)

Peter89
  • 706
  • 8
  • 26

1 Answers1

3

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...

Kevin Nielsen
  • 4,413
  • 21
  • 26
  • Ops, if I my elements is not place in right position for my canvas have max width and height . Zoom only fix all elements. I need to zoom and fix window :) http://stackoverflow.com/questions/14064402/raphael-js-calculate-setviewbox-width-height-to-fix-window – Peter89 Dec 28 '12 at 04:02