Implement Zooming in Drawing application
Trying to implement zooming on a canvas in such a way a that the point where the mouse is pointing at pre-zoom and post-zoom stays the same.
Can't figure out why the offset isn't being calculated properly.
I'm trying to adapt the logic gotten from here:
https://youtu.be/ZQ8qtAizis4?si=zLbqZok2fDN5aNe-&t=874
I also found this:
https://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate
The canvas is a Border control which holds an Image control that renders a bitmap. all this is inside a ScrollViewer control and I'm trying to manipulate its offset
javidx9
YouTube
Programming Panning & Zooming
A genuinely practical video today! In this video, I take a look at a really useful technique to easily add panning and zooming to your applications.
Source: https://github.com/OneLoneCoder/Javidx9/blob/master/ConsoleGameEngine/SmallerProjects/OneLoneCoder_PanAndZoom.cpp
https://discord.gg/WhwHUMV
Blog: http://www.onelonecoder.com
Twitter: @jav...
Stack Overflow
Zoom in on a point (using scale and translate)
I want to be able to zoom in on the point under the mouse in an HTML 5 canvas, like zooming on Google Maps. How can I achieve that?
5 Replies
The better solution is to simply move the position of the viewport based on the change in the zoom. The zoom point is simply the point in the old zoom and the new zoom that you want to remain the same. Which is to say the viewport pre-zoomed and the viewport post-zoomed have the same zoompoint relative to the viewport. Given that we're scaling relative to the origin. You can adjust the viewport position accordingly:
have you tried this first?
btw i use different strategy and it may a bit complicated than this one
i didnt use
<Transform> but binding to a view model that containing the scale and the bounding boxI've actually sorted it out mostly
But the issue now is that the ScrollViewer's
Extent doesn't change with respect to the scaling, so the canvas is basically being clipped when I zoom in
Trying to find a way to make it recalculate it's Extent
Since the Border control is being scaled, its dimensions should change and the ScrollViewer should adapter (basically expand/compress) to fit the Border control
Or perhaps I'll have to remove the ScrollViewer and manually do the panning for better control over all this stuff :LETSFUCKINGTHINK:
i use
<Canvas> since it supports absolute (css way) position