javascript - Comment obtenir les coordonnées d'un événement tactile dans un canevas natif?

Question

Lorsque Canvas répond à l'événement mousedown, il peut extraire les coordonnées internes de l'élément via event.offsetX et offsetY. Ensuite, j'ai changé pour touchstart et il n'y a pas de offsetX et de offsetY. Où puis-je trouver les coordonnées internes de l'élément

.

Answer 1

L'algorithme traité dans ma bibliothèque de cartes canevas Sinomap est le suivant (avec modifications) :

// 注意这里是为 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

Événement Touch, vous devez obtenir e.touches[0].pageX ou d'autres coordonnées Quant à touchend, pour des raisons de compatibilité, il est préférable d'utiliser e.changedTouches

.

Answer 3