How do you zoom in on a JavaFX 2 Canvas node?

Question

Right now I am grabbing the GraphicsContext for my canvas node and trying a

gc.scale(2, 2);

On my canvas I have a few dozen methods available. So I know there has to be something to zoom in on. However my attempt produces no obvious "growing" or "zooming". Is there something I need to be calling to get this to be applied or redrawn?

Answer 1

I think that gc.scale(2,2) will scale the next things you draw on the canvas by a factor of 2, not existing stuff you have already drawn.

If you want to scale the canvas you can set a transform on the canvas, not the graphics context.

canvas.setScaleX(2);
canvas.setScaleY(2);

If you want the scaled canvas to be reflected in layout calculations for layout managers then you can wrap it in a Group and if you want to zoom-like effect on the scaled canvas where parts of the canvas are clipped, then you can either place the canvas in a ScrollPane and define a viewport to it or set a clip on the canvas node.

Update to discuss pixellation issues

To avoid pixellation issues on magnification, I think you will need to keep a record of all of the graphics commands which have been drawn to date, then when you want to change the zoom factor, clear the canvas, apply the new scale to the canvas, then replay all of the graphics commands. Perhaps some format like svg could be used to record the graphics commands.

Or you could just use the scene graph and draw to that rather than a canvas, then you won't have pixellation issues either.

I think the important thing to note here is that canvas is supposed to be a kind of immediate mode fire and forget thing, rather than a retained mode drawing service like the scene graph.