元素背景图的平移和缩放中心控制
在处理元素背景图的变换时，平移操作并不复杂。然而，当涉及到缩放时，缩放中心始终锁定在 (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) ? 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)`;}
以上就是如何控制元素背景图的缩放中心？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497200.html
微信扫一扫 
支付宝扫一扫 
