实现自定义的移动端双指缩放

原理：

DOM上绑定双指触控相关的事件，当双指触控时，保存初始距离，当双指移动时，计算两触控点的距离，根据移动中的距离与初始距离调节缩放比例，再根据缩放比例改变元素样式即可实现缩放

效果演示：

vue3 + ts代码如下：

<script setup lang="ts">
import {ref, onMounted} from 'vue';

const scale = ref(1)
let startScale = scale.value

// 缩放灵敏度
const sensitivity = 0.5

// 触控开始的距离
let startDistance: number = 0

/**
 * 计算距离
 * @param touch1
 * @param touch2
 */
function getDistance(touch1: Touch, touch2: Touch): number {
  return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2)
}

onMounted(() => {
  document.addEventListener('touchstart', onTouchstart, {
    passive: false
  })

  // 触控开始
  function onTouchstart(e: TouchEvent) {
    e.preventDefault()
    const touches = e.touches
    if (touches.length !== 2) {
      return
    }
    startDistance = getDistance(touches[0], touches[1]);
    startScale = scale.value
    document.addEventListener('touchmove', onTouchmove)
    document.addEventListener('touchend', onTouchend)
  }

  // 触控移动
  function onTouchmove(e: TouchEvent) {
    const touches = e.touches
    if (touches.length !== 2) {
      return
    }
    let movingDistance: number = getDistance(touches[0], touches[1]);
    scale.value = Number((startScale * (1 + (movingDistance - startDistance) / startDistance * sensitivity)).toFixed(2))
  }

  // 触控结束
  function onTouchend(e: TouchEvent) {
    document.removeEventListener('touchmove', onTouchmove)
    document.removeEventListener('touchend', onTouchend)
  }
})
</script>

<template>
  <div class="HomeView" :style="{fontSize: `${14 * scale}px`}">
    <div>尝试双指缩放</div>
    <div class="box" :style="{width: `${100 * scale}px`, height: `${100 * scale}px`,}"></div>
    <div>缩放比例：{{ scale }}</div>
  </div>
</template>

<style scoped>
.HomeView {
  transform-origin: left top;
}

.box {
  background-color: red;
}
</style>