码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-10-15 16:18:29      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:code   off   除了   变量   火狐   layer   color   span   safari   

引言:在使用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,其余是一样的)

标签:code   off   除了   变量   火狐   layer   color   span   safari   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!