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.

[asturur]

http://fabricjs.com/docs/fabric.util.html#.findScaleToFit

mispelled it

[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