微信小程序movable-view移动图片和双指缩放

Page({
  data: {
    imageSrc: 'image-url',  // 图片的 URL
    scale: 1,  // 初始缩放比例为1
    x: 0,  // 初始横向偏移量为0
    y: 0,  // 初始纵向偏移量为0
    touchStartTime: 0,
    touchStartX: 0,
    touchStartY: 0,
    minScale: 0.5,  // 图片最小缩放比例
    maxScale: 2,  // 图片最大缩放比例
  },

  handleTouchStart: function (e) {
    if (e.touches.length === 2) {
      // 双指操作，记录初始缩放比例和初始触摸位置
      const touch0 = e.touches[0]
      const touch1 = e.touches[1]
      const distance = Math.sqrt(
        Math.pow(touch1.clientX - touch0.clientX, 2) +
        Math.pow(touch1.clientY - touch0.clientY, 2)
      )
      this.setData({
        startDistance: distance,
        startScale: this.data.scale,
        touchStartTime: Date.now()
      })
    } else if (e.touches.length === 1) {
      // 单指操作，记录初始触摸位置
      this.setData({
        touchStartX: e.touches[0].clientX,
        touchStartY: e.touches[0].clientY,
        touchStartTime: Date.now()
      })
    }
  },

  handleTouchMove: function (e) {
    if (e.touches.length === 2) {
      // 双指操作，计算缩放比例，并更新数据
      const touch0 = e.touches[0]
      const touch1 = e.touches[1]
      const distance = Math.sqrt(
        Math.pow(touch1.clientX - touch0.clientX, 2) +
        Math.pow(touch1.clientY - touch0.clientY, 2)
      )
      const scale = this.data.startScale * (distance / this.data.startDistance)
      this.setData({
        scale: Math.max(this.data.minScale, Math.min(this.data.maxScale, scale))
      })
    } else if (e.touches.length === 1) {
      // 单指操作，计算偏移量，并更新数据
      const diffX = e.touches[0].clientX - this.data.touchStartX
      const diffY = e.touches[0].clientY - this.data.touchStartY
      this.setData({
        x: this.data.x + diffX,
        y: this.data.y + diffY
      })
      this.setData({
        touchStartX: e.touches[0].clientX,
        touchStartY: e.touches[0].clientY
      })
    }
  },

  handleTouchEnd: function () {
    // 清空触摸记录
    this.setData({
      touchStartTime: 0,
      startDistance: 0,
      startScale: 0
    })
  },

  handleScaleChange: function (e) {
    // 处理缩放超出范围的情况
    const scale = e.detail.scale
    if (scale  this.data.maxScale) {
      this.setData({ scale: this.data.maxScale })
    }
  }
})

在上述代码中，movable-view 组件用于包裹图片，并通过绑定相应的事件和数据来实现图片的移动和双指缩放操作。可以根据自己的需求修改和调整代码。

注意，为了使 movable-view 正常工作，需要给 movable-view 的父元素（在示例中是 view.container）设置合适的高度和宽度，并且将父元素的 overflow 样式设置为 hidden，以确保在滑动、缩放时图片不会超出父元素的范围。