javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?
問(wèn)題描述
canvas在響應(yīng)mousedown事件時(shí),可以通過(guò)event.offsetX和offsetY來(lái)提取元素內(nèi)坐標(biāo),那我換成了touchstart后沒(méi)有offsetX和offsetY.該在哪里找到元素內(nèi)坐標(biāo)呢?
問(wèn)題解答
回答1:在我的 canvas 地圖庫(kù) 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. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境2. java - 是否類 類型指針、引用作為形參 ,函數(shù)結(jié)束不會(huì)自動(dòng)析構(gòu)類?3. matplotlib - python函數(shù)的問(wèn)題4. java - Mybatis查詢數(shù)據(jù)庫(kù)時(shí)出現(xiàn)查詢getInt()的錯(cuò)誤5. JavaScript事件6. css - C#與java開(kāi)發(fā)Windows程序哪個(gè)好?7. javascript - 這段代碼如何理解?8. mysql無(wú)法添加外鍵9. javascript - 有沒(méi)有什么好的圖片懶加載的插件,需要包含監(jiān)聽(tīng)頁(yè)面滾動(dòng)高度,然后再加載的功能10. javascript - 我是做web前端的,公司最近有一個(gè)項(xiàng)目關(guān)于數(shù)據(jù)統(tǒng)計(jì)的!
