echarts滾輪縮放事件_Vue JS滑鼠拖動圖片滾輪縮放圖片

阿新 • • 發佈：2021-01-25

# 滑鼠拖動圖片滾輪縮放圖片（完整程式碼在最後）

預覽：http://junjieyang.gitee.io/blog/#/mouseMoveImg

層級關係主要是：

最外層控制整個區域大小的盒子（mapbox)
中間層用來包裹圖片的table（使用 td 才可以使用百分比控制圖片大小）
最內層圖片本體

<template>
    <div class="mapbox" id="mapbox" :style="'width:'+width+';height:'+height">
        <table class="imgbox" id="imgbox" @mousedown="holdDown" @mouseup="holdUp" :style="'top: '+imgtop+'px;left: '+imgleft+'px;'" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
            <tr>
                <td>
                    <img id="backgroundImg" draggable="false" :style="'height: '+imgheight+'%;'" src="@/assets/mapbackground.png" />
                </td>
            </tr>
        </table>
    </div>
</template>

最外層開啟相對定位，中間層使用絕對定位。通過對絕對定位的Top Left的加減，實現拖動

props: {
        //圖片路徑
        img: {
            type: String,
            default: "",
        },
        //盒子的寬
        width: {
            type: String,
            default: "100%",
        },
        //盒子的高
        height: {
            type: String,
            default: "100%",
        },
    },
    data() {
        return {
            imgtop: 0, //圖片距離左邊的距離
            imgleft: 0, //圖片距離上邊的距離
            imgheight: 100, //圖片高度百分比
            DownUp: false, //用來判斷滑鼠是否長按
        };
    },

實現的方法，具體介紹請看註釋

mounted() {
        document.onmousemove = this.mouseMove;
        //等待圖片載入
        setTimeout((e) => {
            this.getbackgroundImgWidth();
        }, 500);
    },
    beforeDestroy() {
        document.onmousemove = null;
    },
    methods: {
        //滑鼠按下
        holdDown() {
            this.DownUp = true;
        },
        //滑鼠鬆開
        holdUp() {
            this.DownUp = false;
        },
        //ev：滑鼠物件，id：盒子的id 判斷滑鼠是否在盒子內
        inBoxIsoutbox(id, ev = event || window.event) {
            let map = document.getElementById(id);
            if (
                this.mousePosition(ev).x > map.offsetLeft + map.offsetWidth ||
                this.mousePosition(ev).x < map.offsetLeft ||
                this.mousePosition(ev).y > map.offsetTop + map.offsetHeight ||
                this.mousePosition(ev).y < map.offsetTop
            ) {
                return false;
            } else {
                return true;
            }
        },
        //相容後，返回X，Y
        mousePosition(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x:
                    ev.clientX +
                    document.body.scrollLeft -
                    document.body.clientLeft,
                y:
                    ev.clientY +
                    document.body.scrollTop -
                    document.body.clientTop,
            };
        },
        // 滑鼠移動觸發該方法
        mouseMove(ev) {
            ev = ev || window.event;
            if (this.inBoxIsoutbox("mapbox", ev)) {
                // 滑鼠在盒子內
                this.runWheel(true);
            } else {
                // 滑鼠在盒子外
                this.runWheel(false);
                this.holdUp();
            }
            if (this.DownUp) {
                // 滑鼠長按時改變圖片位置
                this.imgtop = this.imgtop + ev.movementY;
                this.imgleft = this.imgleft + ev.movementX;
            }
        },
        // 開啟監聽滑鼠滑輪
        runWheel(isWheel) {
            //判斷依據是 是否在盒子內部
            //true 就是開啟
            if (isWheel) {
                document.documentElement.style.overflow = "hidden";
                //相容性寫法，該函式也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了
                //判斷滑鼠滾輪滾動方向
                if (window.addEventListener) {
                    //FF,火狐瀏覽器會識別該方法
                    window.addEventListener(
                        "DOMMouseScroll",
                        this.wheel,
                        false
                    );
                }
                window.onmousewheel = document.onmousewheel = this.wheel; //W3C
            } else {
                //false就是關閉
                document.documentElement.style.overflow = "";
                if (window.addEventListener) {
                    //FF,火狐瀏覽器會識別該方法
                    window.addEventListener("DOMMouseScroll", null, false);
                }
                window.onmousewheel = document.onmousewheel = null; //W3C
            }
        },
        //統一處理滾輪滾動事件，中介軟體
        wheel(event) {
            let 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) this.handle(delta);
        },
        //上下滾動時的具體處理函式
        handle(delta) {
            if (delta < 0) {
                //向下滾動
                if (this.imgheight > 10) {
                    this.imgheight = this.imgheight - 1;
                }
            } else {
                //向上滾動
                if (this.imgheight < 500) {
                    this.imgheight = this.imgheight + 1;
                }
            }
        },
        //獲取背景圖片的寬度或高度，和實際距離相除得到 係數distanceCoefficient
        getbackgroundImgWidth() {
            if (this.actualDistanceWidth !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.width / this.actualDistanceWidth;
            } else if (this.actualDistanceHeight !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.height / this.actualDistanceWidth;
            }
        },

