vant4 双指事件

Vant4 是一个基于 Vue 3 的移动端 UI 组件库，它提供了很多常用的 UI 组件和功能。Vant4 也支持移动端双指事件，比如缩放、旋转等。

Vant4 中支持双指事件的组件有 `van-image`、`van-canvas`、`van-swipe-cell` 等，它们都提供了相应的事件和方法来支持双指操作。下面以 `van-image` 组件为例介绍一下如何使用双指事件。

1. 监听事件

`van-image` 组件提供了 `@scale` 事件来监听缩放事件，可以在此事件中获取缩放比例和中心点坐标。代码如下：

<van-image
  src="https://img.yzcdn.cn/vant/cat.jpeg"
  @scale="onScale"
/>

export default {
  methods: {
    onScale({ scale, centerX, centerY }) {
      console.log('scale:', scale);
      console.log('centerX:', centerX);
      console.log('centerY:', centerY);
    }
  }
}

在 `@scale` 事件中，可以通过参数 `scale` 获取缩放比例，通过参数 `centerX` 和 `centerY` 获取缩放中心点坐标。

2. 手动触发缩放

`van-image` 组件还提供了 `scaleTo` 方法来手动触发缩放，可以通过传入缩放比例和中心点坐标来进行缩放。代码如下：

<van-image
  ref="image"
  src="https://img.yzcdn.cn/vant/cat.jpeg"
/>

export default {
  methods: {
    scaleImage(scale, centerX, centerY) {
      this.$refs.image.scaleTo(scale, centerX, centerY);
    }
  }
}

可以通过 `this.$refs.image.scaleTo(scale, centerX, centerY)` 来手动触发缩放操作。