鼠标为中心进行缩放,标尺插件,拖拽带替滚动条行为,echarts重绘三种方法,.监听浏览器切换页面,监听浏览器的切出和切入

1.页面以鼠标为中心进行缩放

// 控制缩放值
handleWheel(e) {
  var box = document.getElementById('canvas')
  if (e.ctrlKey || e.metaKey) {
    e.preventDefault()
    let ratio = 1.1
    // 缩小
    if (e.deltaY > 0) {
      ratio = 1 / 1.1
    }
    // 限制缩放倍数
    const _scale = this.scale * ratio
    if (_scale > this.maxScale) {
      ratio = this.maxScale / this.scale
      this.scale = this.maxScale
    } else if (_scale < this.minScale) {
      ratio = this.minScale / this.scale
      this.scale = this.minScale
    } else {
      this.scale = _scale
    }
    // 主要是通过调整timesx和timesy的大小实现在不同页面中以鼠标中心缩放的功能
    //this.result.width 和 this.result.height 为缩放的页面的大小
    //handleWheel 这个方法绑定在需要缩放的元素的上级元素上
    const origin = {
      x: (ratio - 1) * this.result.width * this.timesx,
      y: (ratio - 1) * this.result.height * this.timesy
    }
  
    this.x -= (ratio - 1) * (e.clientX - this.x) - origin.x
    this.y -= (ratio - 1) * (e.clientY - this.y) - origin.y
    box.style.transform = 'translate3d(' + this.x + 'px, ' + this.y + 'px, 0) scale(' + this.scale + ')'
  }
},

2.标尺组件推荐使用## vue-sketch-ruler

github:

github.com/chuxiaoguo/…

3.已拖拽的方式带替滚动条滚动行为

mounted() {
  this.scrollInit() // 将鼠标滚动换为拖拽的方式
},

scrollInit() {
  // 获取要绑定事件的元素
  const nav = document.getElementById('screens') // 具有滚动条的元素
  var flag // 鼠标按下
  var downX // 鼠标点击的x下标
  var downY
  var scrollLeft // 当前元素滚动条的偏移量
  var scrollTop
  nav.addEventListener('mousedown', function(event) {
    // event.stopPropagation()
    flag = true
    downX = event.clientX // 获取到点击的x下标
    downY = event.clientY
    scrollLeft = this.scrollLeft // 获取当前元素滚动条的偏移量
    scrollTop = this.scrollTop
  })
  nav.addEventListener('mousemove', function(event) {
    // event.stopPropagation()
    if (flag) { // 判断是否是鼠标按下滚动元素区域
      var moveX = event.clientX // 获取移动的x轴
      var moveY = event.clientY
      var scrollX = moveX - downX // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
      var scrollY = moveY - downY
      this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
      this.scrollTop = scrollTop - scrollY
    }
  })
  // 鼠标抬起停止拖动
  nav.addEventListener('mouseup', function() {
    // event.stopPropagation()
    flag = false
  })
  // 鼠标离开元素停止拖动
  nav.addEventListener('mouseleave', function(event) {
    // event.stopPropagation()
    flag = false
  })
},

参考:

blog.csdn.net/weixin_4858…

4.echarts重绘的三种办法

5.监听浏览器切换tab页面

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState == 'hidden'){
      //todo...
  } else if (document.visibilityState == 'visible') {
      //todo...
  }
});

6.监听浏览器的切出和切入

window.onfocus = function () { // 浏览器当前窗口获得焦点
    document.title = 'tab1'
}
window.onblur = function () { // 浏览器当前窗口失去焦点
    alert('禁止切屏')
}