Fabric.js - object cannot drag/move after centered

Question

I am using the farbric.js for editing images in an app. The image should be able to resize, move/drag, and rotate. The problem is when I rotate the image (by click on the button), it will not in the center of it canvas. So I have to use centerObject() to make it works. However, after I done this, the image cannot be drag any more.

this is the function that handling the rotation (it is in a class):

 rotationset : function(angle, offsetX, offsetY){
    // this.obj is the origin object  
    this.Obj.left = offsetX;
    this.Obj.top =  offsetY;
    this.Obj.angle = angle;
    this.Obj.center();//center the image
    //this.canvas also initialized on load.
    this.canvas.calcOffset();
    this.canvas.renderAll();

}

So, what is the problem? Any other fix for this?

Answer 1

Documentation say :

You might need to call setCoords on an object after centering, to update controls area.

So doing this.Obj.setCoords(); after this.Obj.center(); should do the trick.