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

站长

2024年06月20日 08:17 · 阅读数 21

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

对一个元素进行操作，监听元素上的mousedown、move、up、whell、事件，对背景图进行变换操作，平移没什么问题，缩放的话，他的缩放中心始终在0,0，不能改变他的缩放中心，我想在缩放的同时移动他的background-position来达到类似的效果，但是没什么头绪

1个回答

test

2024-06-20

问题解决

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
    }

    .box {
        width: 600px;
        margin: 50px;
        height: 600px;
        border: 1px solid #000;
        user-select: none;
        color: #fff;
        overflow: hidden;
        position: relative;
    }

    img {
        width: 100%;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }
</style>

<body>
    <div class="box">
        <img src="https://pica.zhimg.com/80/v2-b3fd7b886b18c45a3623b9f13c3372c5_qhd.jpg?source=4e949a73" alt="">
    </div>
    <script>
        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()
        }, { 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)`;
        }
    </script>
</body>

</html>

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容