5

I have an <img> that is zoomed upon mousewheel scrolling, by adjusting transform: scale(). I want the zooming to be like in Google Maps, where you zoom to where the mouse cursor is, not to the center of the image. I'd like to not use canvas though, just for the learning experience (that's also why the other questions I found did not really help).

I set up a JSFiddle to demonstrate the problem. My thought process was as follows: when zooming in by 10%, the image expands in all directions, from the center of the image, by 10%. That means that e.g., the left and right edge will travel 5% of the original width in each direction. I therefore tried to solve the problem like so:

  1. Calculate mouse offset from image center
  2. Calculate new image offset (top and left) by multiplying mouse offset with zoom factor and divide by two
  3. Apply offset and watch it all blow up it my face with the power of a million burning suns

It seems that I just can't find a formula or algorithm that fits.

0

2 Answers 2

12

Eventually I figured it out myself, although only by looking at existing solutions. Here is the JSFiddle that contains only the essentials.

The idea is to first set transform-origin: 0 0. This makes sure that, upon zooming, the image expands down and right, instead of distributing the increase in width over all four sides. Note that it does not reposition the image, it just changes the origin for all transformations.

Additionally, this JSFiddle assumes that the top and left margins of the image are aligned with the top and left margins of the container element. If the image should be repositioned before zooming occurs, this should be done through transform: translate() and the translateX and translateY values need to be updated accordingly.

The heart of the logic is this:

  // Track the percentage change between the old
  // and the new scale of the image
  const ratio = 1 - nextScale / currentScale

  // get the current mouse offset
  const {
    clientX,
    clientY
  } = event

  // The += here is extremely important!
  // The new 2D translation values are derived from the difference
  // between mouse cursor position and current (!) 2D translation.
  // So where is the mouse cursor relative to the translated image
  // This difference is then adjusted by the % change of the scaling
  translateX += (clientX - translateX) * ratio
  translateY += (clientY - translateY) * ratio

  /*
  This would work for the first wheel scroll. But afterwards, the 
  image will not be translated enough to offset the zooming because 
  we're not taking into account the existing translation
  translateX += (clientX - translateX) * ratio
  translateY += (clientY - translateY) * ratio
  */

So to summarize the required steps:

  1. Calculate the next scale
  2. Calculate the current mouse offset relative to the translated image
  3. Adjust the mouse offset for the change in scaling, e.g., const percentChange = 1 - nextScale / currentScale
  4. Add the adjusted mouse offset to the existing values for translate()
  5. Apply the transformation (scaling and the translation)

The linked JSFiddle also includes Lodash and transition: transform 330ms ease-in-out; to make the scrolling a little smoother and not affect browser performance too much.

5
  • 1
    ATTENTION: In the JSFiddle, mousewheel is used and now deprecated. Please use wheel as eventListener instead.
    – user11484628
    Commented Jul 10, 2021 at 8:21
  • 1
    Zooming out in the JSFiddle doesn't work. Instead it scrolls down.
    – user11484628
    Commented Jul 10, 2021 at 8:25
  • Thanks for the comments @LukoFoks I updated the JSFiddle (or rather saved a new one) which fixes the issues. Works for me on Firefox and Safari.
    – Vey
    Commented Jul 11, 2021 at 11:46
  • I'm glad you updated your snippet; however, it has a strange behavior now. Zooming out is not working at all and it is very sensitive. On a single scroll it zooms by about 200%. Tested in Firefox Developer Edition and Microsoft Edge.
    – user11484628
    Commented Jul 11, 2021 at 14:03
  • Zooming out works for me in Firefox Developer Edition. I'm on a track pad. The sensitivity is a bit off, true. I'll have to look into smoothing this out a bit
    – Vey
    Commented Jul 11, 2021 at 20:41
0

You could use transform-origin : <position of your mouse pointer> :

  • transform-origin : 0% 0% points on the top left corner.
  • transform-origin : 100% 100% points on the bottom right corner.

Here's an example I made : https://jsfiddle.net/zez538L8/4/

The javaScript :

var currentzoom = 1;

function zoom(delta, e) {
   var img = document.getElementById("test");
   var width = img.offsetWidth; //calculating the size of the img (in px)
   var height = img.offsetHeight;
   var x = event.offsetX; //calculating the position of the mouse pointer on the picture (in px)
   var y = event.offsetY; 
   var xpercent = x*100/width; //calculating the position of the mouse pointer on the picture (in %)
   var ypercent = y*100/height;
   img.style.transform = "scale("+currentzoom+")"; //scaling the picture
   img.style.transformOrigin = xpercent + "% "+ ypercent +"%"; //transform-origin
   currentzoom += delta;
}
2
  • 1
    This only works for the initial zoom. If you zoom in on one spot and then point the mouse at something else and zoom in, it breaks. Feels a bit like the problem I've had too.
    – Vey
    Commented May 24, 2017 at 15:27
  • @Vey any luck in solving that glitch?
    –  deLiz
    Commented Jul 4, 2023 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.