PointerEvent指针事件 #

/**
 * 获取两点间距离
 * @param {object} a 第一个点坐标
 * @param {object} b 第二个点坐标
 * @returns
 */
function getDistance(a, b) {
  const x = a.x - b.x
  const y = a.y - b.y
  return Math.hypot(x, y) // Math.sqrt(x * x + y * y);
}

/**
 * 获取中点坐标
 * @param {object} a 第一个点坐标
 * @param {object} b 第二个点坐标
 * @returns
 */
function getCenter(a, b) {
  const x = (a.x + b.x) / 2
  const y = (a.y + b.y) / 2
  return { x: x, y: y }
}

const image = document.getElementById('image')

let result, // 图片缩放宽高
  x, // x轴偏移量
  y, // y轴偏移量
  scale = 1, // 缩放比例
  maxScale,
  minScale = 0.5

// 由于图片是异步加载，需要在load方法里获取naturalWidth，naturalHeight
image.addEventListener('load', function () {
  result = getImgSize(image.naturalWidth, image.naturalHeight, window.innerWidth, window.innerHeight)
  maxScale = Math.max(Math.round(image.naturalWidth / result.width), 3)
  // 图片宽高
  image.style.width = result.width + 'px'
  image.style.height = result.height + 'px'
  // 垂直水平居中显示
  x = (window.innerWidth - result.width) * 0.5
  y = (window.innerHeight - result.height) * 0.5
  image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)'
})

// 图片赋值需放在load回调之后，因为图片缓存后读取很快，有可能不执行load回调
image.src = '../images/xxx.jpg'

/**
 * 获取图片缩放尺寸
 * @param {number} naturalWidth
 * @param {number} naturalHeight
 * @param {number} maxWidth
 * @param {number} maxHeight
 * @returns
 */
function getImgSize(naturalWidth, naturalHeight, maxWidth, maxHeight) {
  const imgRatio = naturalWidth / naturalHeight
  const maxRatio = maxWidth / maxHeight
  let width, height
  // 如果图片实际宽高比例 >= 显示宽高比例
  if (imgRatio >= maxRatio) {
    if (naturalWidth > maxWidth) {
      width = maxWidth
      height = (maxWidth / naturalWidth) * naturalHeight
    } else {
      width = naturalWidth
      height = naturalHeight
    }
  } else {
    if (naturalHeight > maxHeight) {
      width = (maxHeight / naturalHeight) * naturalWidth
      height = maxHeight
    } else {
      width = naturalWidth
      height = naturalHeight
    }
  }
  return { width: width, height: height }
}

document.addEventListener('touchmove', function (event) {
  if (event.touches && event.touches.length == 2) {
    console.log('双指在移动')
  }
})

var eleImg = document.querySelector('#image')
var store = {
  scale: 1,
}
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
  var touches = event.touches
  var events = touches[0]
  var events2 = touches[1]

  event.preventDefault()

  // 第一个触摸点的坐标
  store.pageX = events.pageX
  store.pageY = events.pageY

  store.moveable = true

  if (events2) {
    store.pageX2 = events2.pageX
    store.pageY2 = events2.pageY
  }

  store.originScale = store.scale || 1
})
document.addEventListener('touchmove', function (event) {
  if (!store.moveable) {
    return
  }

  event.preventDefault()

  var touches = event.touches
  var events = touches[0]
  var events2 = touches[1]
  // 双指移动
  if (events2) {
    // 第2个指头坐标在touchmove时候获取
    if (!store.pageX2) {
      store.pageX2 = events2.pageX
    }
    if (!store.pageY2) {
      store.pageY2 = events2.pageY
    }

    // 获取坐标之间的举例
    var getDistance = function (start, stop) {
      return Math.hypot(stop.x - start.x, stop.y - start.y)
    }
    // 双指缩放比例计算
    var zoom =
      getDistance(
        {
          x: events.pageX,
          y: events.pageY,
        },
        {
          x: events2.pageX,
          y: events2.pageY,
        }
      ) /
      getDistance(
        {
          x: store.pageX,
          y: store.pageY,
        },
        {
          x: store.pageX2,
          y: store.pageY2,
        }
      )
    // 应用在元素上的缩放比例
    var newScale = store.originScale * zoom
    // 最大缩放比例限制
    if (newScale > 3) {
      newScale = 3
    }
    // 记住使用的缩放值
    store.scale = newScale
    // 图像应用缩放效果
    eleImg.style.transform = 'scale(' + newScale + ')'
  }
})

document.addEventListener('touchend', function () {
  store.moveable = false

  delete store.pageX2
  delete store.pageY2
})
document.addEventListener('touchcancel', function () {
  store.moveable = false

  delete store.pageX2
  delete store.pageY2
})