【前端】原生canvas中如何获取到触摸事件的canvas内坐标?

Z时代
2024-01-10
分类：技术分享

canvas在响应mousedown事件时,可以通过event.offsetX和offsetY来提取元素内坐标,那我换成了touchstart后没有offsetX和offsetY.该在哪里找到元素内坐标呢?

回答

在我的 canvas 地图库 Sinomap 中处理的算法是这样的（有改动）：

// 注意这里是为 canvas 的 DOM 元素增加 Listener 而非 canvas 的 ctx
document
  .getElementById('my-canvas')
  .addEventListener('click', updateHandler, false)
function updateHandler (e) {
  // canvas 为你的 canvas ctx 变量
  const box = canvas.getBoundingClientRect()
  const mouseX = (e.clientX - box.left) * canvas.width / box.width
  const mouseY = (e.clientY - box.top) * canvas.height / box.height
  console.log([mouseX, mouseY])}

touch事件你需要获取 e.touches[0].pageX 或者其他坐标，至于touchend 的话，为了兼容性考虑，最好用e.changedTouches

【前端】原生canvas中如何获取到触摸事件的canvas内坐标?