CODEWITHSUNDEEP
fabricjs
Lempkin
Lempkin

Reputation: 1578

Zoom in and out : canvas offset

I'm working on a zoom functionnality like this :

 public wheelEventHandler(ev) {
        var pointer = this.canvas.getPointer(ev.e);
        var posx = pointer.x;
        var posy = pointer.y;
        if (ev.wheelDelta > 0) {
            //zoom in
            let valeurZoom = this.canvas.getZoom() * 1.1 <= this.maxZoom ? this.canvas.getZoom() * 1.1 : this.maxZoom;
            this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom);
        }
        else {
            //zoom out
            let valeurZoom = this.canvas.getZoom() / 1.1 >= 1 ? this.canvas.getZoom() / 1.1 : 1;
            this.canvas.zoomToPoint(new fabric.Point(posx, posy), valeurZoom);
        }
    }

Problem is when i zoom in, and then zoom out, the initial view have an offset, and i don't know what to do, when my zoom is back to 1, i want that canvas shows exactly what it showed before, with image centered and no offset.

How can i do?

this is what i have in the begening and what i want when zoom is back to 1 this is what i have in the begening and what i want when zoom is back to 1

this is what i have when i zoom back to 1 and i don't want the offset in red this is what i have when i zoom back to 1 and i don't want the offset in red

Upvotes: 0

Views: 1050

Answers (1)

Observer
Observer

Reputation: 3706

Lempkin,

When you zoom out to initial zoom (to 1) try use this functionality:

var centerOfCanvas = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
    canvas.zoomToPoint(centerOfCanvas , 1);
    canvas.renderAll();

When you want to zoom out on a center all the time use this logic:

 var centerOfCanvas = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
    canvas.zoomToPoint(centerOfCanvas , canvas.getZoom() / 1.1);
    canvas.renderAll();

If you want to zoom out/zoom in in the mouse position use your logic, but when you zoom is equal to 1 reset to center position of the mouse.

Reset to default:

canvas.viewportTransform = [1,0,0,1,0,0]

Upvotes: 2

Related Questions