javascript - 原生canvas中如何取得到觸控事件的canvas內座標?

Question

canvas在回應mousedown事件時,可以透過event.offsetX和offsetY來提取元素內座標,那我換成了touchstart後沒有offsetX和offsetY.該在哪裡找到元素內座標呢?

Answer 1

在我的 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])
}

Answer 2

touch事件 你需要 取得 e.touches[0].pageX 或其他座標，至於touchend 的話，為了相容性考慮，最好用e.changedTouches

Answer 3