Cử chỉ kẹp zoom

<style>
  #target {
    width: 300px;
    height: 300px;
    background: #eee;
    border: 1px solid black;
    transform-origin: center;
  }
</style>

<div id="target">
  <img src="example.jpg" alt="Pinch to zoom" style="width: 100%;" />
</div>

const target = document.getElementById("target");

// Lưu trữ các con trỏ đang hoạt động
const ongoingPointers = new Map();

let initialDistance = null;
let initialScale = 1;
let currentScale = 1;

function getPointerDistance() {
  const pointers = [...ongoingPointers.values()];
  if (pointers.length < 2) return null;
  const [p1, p2] = pointers;
  return Math.sqrt(
    Math.pow(p2.clientX - p1.clientX, 2) + Math.pow(p2.clientY - p1.clientY, 2),
  );
}

target.addEventListener("pointerdown", (ev) => {
  ongoingPointers.set(ev.pointerId, ev);
  target.setPointerCapture(ev.pointerId);
});

target.addEventListener("pointermove", (ev) => {
  ongoingPointers.set(ev.pointerId, ev);

  if (ongoingPointers.size === 2) {
    const distance = getPointerDistance();

    if (initialDistance === null) {
      initialDistance = distance;
      initialScale = currentScale;
    } else {
      currentScale = initialScale * (distance / initialDistance);
      // Giới hạn tỷ lệ zoom từ 0.5x đến 4x
      currentScale = Math.min(Math.max(currentScale, 0.5), 4);
      target.style.transform = `scale(${currentScale})`;
    }
  }
});

target.addEventListener("pointerup", (ev) => {
  ongoingPointers.delete(ev.pointerId);
  if (ongoingPointers.size < 2) {
    initialDistance = null;
  }
});

target.addEventListener("pointercancel", (ev) => {
  ongoingPointers.delete(ev.pointerId);
  initialDistance = null;
});