触屏版canvas画布实现touch坐标计算(坐标偏移问题)

背景：最近踩了个坑，因为鼠标点击与触屏在坐标获取上有些不一样，再加上pageX/Y与clientX/Y的些许不一样，再加上html底部没有固定。。。。导致画线的时候偏移了。。。

=￣ω￣=使用鼠标事件在canvas画布上画画，非常容易就能获取到画布上的坐标，使用（e.offsetX，e.offsetY）就行了。

=￣ω￣=但是，触摸事件就不一样了，它并没有提供这两个便捷的参数，所以你必须去计算画布上的坐标。
原理：【页面上的坐标】-【画布左上角的坐标】=【画布上的坐标】

ps：获取画布坐标方法
let vertex = document.getElementById('canvas').getBoundingClientRect();

=￣ω￣=最开始是使用pageX/Y来获取的，但是问题就来了，如果你页面底部没有固定，就会导致当你下拉到底部时，页面的底部悬浮在整个浏览器底部上方，这时你在canvas画布上画画就会出现偏移。
原因：pageX/Y是在clientX/Y的基础上加上了滚动条的距离，而额外加上的距离就是偏移的大小。

解决方案：使用clientX/Y来计算画布上的坐标
let x = e.originalEvent.changedTouches[0].clientX-vertex.left;
let y = e.originalEvent.changedTouches[0].clientY-vertex.top;

总结：如果页面底部固定在浏览器底部，使用pageX/Y来计算画布上的坐标也是可以的，而且不会发生偏移问题。

触屏版canvas画布实现touch坐标计算(坐标偏移问题)相关推荐

Discus 论坛在 pc 电脑上访问手机版 ( mobile ) 和触屏版（touch）设置
Discus 论坛在 pc 电脑上访问手机版 ( mobile ) 和触屏版(touch)设置 1. 更改用户代理 user agent 一般在浏览器上安装UserAgent Switcher ...
mobile.php discuz,电脑访问discuz手机版【触屏版跳转标准版的修改方法】
推荐方法: 以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机 ...
基于STM32F469I-DISCOVERY的触屏版中国象棋
基于STM32F469I-discovery的触屏版中国象棋项目代码已开源于github:基于STM32F469I-DISCOVERY的触屏版中国象棋项目简介中国象棋是中国棋文化,也是中华民族的 ...
手机当当网触屏版开发之旅
新年伊始,首先给大家拜个晚年了! :) "一年之计在于春",回到北京感觉比在家暖和多了.总结回顾去年的工作,就要开始着手新的一年的工作了. 从2011年11月18号开始,在PM.U ...
电脑访问discuz手机版【触屏版跳转标准版的修改方法】
推荐方法: 以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机 ...
Discuz手机触屏版的图片尺寸显示修改
可能是出于节省流量的考虑,DZ手机触屏版把图片搞得非常小.首先在上传的时候,生成一张手机版缩略图,这个图的尺寸很小,就算在模板上放大尺寸,也会变模糊.然后在手机模板上,图片的高和宽设置得非常小,140 ...
手机qq2008触屏版_比微信老却是00后最爱手机QQ 16年进化史
5月5日,腾讯QQ发布了<00后数据报告>,第一次以长图形式向公众展示了00后对于QQ的喜爱. 当然物是人非,当年那个"胖企鹅"已经和现在功能强大.颜值超高的QQ不可同 ...
手机qq2008触屏版_[进行中]数码手机周年庆
[进行中]数码手机周年庆活动时间:2020-09-26 20:00:00-2020-10-20 23:59:59 1.数码手机狂欢,直降底价,钜惠来袭! 2.爆款5折起! 3.全场最低价,9.9元抢 ...
WAP、触屏版网站及APP的区别
在手机上的应用通常分为"手机WAP版网站"."手机触屏版网站"."手机APP应用软件",其三者间有何区别呢?以下是各种版本网站及应用的示意图 ...

触屏版canvas画布实现touch坐标计算(坐标偏移问题)

触屏版canvas画布实现touch坐标计算(坐标偏移问题)相关推荐

最新文章

热门文章