vue实现镜头变焦

Vue实现镜头变焦效果

实现镜头变焦效果可以通过CSS动画和Vue的事件绑定结合完成。以下是一个基于Vue 3的示例方案：

基础实现方案

模板部分

<template>
  <div class="zoom-container">
    <img 
      ref="zoomImage"
      :src="imageSrc"
      :style="{ transform: `scale(${zoomLevel})` }"
      @click="handleZoom"
    />
  </div>
</template>

脚本部分

<script setup>
import { ref } from 'vue';

const zoomLevel = ref(1);
const imageSrc = ref('your-image-path.jpg');

const handleZoom = () => {
  zoomLevel.value = zoomLevel.value === 1 ? 2 : 1;
};
</script>

样式部分

<style scoped>
.zoom-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

img {
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
</style>

平滑缩放动画

要实现更平滑的动画效果，可以修改CSS过渡属性：

img {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-origin: center center;
}

多级缩放控制

对于多级缩放控制，可以使用数组存储预设的缩放级别：

const zoomLevels = [1, 1.5, 2, 2.5];
let currentLevel = 0;

const handleZoom = () => {
  currentLevel = (currentLevel + 1) % zoomLevels.length;
  zoomLevel.value = zoomLevels[currentLevel];
};

鼠标滚轮缩放

添加鼠标滚轮事件监听实现更精细的控制：

import { onMounted, onUnmounted } from 'vue';

const zoomStep = 0.1;

const handleWheel = (e) => {
  e.preventDefault();
  zoomLevel.value += e.deltaY > 0 ? -zoomStep : zoomStep;
  zoomLevel.value = Math.max(0.1, Math.min(zoomLevel.value, 5));
};

onMounted(() => {
  const img = document.querySelector('.zoom-container img');
  img.addEventListener('wheel', handleWheel);
});

onUnmounted(() => {
  const img = document.querySelector('.zoom-container img');
  img.removeEventListener('wheel', handleWheel);
});

触摸屏支持

针对移动设备添加双指缩放手势：

let initialDistance = 0;

const handleTouchStart = (e) => {
  if (e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
  }
};

const handleTouchMove = (e) => {
  if (e.touches.length === 2) {
    const currentDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
    const scale = currentDistance / initialDistance;
    zoomLevel.value = Math.max(0.1, Math.min(scale * zoomLevel.value, 5));
    initialDistance = currentDistance;
  }
};

性能优化

对于大尺寸图像，考虑使用will-change属性优化性能：

img {
  will-change: transform;
}

边界限制

添加边界限制防止图像过度缩放后消失：

const clampZoom = (value) => {
  return Math.max(0.1, Math.min(value, 5));
};

以上方案可以根据实际需求组合使用，实现从简单到复杂的各种镜头变焦效果。