Pan to object and zoom to fit viewport

[emorling]

I am trying to achieve something similar to Prezi presentation software. Basically having a number of bookmarks to objects on the canvas. When the user goes/jumps between the bookmarks the viewport will 1) pan smoothly to the next object 2) meantime scale the viewport so that the object fits (horizontally or vertically whichever makes the object fit)

Is this possible and does anyone already have an example of this?

[asturur]

Is for sure possible, you have 2 tasks, calculating the destination viewport and then animating it.
To animate a viewport is sufficient to animate the 6 numbers that are part of it.
To calculate the destination viewport, that may be a little effort on your side to understand positioning and geometries.

you can use fabric.util.calcScaleToFit to get the zoom level, passing as destination the canvas and source the object.getBoundingRect.
For the panning, i think the final panning will be something like the object.getCenterPoint() to which you have to subtract half of the canvas dimensions.

I m not entirely sure but a combination of those things will do the trick.

[emorling]

Okay, the panning works and so does the zoom - if I run them separately. For example first do the panning and then the zooming. However, the difficulty I think is getting the Zoom to work while panning. Do you see any obvious mistakes I am making here?

    const origZoom = canvas.getZoom();
    const origX = canvas.viewportTransform[4];
    const origY = canvas.viewportTransform[5];

    // NOTE: object is the selected object we are panning and zooming to

    const objWidth = object.getScaledWidth();  
    const objHeight = object.getScaledHeight();
    const panX = ((canvas.getWidth() / origZoom / 2) - (object.aCoords.tl.x) - (objWidth / 2)) * origZoom;
    const panY = ((canvas.getHeight() / origZoom / 2) - (object.aCoords.tl.y) - (objHeight / 2)) * origZoom;

    // Panning X
    fabric.util.animate({
      startValue: origX,
      endValue: panX,
      duration: 2000,
      easing: fabric.util.ease.easeOutCirc,
      onChange(value) {
        canvas.setViewportTransform([origZoom, 0, 0, origZoom, value, canvas.viewportTransform[5]]);
      },
      onComplete() {
        canvas.renderAll();
      },
    });

    // Panning Y
    fabric.util.animate({
      startValue: origY,
      endValue: panY,
      duration: 2000,
      easing: fabric.util.ease.easeOutCirc,
      onChange(value) {
        canvas.setViewportTransform([origZoom, 0, 0, origZoom, canvas.viewportTransform[4], value]);
      },
      onComplete() {
        canvas.renderAll();
      },
    });

    // Zoom
    const startZoom = canvas.getZoom();
    const endZoom = fabric.util.findScaleToFit(object, canvas);
    fabric.util.animate({
      startValue: startZoom,
      endValue: endZoom,
      duration: 2000,
      easing: fabric.util.ease.easeOutCirc,
      onChange(value) {
        canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), value);
      },
      onComplete() {
        canvas.renderAll();
      },
    });

[emorling]

I believe the point in zoomToPoint is the issue, but not sure how to change it to the correct

[asturur]

So ideally you want to calculate starting viewport, end viewport and have a single animation.

const startViewport = canvas.viewportTransform.slice(0); // we create a copy of it.
const objectSize = activeObject.getBoundingRect();
const finalCenter = activeObject.getCenterPoint();
const finalZoom = fabric.util.findScaleToFit(activeObject, canvas);
// not entirely sure about this last piece
const translateX = (finalCenter.x - objectSize.width / 2) * finalZoom;
const translateY = (finalCenter.y - objectSize.height / 2) * finalZoom;
const endViewport = [finalZoom, 0, 0, finalZoom, translateX, translateY];

    fabric.util.animate({
      duration: 2000,
      easing: fabric.util.ease.easeOutCirc,
      onChange(current, valuePerc) {
        canvas.viewportTransform = endViewport.map((v, i) => (v - startViewport[i]) * valuePerc + startViewport[i]))
        canvas.requestRenderAll();
      },
      onComplete() {
        canvas.requestRenderAll();
      },
    });

I would try something like this. fabric.util.animate can be swapped with any other animation utility just to be clear.
I did not verify that code, if you want to open a fiddle with something setup and this does not work, we can verify why, without a working example and just code is all more difficult than necessary

