javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?
問題描述
canvas在響應(yīng)mousedown事件時,可以通過event.offsetX和offsetY來提取元素內(nèi)坐標(biāo),那我換成了touchstart后沒有offsetX和offsetY.該在哪里找到元素內(nèi)坐標(biāo)呢?
問題解答
回答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 或者其他坐標(biāo),至于touchend 的話,為了兼容性考慮,最好用e.changedTouches
回答3:相關(guān)文章:
1. nignx - docker內(nèi)nginx 80端口被占用2. python - flask _sqlalchemy 能否用中文作為索引條件3. 關(guān)于docker下的nginx壓力測試4. java - 阿里的開發(fā)手冊中為什么禁用map來作為查詢的接受類?5. 跟蹤器怎么開啟無反應(yīng)6. macos - mac下docker如何設(shè)置代理7. dockerfile - 我用docker build的時候出現(xiàn)下邊問題 麻煩幫我看一下8. docker api 開發(fā)的端口怎么獲取?9. dockerfile - [docker build image失敗- npm install]10. android - 百度地圖加載完成監(jiān)聽
