获取div到整个屏幕的距离

探花唐老鸭

已于 2022-07-27 19:17:14 修改

阅读量2.1k

点赞数

分类专栏： javascript 文章标签：前端 javascript html

于 2022-07-27 14:45:41 首次发布

本文链接：https://blog.csdn.net/qq_45345113/article/details/126014411

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.获取div到浏览器的距离

2.获取div到整个屏幕的距离

1.获取div到浏览器的距离

这里需要适配一下，避免用户缩放大小

// 获取div到窗口x轴距离
getMonitorWallLeft () {
  let ele = document.getElementById('monitor-mdp')
  let L = ele.offsetLeft
  while (ele.offsetParent !== null) {
    ele = ele.offsetParent
    L += ele.offsetLeft
    return L
  }
},
// 获取div到窗口y轴距离
getMonitorWallTop () {
  let ele = document.getElementById('monitor-mdp')
  let T = ele.offsetTop
  while (ele.offsetParent !== null) {
    ele = ele.offsetParent  
    T += ele.offsetTop
    return T
  }
}

2.获取div到整个屏幕的距离

mounted () {
  // 获取这个div的dom节点
  this.dom = document.getElementById('monitorMdp')
  this.oldy = 0
  this.oldx = 0
  // 大小是固定的，不用每次获取
  this.boxHeight = this.dom.clientHeight
  this.boxWidth = this.dom.clientWidth
  // 获取整个窗口的dom节点
  this.mainContainer = document.getElementById('mainContainer')
  clearInterval(this.timer)
  // 重新打开时优先使用上次的位置参数打开一次
  if (this.oldPosition) {
    this.turnMonitroing(this.oldPosition, false)
  }
  // 获取设备的显示比例，并赋值到viewRadio
  window.micApp.$XW.getScreenScale({}).then(data => {
    this.viewRadio = data.data.scale || 1
  })
  this.timer = setInterval(this.getDomPosition, 100)
  // 浏览器显示和隐藏事件，可以直接添加，通过标识去控制即可
  document.addEventListener('visbilitychange', this.listenWall)
},
methods: {
  // 定时函数 (扩展拖拽后影响的位置变化)
  getDomPosition () {
    // 获取浏览器的缩放比例
    let ratio = this.getRatio() || 1
    let screenX = window.screenX
    let screenY = window.screenY
    let outerHeight = window.outerHeight
    let innerHeight = window.innerHeight
    let scrollLeft = this.mainContainer.scrollLeft
    let scrollTop = this.mainContainer.scrollTop
    let left = this.dom.offsetLeft
    let top = this.dom.offsetTop
    // 浏览器缩放大小后宽高有变化要重新获取
    this.boxHeight = this.dom.clientHeight
    this.boxWidth = this.dom.clientWidth
    // 由于定时器执行速度较快，防止出来获取不到对应参数的情况，添加判断，如果值有问题，则直接跳出
    if (screenX === '' || screenX === undefined) return
    if (screenY === '' || screenY === undefined) return
    if (outerHeight === '' || outerHeight === undefined) return
    if (innerHeight === '' || innerHeight === undefined) return
    if (scrollLeft === '' || scrollLeft === undefined) return
    if (scrollTop === '' || scrollTop === undefined) return
    if (left === '' || left === undefined) return
    if (top === '' || top === undefined) return
    /*
      window.screenX 浏览器距离屏幕左侧的距离
      window.screenY 浏览器距离屏幕顶部的距离
      window.outerHeight 浏览器整个的高度（此值会受设备比例的影响）
      window.innerHeight 浏览器页面可视窗口的高度（此值会受缩放比例 + 设备比例的影响）
      this.mainContainer.scrollLeft 容器横向向滚动条的位置
      this.mainContainer.scrollTop 容器纵向滚动条的位置
    */
    let x = (left - scrollLeft) * ratio + screenX * this.viewRadio
    /**
     * this.viewRadio：设备的缩放比例（由客户端提供）
     * ratio：浏览器缩放比例
     * top - scrollTop 实际距离顶部的位置
     * outerHeight * this.viewRadio - innerHeight * ratio：获取浏览器工具栏的高度
    * 在100%比例下直接+-没问题，但是缩放后会错位，需要将设备缩放后的值与浏览器缩放后实际的值换算
     * screenY * this.viewRadio：浏览器到顶部的相对位置
     */
    let y = (top - scrollTop) * ratio + outerHeight * this.viewRadio - innerHeight * 
            ratio + screenY * this.viewRadio      
    if (x !== this.oldx || y !== this.oldy) {
      this.turnMonitroing({ x: x, y: y, w: this.boxWidth * ratio, h: this.boxHeight * 
      ratio })
      this.oldx = x
      this.oldy = y
    }
  },
  // 获取浏览器的缩放比例
  getRatio () {
    let ratio = 0
    let screen = window.screen
    let ua = navigator.userAgent.toLowerCase()
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio
    } else if (~ua.indexOf('msie')) {
      // 浏览器兼容处理，防止没有获取到自己换算
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth
    }
    if (ratio) {
      ratio = Math.round(ratio * 1000000)
    }
    return ratio * 0.000001
  },
  async turnMonitroing (data, flag) {
    // 此处校验一下 是否是全屏的时候
    if (data.x !== undefined && Number(data.x) && flag) {
      data.x = Math.ceil(Number(data.x) + 4)
    }
    if (data.y !== undefined && Number(data.y) && flag) {
      data.y = Math.ceil(Number(data.y) - 4)
    }
    if (data.w !== undefined && Number(data.w) && flag) {
      data.w = Math.ceil(Number(data.w))
    }
    if (data.h !== undefined && Number(data.h) && flag) {
      data.h = Math.ceil(Number(data.h))
    }
    console.log(data.x, data.y, data.w, data.h, 'to exe')
    let param = {
      resId: '123',
      x: data.x || 100,
      y: data.y || 100,
      w: data.w || 1000,
      h: data.h || 800,
      r: 3,
      c: 3
    }
    this.oldPosition = { ...param }
    // 打开监控墙
    await window.micApp.$XW.openMonitorWall(param)
  },
}