移动端原生js实现图片缩放效果，缩放比例变化幅度过大怎么解决

Question

问题描述

我使用勾股定理计算出两只手指的距离，在touchmove中计算比例，然后赋值给transform:scale，但是比例值过大，随便拉一下比例就达到了2、3倍。并且快速缩放的时候会很卡。

相关代码

// 缩放事件处理函数
function zoom(tInfo){
  // 计算缩放比例，这里的比例值变化幅度很大
  var ratio = 
    // touchmove时的手指坐标距离
    getHypotenuseLength(
      tInfo.zoomCurrentTouches[0].clientX,
      tInfo.zoomCurrentTouches[0].clientY,
      tInfo.zoomCurrentTouches[1].clientX,
      tInfo.zoomCurrentTouches[1].clientY) /
    // touchstart的手指坐标距离
    getHypotenuseLength(
      tInfo.zoomStartTouches[0].clientX,
      tInfo.zoomStartTouches[0].clientY,
      tInfo.zoomStartTouches[1].clientX,
      tInfo.zoomStartTouches[1].clientY)
  
  // 设置图片的缩放比例
  this.currentItem.style.transform = 'scale('+ ratio +')'
}

// 勾股定理，计算两只手指的距离
function getHypotenuseLength(x1, y1, x2, y2){
  var sideW = x1 - x2
  var sideH = y1 - y2
  return Math.sqrt((sideW * sideW) + (sideH * sideH))
}

Answer 1

自己调整一下缩放比例不就好了。。。

// 设置图片的缩放比例
  this.currentItem.style.transform = 'scale('+ ratio / 10 +')'

除以 10 试一下。