Fabric js：單擊按鈕時畫布居中並縮放到對象

Question

我試圖將視口集中在一個對象上，並在單擊按鈕時放大/縮小。 我想要一個動畫。 為此，我使用 setInterval 並像這樣以增量方式移動視口：

const objectCenterCoordenates = {
    x: Math.round(rect1.left + rect1.width / 2),
    y: Math.round(rect1.top + rect1.height / 2)
  };
  const centeredCanvasCoordenates = {
    x: objectCenterCoordenates.x - canvas.width / 2,
    y: objectCenterCoordenates.y - canvas.height / 2
  };

  let currentPoint = {
    x: Math.round(canvas.viewportTransform[4]) * -1,
    y: Math.round(canvas.viewportTransform[5]) * -1
  };

  console.log("Start animation");
  let animation = setInterval(() => {
    console.log("New frame");

    if (canvas.getZoom() !== 2) {
      let roundedZoom = Math.round(canvas.getZoom() * 100) / 100;
      let zoomStep = roundedZoom > 2 ? -0.01 : 0.01;
      let newZoom = roundedZoom + zoomStep;
      canvas.zoomToPoint(
        new fabric.Point(currentPoint.x, currentPoint.y),
        newZoom
      );
    }

    let step = 5;

    let vpCenter = {
      x: Math.round(canvas.getVpCenter().x),
      y: Math.round(canvas.getVpCenter().y)
    };
    if (
      vpCenter.x === objectCenterCoordenates.x &&
      vpCenter.y === objectCenterCoordenates.y
    ) {
      console.log("Animation Finish");
      clearInterval(animation);
    }

    let xDif = Math.abs(vpCenter.x - objectCenterCoordenates.x);
    let yDif = Math.abs(vpCenter.y - objectCenterCoordenates.y);

    let stepX =
      Math.round(vpCenter.x) > Math.round(objectCenterCoordenates.x)
        ? -step
        : step;
    if (Math.abs(xDif) < step)
      stepX =
        Math.round(vpCenter.x) > Math.round(objectCenterCoordenates.x)
          ? -xDif
          : xDif;
    let stepY =
      Math.round(vpCenter.y) > Math.round(objectCenterCoordenates.y)
        ? -step
        : step;
    if (Math.abs(yDif) < step)
      stepY =
        Math.round(vpCenter.y) > Math.round(objectCenterCoordenates.y)
          ? -yDif
          : yDif;

    currentPoint = {
      x: currentPoint.x + stepX,
      y: currentPoint.y + stepY
    };

    canvas.absolutePan(new fabric.Point(currentPoint.x, currentPoint.y));
  }, 4);

但有時，我無法確定原因，它卡在一個循環中，一個方向移動幾個像素，然后返回另一個方向。 並且縮放實現得很好，因為可以在對象完成放大/縮小之前到達對象。

這是我的代碼的代碼筆： https ://codepen.io/nilsilva/pen/vYpPrgq

我將不勝感激有關使我的算法更好的任何建議。

Answer 1

看起來您對 clearInterval 有完全匹配的要求...

    if (
      vpCenter.x === objectCenterCoordenates.x &&
      vpCenter.y === objectCenterCoordenates.y
    ) {
      console.log("Animation Finish");
      clearInterval(animation);
    }

您描述stuck in a loop moving one way then going back the other是因為它從未完成的完全匹配，可能是因為您正在采取的步驟，或者它可能是一個舍入問題

您可以使用Math.hypot檢查兩個點是否足夠接近，請在此處閱讀更多信息：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot

條件將如下所示：

    if (Math.hypot(
      vpCenter.x - objectCenterCoordenates.x,
      vpCenter.y - objectCenterCoordenates.y
    ) < step) {
      console.log("Animation Finish");
      clearInterval(animation);
    }