首页 > 其他 > 详细

canvas获取浏览器坐标(vue项目demo,其余是一样的)

时间:2018-10-15 16:01:45      阅读:160      评论:0      收藏:0      [点我收藏+]

引言:在使用canvas获取坐标的时候,不同浏览器处理是不同的

getPosition (ev) {
      let x, y
      if (ev.layerX || ev.layerX === 0) {
        x = ev.layerX
        y = ev.layerY
      } else if (ev.offsetX || ev.offsetX === 0) {
        x = ev.offsetX
        y = ev.offsetY
      }
      return {x: x, y: y}
 }

以上代码是获取点击坐标的,除了IE6,7,8以外都是可用的,

火狐浏览器用layerX和layerY来替代offsetX和offsetY

layerX/Y获取到的是触发点相对被触发dom左上角的距离,数值与offsetX/Y相同,这个变量就是firefox用来替代offsetX/Y的,基准点为边框左上角,但是有个条件就是,被触发的dom需要设置为position:relative或者position:absolute,否则会返回相对html文档区域左上角的距离

兼容性:IE6/7/8不支持,opera不支持,IE9/10和Chrome、Safari均支持

注意:使用layerX和layerY的时候,一定要将触发的dom设置定位,要不然,坐标是会跑偏的

 

canvas获取浏览器坐标(vue项目demo,其余是一样的)

原文:https://www.cnblogs.com/jiangze-blog/p/9791233.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!