javascript - Bagaimana untuk mendapatkan koordinat acara sentuhan dalam kanvas dalam kanvas asli?

Question

Apabila kanvas bertindak balas kepada acara turun tetikus, ia boleh mengekstrak koordinat dalaman elemen melalui event.offsetX dan offsetY Kemudian saya menukar kepada touchstart dan tiada offsetX dan offsetY Di manakah saya boleh mencari koordinat dalaman elemen?

Answer 1

Algoritma yang diproses dalam pustaka peta kanvas saya Sinomap ialah ini (dengan perubahan):

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

Acara sentuh, anda perlu mendapatkan e.touches[0].pageX atau koordinat lain Bagi touchend, atas sebab keserasian, sebaiknya gunakan e.changedTouches

Answer 3