javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?
問題描述
canvas在響應(yīng)mousedown事件時(shí),可以通過event.offsetX和offsetY來提取元素內(nèi)坐標(biāo),那我換成了touchstart后沒有offsetX和offsetY.該在哪里找到元素內(nèi)坐標(biāo)呢?
問題解答
回答1:在我的 canvas 地圖庫 Sinomap 中處理的算法是這樣的(有改動(dòng)):
// 注意這里是為 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 或者其他坐標(biāo),至于touchend 的話,為了兼容性考慮,最好用e.changedTouches
回答3:相關(guān)文章:
1. mysql優(yōu)化 - MySQL如何為配置表建立索引?2. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器3. 我在網(wǎng)址中輸入localhost/abc.php顯示的是not found是為什么呢?4. 數(shù)據(jù)庫 - Mysql的存儲(chǔ)過程真的是個(gè)坑!求助下面的存儲(chǔ)過程哪里錯(cuò)啦,實(shí)在是找不到哪里的問題了。5. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問題6. 冒昧問一下,我這php代碼哪里出錯(cuò)了???7. windows誤人子弟啊8. php傳對(duì)應(yīng)的id值為什么傳不了啊有木有大神會(huì)的看我下方截圖9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 實(shí)現(xiàn)bing搜索工具urlAPI提交
