Zoom-in zoom-out a sticky point in canvas

Dung Nguyen Thi Thuy — Mon, 24 Jun 2024 14:45:15 +0000

Zoom-in zoom-out with stick point is a regular use case we meet on design or builder tools such as Figma. In this blog, I will present a basic algorithm to handle it by javascript, HTML and CSS.

Demo

Demonstration

Code step-by-step

1. Create a container and a scalable item

<div id="app">
      <div class="parent">
        <div class="scalable-child"></div>
      </div>
</div>

.scalable-child {
  width: 300px;
  height: 300px;
  position: relative;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: left top;
  background-image: url('https://cdn4.vectorstock.com/i/1000x1000/17/58/caro-pattern-background-vector-2261758.jpg');
  background-size: contain;
}
.parent {
  position: relative;
  background-color: white;
  width: 100vw;
  height: 100vh;
}

In this example, I use an div as a scalable item with class “scalable-child” and its container is a div with class “parent”.
Please note for some properties:

Top, left: 0 is the default position
Pointer-event: none, because we will add event to parent, if pointer-event !== none the algorithm will be failed.
Transform-origin: left top, that makes coordinate origin to calculate the position

2. Add wheel event listener

const parent = document.querySelector('.parent');
const child = document.querySelector('.scalable-child');

parent.addEventListener('wheel', wheelEventHandler, {
  passive: false,
  capture: true,
});

We will use WheelEvent to handle zoom-in, zoom-out, and moving child

Note: this example demonstrates only for the trackpad. You need to handle events for hotkeys such as (Ctrl +, Ctr -) or mouse as well.

let left = 0;
let top = 0;
let scale = 1;

const wheelEventHandler = (e) => {
  e.preventDefault();
  // Handle zoom with touch pad and hot key.
  const isZooming = e.ctrlKey || e.metaKey;
  let newValues = {};
  if (isZooming) {
    newValues = calculateOnZooming(e, scale, left, top);
  } else {
    newValues = calculateOnMoving(e, scale, left, top);
  }

  left = newValues.newLeft;
  top = newValues.newTop;
  scale = newValues.newScale;

  Object.assign(child.style, {
    transform: `scale(${scale})`,
    left: `${left}px`,
    top: `${top}px`,
  });
};

Firstly, we have isZooming variable to check if zooming or moving the child element.

Then we calculate the new position and scale for the child element. Left, top, and scale are being used as temperate variables.

And it’s time to focus the algorithm on 2 calculate functions:

3. Calculate on Zooming

const calculateOnZooming = (e, oldScale, oldLeft, oldTop) => {
  let newScale = oldScale - e.deltaY * oldScale * 0.01;
  newScale = Math.max(newScale, 0.1);
  const newLeft = oldLeft - (e.offsetX - oldLeft) * (newScale / scale - 1);
  const newTop = oldTop - (e.offsetY - oldTop) * (newScale / scale - 1);
  return {
    newScale,
    newLeft,
    newTop,
  };
};

On zooming, wheelEvent will return the deltaY as a scale ratio and we can use it to calculate newScale

deltaY > 0 => zoom-out
deltaY < 0 => zoom-in
The detalScale = e.deltaY * oldScale * 0.01 to control scaling speed

Let’s see the below image to more understand how to calculate the newLeft and newTop variables:

Start zooming-in child when mouse is in A point. At that time, we can get some values:

e.offsetX: distance between mouse to parent’s left edge
e.offsetY: distance between mouse to parent’s top edge
left: current child’s left style value
top: current child’s top style value

Child is scaled from scale ratio to scale’ ratio, and point A go to A’.
So to make A point sticky (with parent), we need to calculate deltaX and deltaY then move child revert with exactly px.

detalX = x’ - x
= x * (scale’ / scale) - x
= x * (scale’ / scale - 1)
= (e.offsetX - left) * (scale’ / scale - 1)

detalY = y’ - y
= y * (scale’ / scale) - y
= y * (scale’ / scale - 1)
= (e.offsetY - top) * (scale’ / scale - 1)

newLeft = left - detalX
newTop = top - detalY

4. Calculate on Moving

const calculateOnMoving = (e, oldScale, oldLeft, oldTop) => {
  return {
    newLeft: oldLeft - e.deltaX * 2,
    newTop: oldTop - e.deltaY * 2,
    newScale: oldScale,
  };
};

On moving event, we need to calculate only newLeft and newTop values. And we *2 each delta value to increase speed as well.

That’s all we need to handle. I hope it’s helpful. Thank you for watching!
You can view the full source code here.

DEV Community: Dung Nguyen Thi Thuy

Zoom-in zoom-out a sticky point in canvas

Demo

Code step-by-step