GWT：放大和缩小画布图

Question

I want to apply zoom in and zoom out with redrawing objects on canvas so I get clear view at maximum and minimum zoom level.

I get reference how to do it here therefore I have passed my canvas to ScalableImage constructor instead of Image and followed all step.
I am redrawing object in "mainDraw" method again but not getting proper result. I know I am missing new scale and translate factor for redrawing canvas but no idea how to set for it. I am drawing multiple objects on canvas like arc, rect etc... hence performance is major concern.

I have set context.translate(0, canvasHeight); and context.scale(1, -1); to start coordinate system from bottom left.(As per requirement)

Below is a sample code with one object and this canvas I am passing to ScalableImage constructor and calling it again in "mainDraw" .

int canvasHeight = 600;
int canvasWidth = 600;

Canvas canvas = Canvas.createIfSupported();
Context2d context = pcbCanvas.getContext2d();
canvas.setWidth("600");
canvas.setHeight("600");

canvas.setCoordinateSpaceHeight(canvasHeight);
canvas.setCoordinateSpaceWidth(canvasWidth);

context.translate(0, canvasHeight);
context.scale(1, -1);

context.beginPath();
context.rect(x, y, width, height); 
context.closePath();
context.fill();

RootPanel.get("canvasContainer").add(canvas);

Any reference or any idea?
Thanks

Answer 1

If you use the back context in my example it should allow you to scale the canvas. You could also probably modify the constructor to take in another canvas widget instead of an image. This might be the best solution.

In the mainDraw(), you could modify the backContext to add your canvas widget instead of an image.