完整程式碼

<template>
    <div class="mapbox" id="mapbox" :style="'width:'+width+';height:'+height">
        <table class="imgbox" id="imgbox" @mousedown="holdDown" @mouseup="holdUp" :style="'top: '+imgtop+'px;left: '+imgleft+'px;'" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
            <tr>
                <td>
                    <img id="backgroundImg" draggable="false" :style="'height: '+imgheight+'%;'" src="@/assets/mapbackground.png" />
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    props: {
        //圖片路徑
        img: {
            type: String,
            default: "",
        },
        //盒子的寬
        width: {
            type: String,
            default: "100%",
        },
        //盒子的高
        height: {
            type: String,
            default: "100%",
        },
    },
    data() {
        return {
            imgtop: 0, //圖片距離左邊的距離
            imgleft: 0, //圖片距離上邊的距離
            imgheight: 100, //圖片高度百分比
            DownUp: false, //用來判斷滑鼠是否長按
        };
    },
    mounted() {
        document.onmousemove = this.mouseMove;
        //等待圖片載入
        setTimeout((e) => {
            this.getbackgroundImgWidth();
        }, 500);
    },
    beforeDestroy() {
        document.onmousemove = null;
    },
    methods: {
        //滑鼠按下
        holdDown() {
            this.DownUp = true;
        },
        //滑鼠鬆開
        holdUp() {
            this.DownUp = false;
        },
        //ev：滑鼠物件，id：盒子的id 判斷滑鼠是否在盒子內
        inBoxIsoutbox(id, ev = event || window.event) {
            let map = document.getElementById(id);
            if (
                this.mousePosition(ev).x > map.offsetLeft + map.offsetWidth ||
                this.mousePosition(ev).x < map.offsetLeft ||
                this.mousePosition(ev).y > map.offsetTop + map.offsetHeight ||
                this.mousePosition(ev).y < map.offsetTop
            ) {
                return false;
            } else {
                return true;
            }
        },
        //相容後，返回X，Y
        mousePosition(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x:
                    ev.clientX +
                    document.body.scrollLeft -
                    document.body.clientLeft,
                y:
                    ev.clientY +
                    document.body.scrollTop -
                    document.body.clientTop,
            };
        },
        // 滑鼠移動觸發該方法
        mouseMove(ev) {
            ev = ev || window.event;
            if (this.inBoxIsoutbox("mapbox", ev)) {
                // 滑鼠在盒子內
                this.runWheel(true);
            } else {
                // 滑鼠在盒子外
                this.runWheel(false);
                this.holdUp();
            }
            if (this.DownUp) {
                // 滑鼠長按時改變圖片位置
                this.imgtop = this.imgtop + ev.movementY;
                this.imgleft = this.imgleft + ev.movementX;
            }
        },
        // 開啟監聽滑鼠滑輪
        runWheel(isWheel) {
            //判斷依據是 是否在盒子內部
            //true 就是開啟
            if (isWheel) {
                document.documentElement.style.overflow = "hidden";
                //相容性寫法，該函式也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了
                //判斷滑鼠滾輪滾動方向
                if (window.addEventListener) {
                    //FF,火狐瀏覽器會識別該方法
                    window.addEventListener(
                        "DOMMouseScroll",
                        this.wheel,
                        false
                    );
                }
                window.onmousewheel = document.onmousewheel = this.wheel; //W3C
            } else {
                //false就是關閉
                document.documentElement.style.overflow = "";
                if (window.addEventListener) {
                    //FF,火狐瀏覽器會識別該方法
                    window.addEventListener("DOMMouseScroll", null, false);
                }
                window.onmousewheel = document.onmousewheel = null; //W3C
            }
        },
        //統一處理滾輪滾動事件，中介軟體
        wheel(event) {
            let 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) this.handle(delta);
        },
        //上下滾動時的具體處理函式
        handle(delta) {
            if (delta < 0) {
                //向下滾動
                if (this.imgheight > 10) {
                    this.imgheight = this.imgheight - 1;
                }
            } else {
                //向上滾動
                if (this.imgheight < 500) {
                    this.imgheight = this.imgheight + 1;
                }
            }
        },
        //獲取背景圖片的寬度或高度，和實際距離相除得到 係數distanceCoefficient
        getbackgroundImgWidth() {
            if (this.actualDistanceWidth !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.width / this.actualDistanceWidth;
            } else if (this.actualDistanceHeight !== 0) {
                let backgroundImg = document.getElementById("backgroundImg");
                this.distanceCoefficient =
                    backgroundImg.height / this.actualDistanceWidth;
            }
        },
    },
};
</script>
<style scoped>
.mapbox {
    overflow: hidden;
    position: relative;
    text-align: center;
}
.imgbox {
    position: absolute;
}
.imgbox img {
    cursor: pointer;
}
</style>