[LiamPerson]

I hate to come in late and say stuff here but none of this really works. I am on v5.2.1 and I have been struggling for a day or so now trying to get panning to work.

    const contextBox = myObj // The object I want to focus on.
const zoom = this.canvas.getZoom()
const objectSize = contextBox.getBoundingRect();
const finalCenter = contextBox.getCenterPoint();
// not entirely sure about this last piece
const translateX = (finalCenter.x - objectSize.width / 2) * zoom;
const translateY = (finalCenter.y - objectSize.height / 2) * zoom;
const endViewport = [zoom, 0, 0, zoom, translateX, translateY];
this.canvas.setViewportTransform(endViewport);
this._backgroundCanvas.setViewportTransform(endViewport);

This randomly flickers the position when I activate it and it doesn't even end up positioning the object correctly in the area. I have tried on other engines and it works perfectly fine. I have no idea what could possibly be going wrong. My suspicion is this is just using the wrong coordinates

[rasheed-saqib]

It's a bit late, but this is working perfectly for me in version 6:

const fabricRef = useRef<Canvas | null>()

const draw =  useCallback(async () => {
// drawing logic
}, [])

const scrollToObject = useCallback((rect: Rect) => {
    if (fabricRef.current == null) {
      return
    }

    fabricRef.current.setZoom(1)

    const {
      current: {
        viewportTransform: { 4: currentX, 5: currentY }
      }
    } = fabricRef

    const vpw = fabricRef.current.width / 2
    const vph = fabricRef.current.height / 2
    const finalX = -(rect.left - vpw / 2)
    const finalY = -(rect.top - vph / 2)

    util.animate({
      startValue: 0,
      endValue: 1,
      duration: 600,
      easing: util.ease.easeInOutCubic,
      onChange: value => {
        const newX = currentX + (finalX - currentX) * value
        const newY = currentY + (finalY - currentY) * value

        if (fabricRef.current == null) {
          return
        }

        fabricRef.current.setViewportTransform([
          ...fabricRef.current.viewportTransform.slice(0, 4),
          newX,
          newY
        ] as TMat2D)
        fabricRef.current.requestRenderAll()
      },
      onComplete: () => {
        console.log('Done panning to object!')
      }
    })
  }, [])
  
  useEffect(() => {
    void drawPage()
  }, [])

[Heimot]

I needed the exact same thing for my project and this is the only thread i found about this. @rasheed-saqib example was a great start but sadly it offsets all object's its panning into by a small margin. And I also needed a way to automatically zoom into the object, which didnt work well because of the offset.
So incase someone is looking for something that centers the object and zooms into it heres what i did.

Video
https://github.com/user-attachments/assets/76a3bfb9-8b43-4b6e-a0f5-5726b8965580

Also here's a codesandbox if you want to try it out: https://codesandbox.io/p/sandbox/zk6rrz

const handleCanvasObjectSelection = ({ fabricRef, canvasObject }) => {
    if (!fabricRef.current) return;
    const currentZoom = fabricRef.current.getZoom();
    const finalZoom = fabric.util.findScaleToFit(canvasObject, fabricRef.current) / 2;
    const finalCenter = canvasObject.getCenterPoint();

    const {
        current: {
            viewportTransform: { 4: currentX, 5: currentY }
        }
    } = fabricRef

    const finalX = -finalCenter.x * finalZoom + fabricRef.current.width / 2;
    const finalY = -finalCenter.y * finalZoom + fabricRef.current.height / 2

    fabric.util.animate({
        startValue: 0,
        endValue: 1,
        duration: 1000,
        easing: fabric.util.ease.easeInOutCubic,
        onChange: value => {
            if (!fabricRef.current) return;
            const newX = currentX + (finalX - currentX) * value;
            const newY = currentY + (finalY - currentY) * value;
            const newZoom = currentZoom + (finalZoom - currentZoom) * value;

            fabricRef.current.setViewportTransform([
                newZoom,
                0,
                0,
                newZoom,
                newX,
                newY
            ]);
            fabricRef.current?.setActiveObject(canvasObject);
            fabricRef.current.requestRenderAll()
        }
    })
}