Advanced Zoom with paperjs

[Márta Károlyi]

Hi all,

I'm struggling with doing advanced zoom on the canvas which is inside a container.

I've read this article from Matthias Berth : http://matthiasberth.com/tech/stable-zoom-and-pan-in-paperjs, and would like to do something similar to the Stable Zoom section, but in his example there is no container, while I would like to do the same, but the canvas size would also change inside the container.

When zooming, the part of the circle under the mouse position should remain in the same position, but is is not doing that.

My fiddle is:

https://jsfiddle.net/martas/q0dgd0ka/

If someone could help me out, that would be really appreciated.

Thanks,

Marta

[Simone Mazzoni]

Hello Marta, 

I just had a quick look at your code, and I noticed that you scale also the canvas width and height together with the view zoom.

Why you do this? It look to me that changing the canvas dimensions messed everything up.

Fix the canvas dimension instead and work only on the view zoom.

Something like THIS

[Márta Károlyi]

Hi Simone,

Thanks for the quick response. I changed the canvas size because at starting my drawing application, users can select a "paper size". When they zoom out, I would like to show the boundaries of the paper too, but it seems to be too complicated, so probably I will set up a " big enough" paper by default, and then will leave out this whole canvas resize thing.

Regards,

Marta

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/zwjQ-NI6J90/unsubscribe.
To unsubscribe from this group and all its topics, send an email to paperjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.