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

本文主要是介绍实现自定义的移动端双指缩放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原理：

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.touchesif (touches.length !== 2) {return}startDistance = getDistance(touches[0], touches[1]);startScale = scale.valuedocument.addEventListener('touchmove', onTouchmove)document.addEventListener('touchend', onTouchend)}// 触控移动function onTouchmove(e: TouchEvent) {const touches = e.touchesif (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>