javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?
本文介绍了javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
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])
}
这篇关于javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文