文章詳情頁
javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?
瀏覽：260日期：2022-12-06 14:22:18
問題描述
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：
標簽：
JavaScript
相關文章：
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 - 移動端上不能實現拖拽布局嗎？
排行榜
網公網安備