元素背景图缩放时如何解决缩放中心始终在 0,0 的问题？

关于元素背景图的平移和缩放处理

对于元素的背景图进行平移和缩放变换时，如何解决缩放中心始终在 0,0 的问题，从而使缩放效果符合预期？

解决方案

MyMap AI

使用AI将想法转化为图表

下载

要实现缩放中心任意位置的缩放，可以对缩放操作进行如下处理：

1. 获取鼠标在元素上的相对位置：在缩放开始时记录鼠标相对于元素左上角的相对位置，即鼠标点击的相对坐标。
2. 计算缩放变换的中心位置：缩放中心设置为鼠标点击的相对坐标与缩放比例的乘积。
3. 平移元素背景图：为了将缩放中心移动到指定位置，需要平移元素背景图。计算平移量为缩放中心相对于元素左上角的坐标与缩放比例的差值。
4. 更新变型：将缩放和平移操作应用于元素的背景图，实现以自定义中心为中心的缩放效果。

示例代码

以下代码演示了上述方法的实现：

const box = document.querySelector('.box');
const img = document.querySelector('img');
let isDown = false;
let downx = 0;
let downy = 0;
let position = { x: 0, y: 0 };
let scale = 1;

box.addEventListener('mousewheel', function (event) {
  event.stopPropagation();
  event.preventDefault();
  const rec = img.getBoundingClientRect();
  const x = (event.clientX - rec.x) / scale;
  const y = (event.clientY - rec.y) / scale;
  let delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);

  let ls = scale; // keep last scale
  scale = (delta > 0) ? (scale + 0.2) : (scale - 0.2);
  if (scale > 3 || scale < 0.8) {
    scale = ls;
    return;
  }
  const m = (delta > 0) ? 0.1 : -0.1;
  const x1 = (-x * m * 2) + (img.offsetWidth * m);
  const y1 = (-y * m * 2) + (img.offsetHeight * m);
  position.x += x1;
  position.y += y1;
  updateTransform();
}, { passive: false });

box.addEventListener('mousedown', function (e) {
  isDown = true;
  downx = e.clientX - position.x;
  downy = e.clientY - position.y;
});

document.addEventListener('mousemove', function (e) {
  if (isDown) {
    position.x = e.clientX - downx;
    position.y = e.clientY - downy;
    updateTransform();
  }
});

box.addEventListener('mouseup', function (e) {
  isDown = false;
});

function updateTransform() {
  img.style.transform = `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`;
}