Fabricjs canvas reset after zooming

Question

I have a fabricjs canvas that I need to be able to zoom in and out and also change the image/object inside several times.

For this I setup the canvas in the first time the page loads like this:

fabric.Object.prototype.hasBorders = false;
fabric.Object.prototype.hasControls = false;

canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove: false, stateful: false});

canvas.defaultCursor = "pointer";
canvas.backgroundImageStretch = false;
canvas.selection = false;
canvas.clear();

var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}
canvas.deactivateAll().renderAll();

Then when I need to change the image/object in the canvas or when the page reloads, I try to reset the canvas like this:

canvas.clear();
canvas.remove(canvas.getActiveObject());
var image =  document.getElementById('my_image');
if (image != null) {
  imageSrc = image.src;
  if(imageSrc.length > 0){
    fabric.Image.fromURL(imageSrc, function(img) {
      img = scaleImage(canvas, img); //shrinks the image to fit the canvas
      img.selectable = false;
      canvas.centerObject(img);
      canvas.setActiveObject(img);
      canvas.add(img);
    });
  }
}

Not sure if it matters but the way I change the image is by changing the source in 'my_image' and reseting the canvas with the above method.

This works well until I use canvas.zoomToPoint, as per this thread, after this, the image/object starts changing position when I reset the zoom or click the canvas with the mouse while it is zoomed, seeming to jump at each change in the top left corner direction, eventually disappearing from view.

Reset Zoom:

canvas.setZoom(1);
resetCanvas(); //(above method)

How can I restore the image/object position?

I tried doing the initial setup instead of the reset and seamed to work visually but was in fact adding a new layer of upper canvas at each new setup so it is no good.

Is there a way to reset the canvas to original state without causing this behavior and still be able to zoom in/out correctly?

Answer 1

Although this question is very old, here is what I did using the current version of fabric.js 2.2.4:

canvas.setViewportTransform([1,0,0,1,0,0]); 

For your information: zooming to a point is a recalculation of the viewport transformation. The upper matrix is this is the initial viewport transform matrix.

Answer 2

I eventually fixed the problems I was having.

To reset the zoom, instead of just setting the zoom to 1 with canvas.setZoom(1), I reapplied the canvas.zoomToPoint method to the same point but with zoom 1, to force the initial zoom but regarding the same point that was used to zoom in.

As for the problem of restoring the image position in canvas (after panning for instance) it is as simple as removing the image, centering it in the canvas and re-adding it to the canvas as was done when adding first time:

  var img = canvas.getActiveObject();
  canvas.remove(img);
  canvas.centerObject(img);
  canvas.setActiveObject(img);
  canvas.add(img);

  canvas.renderAll();

Answer 3

See below snippet - here I do the same - zooming together, but degrouping the objects in case somebody clicks on it.

The problem to get to original object properties can be solved, ungrouping the group and creating copies of them and reattaching - a bit annoying, but the only solution I found.

<script id="main">      
    // canvas and office background
                var mainGroup;
                var canvas = this.__canvas = new fabric.Canvas('c');
                fabric.Object.prototype.transparentCorners = false;
                fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

                createOnjects(canvas);

                // events - zoom
                $(canvas.wrapperEl).on('mousewheel', function(e) {
                    var target = canvas.findTarget(e);
                    var delta = e.originalEvent.wheelDelta / 5000;
                    if (target) {
                        target.scaleX += delta;
                        target.scaleY += delta;

                        // constrain
                        if (target.scaleX < 0.1) {
                            target.scaleX = 0.1;
                            target.scaleY = 0.1;
                        }
                        // constrain
                        if (target.scaleX > 10) {
                            target.scaleX = 10;
                            target.scaleY = 10;
                        }
                        target.setCoords();
                        canvas.renderAll();
                        return false;
                    }
                });
                // mouse down
                canvas.on('mouse:up', function(options) {
                    if (options.target) {
                        var thisTarget = options.target; 
                        var mousePos = canvas.getPointer(options.e);
                        if (thisTarget.isType('group')) {
                            // unGroup
                            console.log(mousePos);
                            var clone = thisTarget._objects.slice(0);
                            thisTarget._restoreObjectsState();

                            for (var i = 0; i < thisTarget._objects.length; i++) {
                                var o = thisTarget._objects[i];
                                if (o._element.alt == "officeFloor")
                                    continue;
                                else {
                                    if (mousePos.x >= o.originalLeft - o.currentWidth / 2 && mousePos.x <= o.originalLeft + o.currentWidth / 2
                                        && mousePos.y >= o.originalTop - o.currentHeight / 2 && mousePos.y <= o.originalTop + o.currentHeight / 2)
                                        console.log(o._element.alt);
                                }
                            }

                            // remove all objects and re-render
                            canvas.remove(thisTarget);
                            canvas.clear().renderAll();             
                            var group = new fabric.Group();
                            for (var i = 0; i < clone.length; i++) {
                                group.addWithUpdate(clone[i]);
                            }
                            canvas.add(group);
                            canvas.renderAll();
                        }    
                    }
                });
                // functions
                function createOnjects(canvas) {
                    // ToDo: jQuery.parseJSON() for config file (or web service)
                    fabric.Image.fromURL('pics/OfficeFloor.jpg', function(img) {
                    var back = img.set({ left: 100, top: 100 });
                    back._element.alt = "officeFloor";
                    back.hasControls = false;
                    fabric.Image.fromURL('pics/me.png', function(img) {
                    var me = img.set({ left: -420, top: 275 });
                    me._element.alt = "me";
                    console.log(me);
                    var group = new fabric.Group([ back, me], { left: 700, top: 400, hasControls: false });
                    canvas.clear().renderAll();
                    canvas.add(group);
                    // remove all objects and re-render

                    });             
                });
                }
        </script>