微信小程序实现图片的双指缩放

要实现微信小程序中图片的双指缩放，可以使用小程序自带的 `<canvas>` 组件。具体步骤如下：

1. 在 WXML 文件中添加 `<canvas>` 组件，并设置宽高和 ID：

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在 JS 文件中获取 `<canvas>` 组件的上下文，并加载图片：

const ctx = wx.createCanvasContext('myCanvas');
const img = new Image();
img.src = '图片地址';
img.onload = function () {
  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
}

3. 监听 `<canvas>` 组件的 touch 事件，实现双指缩放：

let distance = 0; // 初始距离
let scale = 1; // 初始缩放比例

wx.createSelectorQuery().select('#myCanvas').fields({
  node: true,
  size: true,
}).exec((res) => {
  const canvas = res[0].node; // 获取 canvas 节点
  const canvasWidth = res[0].width; // 获取 canvas 宽度
  const canvasHeight = res[0].height; // 获取 canvas 高度
  
  canvas.addEventListener('touchstart', (e) => {
    if (e.touches.length >= 2) {
      const x1 = e.touches[0].clientX;
      const y1 = e.touches[0].clientY;
      const x2 = e.touches[1].clientX;
      const y2 = e.touches[1].clientY;
      distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算初始距离
    }
  });

  canvas.addEventListener('touchmove', (e) => {
    if (e.touches.length >= 2) {
      const x1 = e.touches[0].clientX;
      const y1 = e.touches[0].clientY;
      const x2 = e.touches[1].clientX;
      const y2 = e.touches[1].clientY;
      const newDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算新距离
      const delta = newDistance - distance; // 计算距离差
      scale += delta / 100; // 根据距离差更新缩放比例
      distance = newDistance; // 更新距离
      ctx.drawImage(img, 0, 0, canvasWidth * scale, canvasHeight * scale); // 根据新的缩放比例绘制图片
      ctx.draw();
    }
  });
});

在 touchstart 事件中记录双指触摸的初始距离，然后在 touchmove 事件中根据双指移动的距离差更新缩放比例，并重新绘制图片。最后调用 `ctx.draw()` 方法将画布内容绘制到屏幕上。

需要注意的是，在 touchmove 事件中需要使用 `ctx.drawImage()` 方法重新绘制图片，并传入新的宽高参数，这里的宽高需要根据当前的缩放比例计算得出。