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

前言

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

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