JS实现点击图片放大缩小及拖拽功能

本文使用vue创建一个可拖拽和缩放的图片查看器组件,该组件不仅可以展示图片,还支持用户通过鼠标拖动和缩放来查看细节,本文将介绍如何封装一个简单的图片拖拽与缩放组件,感兴趣的小伙伴跟着小编一起来看看吧

前言

本文使用 vue创建一个可拖拽和缩放的图片查看器组件，该组件不仅可以展示图片，还支持用户通过鼠标拖动和缩放来查看细节。本文将介绍如何封装一个简单的图片拖拽与缩放组件。

先看效果图：

组件功能概述

本组件具备以下功能：

显示图片支持鼠标拖动以调整图片位置支持鼠标滚轮缩放图片自动居中图片

代码实现

下面是组件的完整代码，包括模板、js和样式部分。

1. 模板部分

<template>  <div style="height: 90vh;">    <div      class="image-container"      @mousedown="startDrag"      @mouseup="stopDrag"      @mousemove="drag"      @wheel="handleWheel"    >      <img        :src="imgSrc"        :style="{ transform: `scale(${scale})`, cursor: isDragging ? 'grabbing' : 'grab' }"        ref="image"      />      <!-- @click="toggleZoom"  点击放大-->    </div>  </div></template>

在模板中，我们定义了一个包含图片的容器。通过绑定鼠标事件，我们可以实现拖拽和缩放的功能。

2. js部分

<script>import testImg from './testImg.jpeg'; // 导入图片 export default {  name: 'ImageView',  props: {    // 图片路径    imgSrc: {      type: String,      default: () => testImg, // 没有传值时使用默认图片    }  },  data () {    return {      scale: 1, // 初始缩放比例      isDragging: false, // 是否正在拖拽      lastMouseX: 0, // 上一次鼠标 X 坐标      lastMouseY: 0, // 上一次鼠标 Y 坐标      offsetX: 0, // 图片相对容器的 X 偏移量      offsetY: 0, // 图片相对容器的 Y 偏移量      imageWidth: 0, // 图片实际宽度      imageHeight: 0, // 图片实际高度    };  },  mounted () {    const img = this.$refs.image; // 获取图片元素    this.imageWidth = img.naturalWidth; // 获取图片的实际宽度    this.imageHeight = img.naturalHeight; // 获取图片的实际高度    this.centerImage(); // 初始化时居中图片  },  methods: {    // 居中图片的方法    centerImage () {      const container = this.$el.querySelector('.image-container'); // 获取容器      const containerWidth = container.clientWidth; // 容器宽度      const containerHeight = container.clientHeight; // 容器高度       // 计算居中后的 X 和 Y 偏移量      const centeredX = (containerWidth - this.imageWidth * this.scale) / 2;      const centeredY = (containerHeight - this.imageHeight * this.scale) / 2;       this.offsetX = centeredX; // 更新 X 偏移量      this.offsetY = centeredY; // 更新 Y 偏移量       // 设置图片的新位置      this.$refs.image.style.left = `${centeredX}px`;      this.$refs.image.style.top = `${centeredY}px`;    },     // 点击图片时切换缩放    toggleZoom () {      this.scale = this.scale === 1 ? 2 : 1; // 点击图片时切换缩放比例    },     // 鼠标按下事件    startDrag (event) {      this.isDragging = true; // 标记为正在拖拽      this.lastMouseX = event.clientX; // 记录当前鼠标 X 坐标      this.lastMouseY = event.clientY; // 记录当前鼠标 Y 坐标      this.offsetX = this.$refs.image.offsetLeft; // 记录当前左偏移      this.offsetY = this.$refs.image.offsetTop; // 记录当前上偏移    },     // 鼠标抬起事件    stopDrag () {      this.isDragging = false; // 停止拖拽    },     // 鼠标移动事件    drag (event) {      if (this.isDragging) { // 如果正在拖拽        const dx = event.clientX - this.lastMouseX; // 计算 X 轴移动距离        const dy = event.clientY - this.lastMouseY; // 计算 Y 轴移动距离        const newLeft = this.offsetX + dx; // 计算新的左偏移        const newTop = this.offsetY + dy; // 计算新的上偏移         // 更新图片的位置        this.$refs.image.style.left = `${newLeft}px`; // 设置新的左偏移        this.$refs.image.style.top = `${newTop}px`; // 设置新的上偏移      }    },     // 鼠标滚轮事件处理缩放    handleWheel (event) {      event.preventDefault(); // 阻止默认的滚动行为      const scaleChange = event.deltaY > 0 ? 0.1 : -0.1; // 根据滚动方向调整缩放      this.scale = Math.max(0.2, this.scale + scaleChange); // 限制最小缩放比例为 0.2    },  },};</script>

在js部分，我们使用 Vue 的数据和方法来实现组件的核心功能。通过事件处理函数，我们管理图片的缩放和拖拽逻辑。

3. 样式部分

<style scoped>.image-container {  position: relative; /* 使容器相对定位 */  overflow: hidden; /* 防止内容超出边界 */  cursor: grab; /* 默认光标样式 */  width: 100%; /* 容器宽度 */  height: 100%; /* 容器高度 */} img {  position: absolute; /* 使得 img 可以被拖拽 */  transition: transform 0.3s; /* 平滑的缩放效果 */}</style>

样式部分确保了图片容器的正确显示，以及在缩放时的平滑过渡效果。