uni-app movable-area 缩放比例

在uni-app中，movable-area组件用于定义可移动区域的边界，而movable-view组件则在该区域内进行移动、缩放等操作。关于缩放比例的控制，我们主要依赖于movable-view组件的scale属性和相关的事件处理。

以下是一个简单的示例，展示了如何在uni-app中实现movable-area内的缩放功能，并控制缩放比例。

示例代码：

<template>
  <view class="container">
    <movable-area class="movable-area">
      <movable-view
        class="movable-view"
        :scale="scale"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
      >
        <image class="image" src="/static/sample.jpg" mode="aspectFill"></image>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scale: 1, // 初始缩放比例
      lastScale: 1, // 上一次的缩放比例
      startX: 0, // 触摸开始时的X坐标
      startY: 0, // 触摸开始时的Y坐标
      lastX: 0, // 上一次的X坐标
      lastY: 0, // 上一次的Y坐标
      isScaling: false, // 是否正在进行缩放操作
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
      this.lastScale = this.scale;
      this.isScaling = false;
    },
    handleTouchMove(e) {
      if (e.touches.length === 2) { // 双指触摸表示缩放
        this.isScaling = true;
        const currentDistance = this.getDistance(e.touches[0], e.touches[1]);
        const startDistance = this.getDistance({ clientX: this.startX, clientY: this.startY }, { clientX: this.lastX, clientY: this.lastY });
        const scaleRatio = currentDistance / startDistance;
        this.scale = this.lastScale * scaleRatio;
        // 限制缩放比例范围，例如1到3之间
        this.scale = Math.min(Math.max(1, this.scale), 3);
      } else {
        this.isScaling = false;
      }
      this.lastX = e.touches[0].clientX;
      this.lastY = e.touches[0].clientY;
    },
    handleTouchEnd() {
      this.lastScale = this.scale;
    },
    getDistance(touch1, touch2) {
      const dx = touch2.clientX - touch1.clientX;
      const dy = touch2.clientY - touch1.clientY;
      return Math.sqrt(dx * dx + dy * dy);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
.movable-area {
  width: 100%;
  height: 100%;
}
.movable-view {
  width: 300px;
  height: 300px;
}
.image {
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，我们使用了双指触摸来触发缩放操作，并通过计算两个触摸点之间的距离变化来计算缩放比例。同时，我们还限制了缩放比例的范围在1到3之间。你可以根据实际需求调整这些参数和行为。