Vue2 实现图片的拖拽、缩放、旋转

最新推荐文章于 2024-08-22 21:29:35 发布

Web_boom

最新推荐文章于 2024-08-22 21:29:35 发布

阅读量3.9k

点赞数 3

文章标签： javascript typescript 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/128713466

版权

本文详细介绍了如何在Vue2中实现图片的拖拽、旋转和鼠标滚动缩放功能，包括获取图片实际尺寸、计算显示大小、监听事件处理拖拽和旋转等步骤，并提供了完整代码示例。

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

本文是基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。

效果图

分步骤实现

在这里看下拖拽、旋转、缩放的几个方法

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 并初始化t