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 - 按鈕鏈接到另一個網址 怎么通過百度統計計算按鈕的點擊數量2. sql語句 - 如何在mysql中批量添加用戶?3. mysql 可以從 TCP 連接但是不能從 socket 鏈接4. mysql - PHP定時通知、按時發布怎么做?5. 怎么php怎么通過數組顯示sql查詢結果呢,查詢結果有多條,如圖。6. mysql - JAVA怎么實現一個DAO同時實現查詢兩個實體類的結果集7. 事務 - mysql共享鎖lock in share mode的實際使用場景8. mysql建表索引問題求助9. mysql - 數據庫建字段,默認值空和empty string有什么區別 11010. mysql 非主鍵做范圍查找實現原理的一點困惑
