当前位置：首页 > VUE

vue抓手缩放功能实现

2026-02-25 01:25:48VUE

Vue 实现抓手缩放功能

实现抓手（拖拽平移）和缩放功能通常需要结合鼠标事件和 CSS 变换。以下是基于 Vue 3 的实现方法：

基础模板结构

<template>
  <div 
    class="viewport" 
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
    @wheel="onWheel"
  >
    <div 
      class="content" 
      :style="transformStyle"
    >
      <!-- 你的内容在这里 -->
    </div>
  </viewport>
</template>

数据定义

import { ref } from 'vue';

const position = ref({ x: 0, y: 0 });
const scale = ref(1);
const isDragging = ref(false);
const startPos = ref({ x: 0, y: 0 });

计算变换样式

const transformStyle = computed(() => ({
  transform: `translate(${position.value.x}px, ${position.value.y}px) scale(${scale.value})`,
  transformOrigin: '0 0'
}));

拖拽实现

const startDrag = (e) => {
  isDragging.value = true;
  startPos.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y
  };
};

const onDrag = (e) => {
  if (!isDragging.value) return;
  position.value = {
    x: e.clientX - startPos.value.x,
    y: e.clientY - startPos.value.y
  };
};

const endDrag = () => {
  isDragging.value = false;
};

缩放实现

const onWheel = (e) => {
  e.preventDefault();
  const delta = e.deltaY > 0 ? 0.9 : 1.1; // 缩小或放大系数

  // 计算基于鼠标位置的缩放
  const mouseX = e.clientX - position.value.x;
  const mouseY = e.clientY - position.value.y;

  scale.value *= delta;
  position.value.x -= (mouseX * delta - mouseX);
  position.value.y -= (mouseY * delta - mouseY);
};

样式部分

.viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}

.viewport:active {
  cursor: grabbing;
}

.content {
  will-change: transform; /* 优化性能 */
}

进阶功能扩展

限制缩放范围

const MIN_SCALE = 0.1;
const MAX_SCALE = 3;

const onWheel = (e) => {
  // ...原有代码...
  scale.value = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale.value * delta));
};

添加动画效果

.content {
  transition: transform 0.15s ease-out;
}

双击复位

const handleDblClick = () => {
  position.value = { x: 0, y: 0 };
  scale.value = 1;
};

使用第三方库

对于更复杂的需求，可以考虑以下库：

panzoom：专门处理平移缩放
vue-drag-resize：提供可拖拽和缩放的组件
interact.js：强大的交互库

使用panzoom的示例：

vue抓手缩放功能实现

import panzoom from 'panzoom';

onMounted(() => {
  const element = document.querySelector('.content');
  panzoom(element, {
    maxZoom: 3,
    minZoom: 0.5,
    smoothScroll: false
  });
});

以上实现提供了完整的抓手拖拽和缩放功能，可根据实际需求调整参数和扩展功能。