如何实现元素背景图的平移和缩放，并改变缩放中心？

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

在对元素背景图进行平移和缩放时，可能会遇到缩放中心始终在 0,0 的问题，无法改变其缩放中心。

为了解决这个问题，可以在缩放的同时移动背景图片的位置，达到类似的效果。

Peachly AI

Peachly AI是一个一体化的AI广告解决方案，帮助企业创建、定位和优化他们的广告活动。

下载

具体实现步骤如下：

1. 获取元素边界框大小。
2. 监听滚轮事件，获取事件的鼠标位置和缩放比例变化。
3. 计算图片缩放后，缩放中心位置的偏移量。
4. 将缩放后的比例和偏移量应用到图片的 transform 属性中。

代码示例：

let box = document.querySelector('.box');
let 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();
  let rec = img.getBoundingClientRect();
  let x = (event.clientX - rec.x) / scale;
  let 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;
  }

  let m = (delta > 0) ? 0.1 : -0.1;
  let x1 = (-x * m * 2) + (img.offsetWidth * m);
  let y1 = (-y * m * 2) + (img.offsetHeight * m);
  position.x += x1;
  position.y += y1;

  updateTransform();
});

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)`;
}