Fabric js: when button is clicked center canvas and zoom to object

Question

I'm trying to center the viewport on an object and zoom in/out when i click a button. I want to have an animation. To do this I'm using setInterval and moving the viewport in increments like so:

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);

But sometimes, I haven't been able to determine why, it gets stuck in a loop moving a few pixels one way then going back the other. And the zoom is well implemented, since it's possible to get to the object before it finished zooming in/out.

Here is a codepen with my code: https://codepen.io/nilsilva/pen/vYpPrgq

I would appreciate any advice on making my algorithm better.

Answer 1

Looks like you have an exact match requirement for your clearInterval ...

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

The case that you describe stuck in a loop moving one way then going back the other is because the exact match it's never done, could be because the step you are taking or it could be a rounding issue

You can use Math.hypot to check if the two points are close enough, read more here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot

The condition will look like:

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