I am using wordpress plugin called "Woomerce 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 am using wordpress plugin called "Woomerce 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.

• javascript
• jquery
• wordpress
• woomerce
• fabricjs

1 Answer 1

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.

canvas.on('object:scaling', function(){
    var obj = canvas.getActiveObject();
    $('#rect-width').val(Math.floor(obj.getWidth()));
    $('#rect-height').val(Math.floor(obj.getHeight()));
});