javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?
问题描述
canvas在响应mousedown事件时,可以通过event.offsetX和offsetY来提取元素内坐标,那我换成了touchstart后没有offsetX和offsetY.该在哪里找到元素内坐标呢?
问题解答
回答1:在我的 canvas 地图库 Sinomap 中处理的算法是这样的(有改动):
// 注意这里是为 canvas 的 DOM 元素增加 Listener 而非 canvas 的 ctxdocument .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])}回答2:
touch事件 你需要 获取 e.touches[0].pageX 或者其他坐标,至于touchend 的话,为了兼容性考虑,最好用e.changedTouches
回答3:相关文章:
1. javascript - prismplayer播放器全屏问题2. html5 - 急求?被公司问住了3. python相关问题求解决,有偿4. javascript - vue2.0中router.repalce跟router.push有什么区别,二者的应用场景是会有怎样的区别?5. javascript - 在sublime中如何给.vue文件注释?6. HTML5怎么访问本地文件?7. javascript - 这种上传图片预览怎么做?8. javascript - input输入框触发change事件后,外部元素会被选中9. javascript - 把字符串日期转换成一般时间格式后,发现小于10的数字不会自动添加0在前面,如下10. javascript - js判断一个数组是否重复