The native js on the mobile terminal realizes the picture scaling effect. How to solve the problem that the zoom ratio changes too much?

problem description

touchmovetransform:scale23

related codes

// 
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))
}
Jun.22,2022

just adjust the zoom by yourself.

// 
  this.currentItem.style.transform = 'scale('+ ratio / 10 +')'
Try dividing

by 10.

Menu