控制图片缩放移动

废柴小z

于 2022-03-14 20:01:40 发布

阅读量1.8k

点赞数

分类专栏： HTML+CSS Vue 文章标签： javascript 前端 chrome

本文链接：https://blog.csdn.net/qq_34568700/article/details/123486902

版权

Vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS

14 篇文章 0 订阅

订阅专栏

本文介绍如何使用Vue.js创建一个组件，实现图片的鼠标滚轮缩放、双指触控缩放以及单指和双指拖动功能。通过监听mousedown、mousemove、mouseup和touchmove、touchend事件，实现细腻的图片控制体验。

摘要由CSDN通过智能技术生成

鼠标滚轮缩放图片，双指移动缩放图片
鼠标移动拖动图片，单指移动拖动图片

Vue.component('imgControler', {
    props:{
      imgsrc: String
    },
    data: () => {
        return {
            isWin: isWin,
            imgscale: 3,
            imgLeft: 0,
            imgTop: 0,

            mOnDown: false,
            mLastPosition: {x:0,y:0},

            touchFirst: true,
            isTwoTouch: false,
            touchTwoFirst: true,
            touchLastDistance: 0,
            tLastPositon: {x:0,y:0},
        }
    },
    template: `
    <div class="img-c" 
        style='width:100%;height:100%;display:flex;justify-content:center;align-items:center;' 
        @mousedown.prevent='Down' 
        @mousemove.prevent='Move' 
        @mouseup.prevent='Up' 
        @touchmove.prevent='Move' 
        @touchend.prevent='Up'
        >
        <img :src='imgsrc' :style='{transform:"translate(" + imgLeft + "px," + imgTop +  "px)" + " scale(" + imgscale + ")"}'></img>
    </div>
    `,
    methods:{
        Down(e){
            this.mOnDown = true;
            this.mLastPosition.x = e.pageX;
            this.mLastPosition.y = e.pageY;
        },
        Move(e){
            if (isWin) {
                if (this.mOnDown) {
                    let currX = e.pageX,
                    currY = e.pageY;
                    let deltaX = currX - this.mLastPosition.x, deltaY = currY - this.mLastPosition.y;
                    this.imgLeft += deltaX;
                    this.imgTop += deltaY;
                    this.mLastPosition.x = currX;
                    this.mLastPosition.y = currY;
                }       
            } else {
                let touches = e.changedTouches;
                if (touches.length === 1) {
                    if (this.isTwoTouch) {
                        return;
                    }
                    if (this.touchFirst) {
                        this.tLastPositon.x = touches[0].pageX;
                        this.tLastPositon.y = touches[0].pageY;
                        this.touchFirst = false;
                    } else {
                        let deltaX = touches[0].pageX - this.tLastPositon.x;
                        let deltaY = touches[0].pageY - this.tLastPositon.y;
                        this.imgLeft += deltaY;
                        this.imgTop -= deltaX;
                        this.tLastPositon.x = touches[0].pageX;
                        this.tLastPositon.y = touches[0].pageY;
                    }
                } else if (touches.length === 2) {
                    this.isTwoTouch = true;
                    let t1 = { 
                        x: touches[0].pageX,
                        y: touches[0].pageY
                    }, 
                    t2 = {
                        x: touches[1].pageX,
                        y: touches[1].pageY
                    };
                    if (this.touchTwoFirst) {
                        this.touchLastDistance = this.calDistance(t1, t2);
                        this.touchTwoFirst = false;
                    } else {
                        let currDistance = this.calDistance(t1, t2);
                        let factor = 0.1 * (currDistance - this.touchLastDistance);
                        this.setScale(factor);
                        touchLastDistance = currDistance;
                    }
                }
                
            }
                
        },
        calDistance(a, b) {
            return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
        }, 
        Up(e){
            this.mOnDown = false;
            this.touchFirst = true;
            this.touchTwoFirst = true;
            this.isTwoTouch = false;
            Object.assign(this.mLastPosition, {x: 0,y: 0});
            this.touchLastDistance = 0;
        },
        setScale(delta){
            let imgscale = this.imgscale;
            imgscale += delta / 10;
            this.imgscale = imgscale < 0.2 ? 0.2 : (imgscale > 6 ? 6 : imgscale);
        }
    },
    created(){
    },
    mounted(){
        let self = this;
        if (window.addEventListener)//FF,火狐浏览器会识别该方法
        window.addEventListener('DOMMouseScroll', wheel, false);
        window.onmousewheel = document.onmousewheel = wheel;//W3C
        //统一处理滚轮滚动事件
        function wheel(event){
            var delta = 0;
            if (!event) event = window.event;
            if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
                delta = event.wheelDelta/120; 
                if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
            } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
                delta = -event.detail/3;
            }
            if (delta)
                self.setScale(delta);
        }
    },
    updated(){
        // console.log('updated');
    }
})