JavaScript EditorFree JavaScript Editor     Perl Manuals 

Main Page

9.19. Scaling the Canvas

When you put a large number of items on the Canvas, it's sometimes hard to see them all without scrolling all over the place. It's possible to scale the Canvas; for example, so it will shrink everything in half or explode it to twice the original size. The usage for scale is as follows:

$canvas->scale(tag/id, xorigin, yorigin, xscale, yscale);

The scaling is centered around the xorigin and yorigin. It's best to use the real origin (0, 0) unless you can come up with a good reason not to. Both xscale and yscale are the scaling factors used on each coordinate in each item. Here are some examples:

$canvas->scale("all", 0, 0, 1, 1);   # no change!
$canvas->scale("all", 0, 0, .5, .5); # make all 1/2 size
$canvas->scale("all", 0, 0, 2, 2);   # double everything
$canvas->scale("all", 0, 0, 3, 3);   # triple everything!

It's a great idea to add Zoom In and Zoom Out Buttons that take care of the scaling for you. Keep track of the scaling factor in a variable ($scale, for instance); set it to 1 to start with. Multiply it by .5 to zoom out and by 2 to zoom in. The last thing you'll need to do is make sure that if you insert any new items into the Canvas, you multiply those coordinates by the scale factor as well (otherwise they will look either too large or too small compared to the rest of the Canvas items).

JavaScript EditorJavaScript Formatter     Perl Manuals