使用svg-pan-zoom操作图像使固定元素位于屏幕中心

435 阅读1分钟

使用svg-pan-zoom

    moveSvgPanZoom() {// 调整画布使得相机点位在中心
      let cameraPoint = document.querySelector(`#code${this.query.id}`)
      if (cameraPoint) {
        let { x, y } = cameraPoint.getBBox()
        this.svgPanZoom.zoom(5) //缩放倍率,如果需要缩放的话,必须提前写才能获得正确realZoom
        this.svgPanZoom.pan({ x: 0, y: 0 })
        var realZoom = this.svgPanZoom.getSizes().realZoom;

        this.svgPanZoom.pan({
          x: -(x * realZoom) + (this.svgPanZoom.getSizes().width / 2),
          y: -(y * realZoom) + (this.svgPanZoom.getSizes().height / 2)
        });
      }
    }