问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
爱看书的红酒
    37425

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

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

    前端javascript图形学css3html5
    阅读 637
    2 个回答
    得票最新
    头像
    爱看书的红酒
      37425
      ✓ 已被采纳

      问题解决

      <!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>
      头像
      辰早见
        35

        尝试下操作css的transform来实现效果
        可以设置transform-origin来达到类似效果

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题