uniapp双指缩放事件如何实现

在uniapp中如何实现双指缩放功能？我尝试了touchstart和touchmove事件，但无法准确获取双指距离变化。请问有没有完整的代码示例或解决方案？需要支持动态调整元素大小或图片缩放效果。

2 回复

在uni-app中，使用@touchstart和@touchmove监听双指触摸事件。计算两指距离变化，通过transform: scale()实现缩放。注意使用preventDefault()阻止默认行为。


在 UniApp 中实现双指缩放事件，可以通过监听 @touchstart、@touchmove 和 @touchend 事件，计算两指间的距离变化来实现缩放效果。以下是实现步骤和示例代码：

实现步骤

  1. 监听触摸事件：在需要缩放的元素上绑定 @touchstart、@touchmove 和 @touchend 事件。
  2. 记录初始距离：在 touchstart 事件中，记录两指的初始距离。
  3. 计算缩放比例：在 touchmove 事件中，实时计算两指当前距离与初始距离的比值，作为缩放比例。
  4. 应用缩放：将计算出的缩放比例应用到目标元素（例如通过 transform: scale()）。

示例代码

<template>
  <view 
    class="zoom-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <!-- 需要缩放的内容 -->
    <image :style="{ transform: `scale(${scale})` }" src="/static/example.jpg"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1, // 初始缩放比例
      startDistance: 0, // 初始两指距离
      isScaling: false // 是否正在缩放
    };
  },
  methods: {
    // 计算两点间距离
    getDistance(touches) {
      const dx = touches[0].clientX - touches[1].clientX;
      const dy = touches[0].clientY - touches[1].clientY;
      return Math.sqrt(dx * dx + dy * dy);
    },
    
    handleTouchStart(e) {
      if (e.touches.length >= 2) {
        this.startDistance = this.getDistance(e.touches);
        this.isScaling = true;
      }
    },
    
    handleTouchMove(e) {
      if (!this.isScaling || e.touches.length < 2) return;
      
      const currentDistance = this.getDistance(e.touches);
      // 计算缩放比例，限制在 0.5 到 3 倍之间
      this.scale = Math.max(0.5, Math.min(3, this.scale * (currentDistance / this.startDistance)));
      this.startDistance = currentDistance; // 更新初始距离
    },
    
    handleTouchEnd() {
      this.isScaling = false;
    }
  }
};
</script>

<style>
.zoom-container {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

注意事项

  • 性能优化：频繁计算可能影响性能，可考虑使用节流（throttle）减少计算次数。
  • 边界限制：通过 Math.max 和 Math.min 限制缩放范围，避免过度缩放。
  • 兼容性：在真机测试，确保触摸事件响应正常。

以上代码实现了基本的双指缩放功能，可根据实际需求调整缩放范围或添加动画效果。

回到顶部