canvas中图片的放大缩小和移动

项目需求中需要图片的放大、缩小、移动，和实现一个放大缩小的缩略条。在这里记录一下实现的方法。
使用了 vue 和 konva

实现的效果大概是下图这样。

IMG_2089.GIF

method

bgImageDragEnd() {
      const layerImageNode = this.stage.find(".layerImage")[0];
      this.bgx = layerImageNode.getAttr("x");
      this.bgy = layerImageNode.getAttr("y");
    }

    // 放大缩小函数
    wheelForScale(e) {
   
        const stage = this.self.stage;
        const oldScale = this.self.imageScale;
        const scaleBy = 1.2;
        let pointer = stage.getPointerPosition();
        // let bar = this.self.$refs.slider.getStage().find('.sliderMoveBar')[0]
  
        var mousePointTo = {
          x: (pointer.x - this.self.bgx) / oldScale,
          y: (pointer.y - this.self.bgy) / oldScale,
        };
        if (e.evt.deltaY > 0 && oldScale * scaleBy > 8) {
          this.self.$noty("已放大到最大");
          return;
        }
        if (e.evt.deltaY < 0 && oldScale / scaleBy < 0.2) {
          this.self.$noty("已缩小到最小");
          return;
        }
        let newScale;
        if (e.evt.deltaY > 0) {
          newScale = oldScale * scaleBy;
        } else {
          newScale = oldScale / scaleBy;
        }
  
        this.self.bgx = pointer.x - mousePointTo.x * newScale;
        this.self.bgy = pointer.y - mousePointTo.y * newScale;
        this.self.imageScale = newScale;
        stage.batchDraw();
      }
    //   还原函数
      reduction() {
        this.self.bgx = 0;
        this.self.bgy = 0;
        this.self.imageScale = 1;
        this.self.hideMenu();
        this.self.$refs.scaleBox.changeScaleBar()
      }

滚动条