js实现类似百度地图的缩放拖动功能

js实现类似百度地图的缩放拖动功能

使用的前端框架为vue

采用vue的框架,通过canvas的缩放绘制和外层div的滚动条控制实现功能

滚轮事件代码

    handleScroll(e) {
      console.log(e.deltaY)

      let _this = this
      if (e.deltaY > 0 && _this.zoomtimes > 1) {
        _this.zoomtimes = (_this.zoomtimes * 10 - 2) / 10
      } else if (e.deltaY < 0) {
        _this.zoomtimes = (_this.zoomtimes * 10 + 2) / 10
      }
      this.down_x = e.clientX
      this.down_y = e.clientY
      if (e.deltaY > 0) {
        _this.direction = 1
      } else {
        _this.direction = 0
      }
      e.preventDefault()
    },

 wheelxy() {
      let _this = this
      if (_this.direction == 0) {
        _this.$store.state.scroll_x = _this.$refs.imageWrapper.scrollLeft =
          (((_this.$refs.imageWrapper.clientWidth - 10) * _this.zoomtimes) /
            ((_this.$refs.imageWrapper.clientWidth - 10) *
              (_this.zoomtimes - 0.2)) -
            1) *
            (_this.down_x - 67 + _this.$refs.imageWrapper.scrollLeft) +
          _this.$refs.imageWrapper.scrollLeft
        _this.$store.state.scroll_y = _this.$refs.imageWrapper.scrollTop =
          (((_this.$refs.imageWrapper.clientHeight - 10) * _this.zoomtimes) /
            ((_this.$refs.imageWrapper.clientHeight - 10) *
              (_this.zoomtimes -