uniapp 图片拖动放大缩小

UniApp 提供了一套丰富的组件和交互能力，其中包括实现图片拖动放大缩小的功能。你可以通过`uni-image`组件结合`drag-resize`事件来达成这一效果。以下是一个简单的步骤说明：

1. 首先，在页面上创建一个`uni-image`组件，并设置初始大小和显示图片的路径。

<view class="image-container">
  <uni-image src="{{ imageUrl }}" @load="onImageLoad" @drag-resize="handleDragResize"></uni-image>
</view>

2. 定义对应的JavaScript函数，`onImageLoad`处理图片加载完成后的初始化，`handleDragResize`负责响应拖放和缩放操作。

data() {
  return {
    imageUrl: 'path_to_your_image.jpg',
    initialScale: 1,
    minScale: 0.5,
    maxScale: 2,
  };
}

methods: {
  onImageLoad(e) {
    this.image = e.target;
  },
  
  handleDragResize(e) {
    const { scale } = e.detail;
    // 检查缩放范围
    if (scale < this.minScale) {
      scale = this.minScale;
    } else if (scale > this.maxScale) {
      scale = this.maxScale;
    }
    
    // 设置新的缩放比例
    this.image.style.transform = `scale(${scale})`;
  },
}

当用户开始拖动并缩放图片时，图片将按照用户手势改变大小。记得限制最小和最大缩放比例，以防止过度拉伸。