如何控制元素背景图的缩放中心？-js教程-PHP中文网

如何控制元素背景图的缩放中心？

霞舞

发布： 2024-11-12 12:06:12

原创

854人浏览过

如何控制元素背景图的缩放中心？

元素背景图的平移和缩放中心控制

在处理元素背景图的变换时，平移操作并不复杂。然而，当涉及到缩放时，缩放中心始终锁定在 (0, 0)，这会限制我们对缩放的效果控制。本文将提供一种解决方案，通过移动背景图的位置 (background-position)，在缩放的同时动态调整缩放中心。

问题解决

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

为了实现这一目标，我们使用 javascript 事件侦听器来监听鼠标的 mousedown、mousemove、mouseup 和 mousewheel 事件。当缩放时，我们计算当前缩放中心相对背景图的位置。然后，我们可以通过移动背景图的位置来抵消缩放操作对缩放中心的影响，从而达到动态调整缩放中心的的效果。

以下是具体的代码示例：

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

登录后复制

以上就是如何控制元素背景图的缩放中心？的详细内容，更多请关注php中文网其它相关文章！