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 - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化5. javascript - nodejs關于進程間發送句柄的一點疑問6. 配置Apache時,添加對PHP的支持時語法錯誤7. phpstudy8.1支持win11系統嗎?8. javascript - vue-router 地址改變數據未改變9. 實現bing搜索工具urlAPI提交10. javascript - 移動端上不能實現拖拽布局嗎?

網公網安備