ctrl+滚轮控制canvas画布比例

 mounted() {
    this.componentTagList = componentListText
    // 监听滚轮-画布比例大小
    document.querySelector('#home').addEventListener('mousewheel',
      this.handleScroll
      , {
        capture: false,
        passive: false
      });
  },



// 滚轮画布比例调整
    handleScroll(e) {
      //e.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。
      //火狐浏览器不支持这个方法，需要会用e.detail来获取滚轮的滚动方向，向上是负值，向下是正值
      let direction = e.deltaY > 0 ? 'down' : 'up';  //deltaY为正则滚轮向下，为负滚轮向上
      //125为用户一次滚动鼠标的wheelDelta的值,125与鼠标滚动一下是几行的不同而不同

      if ((e.wheelDelta && e.ctrlKey) || e.detail) {
        // 关闭默认的滚轮事件
        e.preventDefault();
        // 画布比例设一个最小值，不能为 0
        if (direction == 'down' && e.deltaY >= 125 && e.ctrlKey) {
          if (this.scale <= 5) {
            this.scale = 5;
          } else {
            this.scale -= 5;
            //根据滚轮改变的scale改变画布上控件的大小比例
            _debounce(changeComponentsSizeWithScale(this.scale))
          }
        }
        if (direction == 'up' && e.deltaY <= -125 && e.ctrlKey) {

          if (this.scale >= 200) {
            this.scale = 200
          } else {
            this.scale += 5;
            _debounce(changeComponentsSizeWithScale(this.scale))
          }
        }
      }


    },

// 节流
export function _throttle(fn, wait = 500) {
  let last, now
  return function() {
    now = Date.now()
    if (last && now - last < wait) {
      last = now
    } else {
      last = now
      fn.call(this, ...arguments)
    }
  }
}
 
// 防抖
export function _debounce(fn, wait = 500) {
  let timer
  return function() {
    let context = this
    let args = arguments
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(context, args)
    }, wait)
  }
}