CODEWITHSUNDEEP
javagwt
Priyank
Priyank

Reputation: 1174

GWT: Zoom in and zoom out canvas drawing

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

Upvotes: 3

Views: 800

Answers (1)

Chris Hinshaw
Chris Hinshaw

Reputation: 7255

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.

Upvotes: 3

Related Questions