--- theme: channing-cyan highlight: gruvbox-dark --- 本文是基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。 ## 效果图 ![动画.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13484d95d8e040acb5d4fdd675b975a2~tplv-k3u1fbpfcp-watermark.image?) ## 分步骤实现在这里看下拖拽、旋转、缩放的几个方法 ### 1.获取图片的实际宽高 ``` getImgSize(url) { return new Promise((resolve, reject) => { let imgObj = new Image(); imgObj.src = url; imgObj.onload = () => { resolve({ width: imgObj.width, height: imgObj.height, }); }; }); }, ``` ### 2.根据盒子的大小、图片的大小来计算要显示多大的图片 ``` async initImage() { if (!this.imageUrl) { return; } let { width, height } = await this.getImgSize(this.imageUrl); // 设置原始图片的大小 let realWidth = width; let realHeight = height; // 获取高宽比例 const whRatio = realWidth / realHeight; const hwRatio = realHeight / realWidth; //获取盒子的大小 const boxW = this.$refs.maskBox.clientWidth; const boxH = this.$refs.maskBox.clientHeight; if (realWidth >= realHeight) { this.imgH = hwRatio * boxW; const nih = this.imgH; if (nih > boxH) { this.imgH = boxH; this.imgW = whRatio * boxH; } else { this.imgW = boxW; } this.top = (boxH - this.imgH) / 2; this.left = (boxW - this.imgW) / 2; } else { this.imgW = (boxH / realHeight) * realWidth; this.imgH = boxH; this.left = (boxW - this.imgW) / 2; } }, ``` 在这里主要是根据图片的宽高，以及盒子的大小来计算盒子中展示多大的图片，将图片按照比例缩放后展示到盒子中。 ### 3.拖拽图片主要是监听`@mousedown`事件 ``` onmousedownHandle(e) { const that = this; this.$refs.maskBox.onmousemove = function (el) { const ev = el || window.event; // 阻止默认事件 ev.preventDefault(); that.left += ev.movementX; that.top += ev.movementY; }; this.$refs.maskBox.onmouseup = function () { // 鼠标抬起时将操作区域的鼠标按下和抬起事件置为null 并初始化 that.$refs.maskBox.onmousemove = null; that.$refs.maskBox.onmouseup = null; }; if (e.preventDefault) { e.preventDefault(); } else { return false; } }, ``` ### 4. 旋转图片 ``` handleRotate() { this.deg += 90; if (this.deg >= 360) { this.deg = 0; } this.size = 0; this.scale = `scale(1) rotateZ(${this.deg}deg)`; }, ``` ### 5.监听鼠标的滚动，进行缩放图片在 mounted() 中监听鼠标的滚动事件 ``` mounted() { // 兼容火狐浏览器 this.mousewheelevt = /Firefox/i.test(navigator.userAgent)? "DOMMouseScroll" : "mousewheel"; // 为空间区域绑定鼠标滚轮事件 =》处理函数是wheelHandle // 如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多 this.$refs.maskBox.addEventListener(this.mousewheelevt, this.wheelHandle, {passive:true}); }, ``` 处理鼠标的滚动事件 ``` wheelHandle(e) { // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta const ev = e || window.event; // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120) const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta; //滚动的数值 / 2000 => 表示滚动的比例，用此比例作为图片缩放的比例 this.imgScaleHandle(dir / 2000); }, ``` 放大缩小图片 ``` /** * 图片的缩放 * zoom >0 放大 * zoom <0 缩小 */ imgScaleHandle(zoom) { this.size += zoom; if (this.size < -0.5) { this.size = -0.5; } this.scale = `scale(${1 + this.size}) rotateZ(${this.deg}deg)`; }, ``` 页面销毁的时候注意要取消鼠标的监听事件 ``` beforeDestroy() { //取消监听 this.$refs.maskBox.removeEventListener(this.mousewheelevt,this.wheelHandle,{passive:true}); }, ``` 以上就是主要实现功能的方法 ## 完整代码 ``` ``` 最后附上完整的项目代码 [代码仓库地址](https://gitee.com/monkeyLi/picture-scaling)