I am using wordpress plugin called "Woocommerce Product Designer" which includes a JavaScript library called fabicjs in version 1.4.9.
I need a way to show the width and height of an object in fabric after (or while) I re-scale them.
I made some adjustments directly in file fabric-all.min.js:
_beforeTransform: function (e, t) {
var myHeight = Math.floor(t.currentHeight);
var myWidth = Math.floor(t.currentWidth);
if(!jQuery("#size").length){
jQuery('<p id="size"></p>').insertBefore(".upper-canvas");
}
else{
jQuery("#size").html("<span>size: </span>"+myWidth +" x "+myHeight +" cm"+"<br>");
}
var n;
this.stateful && t.saveState(), (n = t._findTargetCorner(this.getPointer(e))) && this.onBeforeScaleRotate(t), t !== this.getActiveGroup() && t !== this.getActiveObject() && (this.deactivateAll(), this.setActiveObject(t, e))
},
It works but it shows values from previous transform right before current transform starts. In this way I need another action (for example simple click on object) to update to current values.
So I need either call some function which simulate click on object to update values or move my code to a different function which is called during (or after) transform and which has access to information about current object size.
I don't think it is a good idea to change the fabricJs source. It would be better to extend it or make some functions. I made you jsFiddle with how to get the width and height of the object while it is scaling.