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 - AttributeError: ’module’ object has no attribute ’MatchType’2. php自學(xué)從哪里開始?3. javascript - 百度echarts series數(shù)據(jù)更新問題4. MySQL客戶端吃掉了SQL注解?5. 求大神幫我看看是哪里寫錯(cuò)了 感謝細(xì)心解答6. javascript - JS設(shè)置Video視頻對(duì)象的currentTime時(shí)出現(xiàn)了問題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...7. javascript - 圖片能在網(wǎng)站顯示,但控制臺(tái)仍舊報(bào)錯(cuò)403 (Forbidden)8. python小白的基礎(chǔ)問題 關(guān)于while循環(huán)的嵌套9. phpstady在win10上運(yùn)行10. python - Django分頁和查詢參數(shù)的問題
