JS点击图片放大缩小及拖拽

原创已于 2024-11-05 09:52:12 修改 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-11-04 16:49:48 首次发布

前言：

本文使用 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>

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