修改了一个方法。

gistfile1.txt

 
 
 
 
 // 缩放 放大事件
    _pinchout(e) {
      let now = new Date().getTime();
      let offset = tool.offset(this.$refs.touch_com.$el);
      if (!this.pinchoutTimer || now - this.pinchoutTimer >= 300) {


        // 手指中心点位置，视为始终静止不变。
        fingureP = {
          x: e.center.x,
          y: e.center.y,
        }

        // 不动状态下，场景左上角，一比一图下，偏移量。
        oneToOne_leftTop_Point = {
          x: this.arenaTransform.left,
          y: this.arenaTransform.top,
        }


        // TODO 因为特殊设定，导致，手指和左上角的点，任何时候相对位置固定。


        // 执行尺寸变化前，尺寸比例。
        oldScaleRate = this.scaleRate;

        // 一比一图上面的手指，距离场景左上角的距离。
        let old_figureRatio = {
          xRatio: (fingureP.x - oneToOne_leftTop_Point.x) / '旧的总宽度',
          yRatio: (fingureP.y - oneToOne_leftTop_Point.y) / '旧的总高度',
        }





        // TIP————————————————————————————————————原本代码——————————————————————————————————————————
        let scaleRate = this.scaleRate + 0.1;
        if (scaleRate >= this.maxScaleRate + 0.2) {
          scaleRate = this.maxScaleRate + 0.2;
        }
        this.scale(scaleRate);
        // TIP————————————————————————————————————原本代码——————————————————————————————————————————


        // this.pinchoutTimer = now;
        // let originScaleRate = this.originScaleRate;


        // originTop，相对于空容器的距离。
        // originLeft,相对于空容器的距离。

        // c.center.y 相对于空容器的距离。
        // c.center.x 相对于空容器的距离。


        // let gymY_container = this.arenaTransform.top * scaleRate;
        // let gymX_container = this.arenaTransform.left * scaleRate;




        // let trueX = (fingureX_container - gymX_container);    // 相对场馆左上角，真实坐标
        // let trueY = (fingureY_container - gymY_container);    // 相对场馆左上角，真实坐标


        // let newFocus_P = {
        //   x: fingureX_container - this.arenaTransform.top * scaleRate,
        //   y: fingureY_container - this.arenaTransform.left * scaleRate,
        // }


        // 执行尺寸变化后，尺寸比例。
        let newScaleRate = scaleRate;

        // 手指，应该距离左上角，距离
        let should_direction_leftTopPoint = {
          width: '新的总宽度' * old_figureRatio.xRatio,
          height: '新的总高度' * old_figureRatio.yRatio,
        }

        // 新的手指的点，应该所在的距离。
        let new_shouldPosition = {
          x: oneToOne_leftTop_Point.x + should_direction_leftTopPoint.width,
          y: oneToOne_leftTop_Point.y + should_direction_leftTopPoint.height
        }


        // 从旧的手指，到新的手指，所需要移动的向量。
        let predict_newFingure_moveDistance = {
          width: new_shouldPosition.x - fingureP.x,
          height: new_shouldPosition.y - fingureP.y,
        }


        // 移动translate的位置。
        this.arenaTransform = {
          left: oneToOne_leftTop_Point.x - predict_newFingure_moveDistance.width,
          top: oneToOne_leftTop_Point.y - predict_newFingure_moveDistance.height,
        }



        // // 一比一图上面的手指，距离场景左上角的距离。
        // let oneToOne_newFingurePoint = {
        //   width: (fingureP.x - oneToOne_leftTop_Point.x * newScaleRate) / newScaleRate,
        //   height: (fingureP.y - oneToOne_leftTop_Point.y * newScaleRate) / newScaleRate,
        //   // x: (fingureX_container - this.arenaTransform.top * this.scaleRate) / this.scaleRate,
        //   // y: (fingureY_container - this.arenaTransform.left * this.scaleRate) / this.scaleRate,
        // }



        // this.arenaTransform = {
        //   top: originTop - (- originTop) * (scaleRate / originScaleRate - 1),
        //   left: originLeft - (- originLeft) * (scaleRate / originScaleRate - 1)
        // };
        // console.log('放大', offset, originTop - e.center.y * (scaleRate / originScaleRate - 1), e)
      }
    },