fabricjs：如何在縮放后顯示對象大小

Question

我正在使用名為“Woocommerce Product Designer”的wordpress插件，其中包含一個名為fabicjs的JavaScript庫，版本為1.4.9。

我需要一種方法來顯示在重新縮放它們之后（或同時）織物中物體的寬度和高度。

我直接在文件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))
},

它可以工作，但它在當前變換開始之前顯示前一個變換的值。 這樣我需要另一個動作（例如簡單點擊對象）來更新當前值。

因此，我需要調用一些函數來模擬點擊對象來更新值，或者將我的代碼移動到一個不同的函數，該函數在轉換期間（或之后）調用，並且可以訪問有關當前對象大小的信息。

Answer 1

我不認為更改fabricJs源是個好主意。 擴展它或做一些功能會更好。 我讓你jsFiddle如何獲得對象在縮放時的寬度和高度。

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