How to implement zooming with a mouse wheel like it's done in a typical graphic editor

user_682501 0
Viewed 482

Almost every Graphic Editor allows to zoom the image and a "working area background" with a Ctrl + mouse wheel.

zoom + move + scrollbars behavior

The tricky part is that there are many UI elements involved:

  1. "working area background" - that darker area behind the image that is zoomed
  2. scrollbars which are updated correctly and can be used to pan around the working area
  3. actual image (that blue blueprint pattern) - element that visually get's zoomed

Notice that the zooming behavior is different depending on whether the mouse pointer was above the image or not:

  • if it's above the image then image get's zoomed and moved
  • if it's above the "working area background" then the image only get's zoomed and keeps it's position
  • note: scrollbars are updated in both cases!

It seems to be nicely implemented decades ago.

Are there any open-source projects with a similar "zoom + move + scrollbars" behavior to look at their code and learn from it?

Thanks!

mousewheel zooming scroll css javascript
1 Answers

The trigger is called wheel evenent, you can read about it here.

Don't confuse the wheel event with the scroll event. The default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event

An implementation of what you show, would start taking the current position of the mouse position, and use it to enlarge/reduce the container size consequentially. The effect that when you zoom on a particular part of the image is kept "centered" in the screen, is made by continually reposition the image based on the actual scale.

The scrollbars are reacting to the dimensions change 'cause they have a fixed width and height, you can see it because zooming in or out does not change the "editor" dimensions.

user_76290200
Related