fabricjs：如何在缩放后显示对象大小

Question

我正在使用名为“Woocommerce产品设计师”的WordPress插件，其中包括一个名为fabricjs的JavaScript库，版本为1.4.9。 我需要一种方法，在重新缩放对象后（或同时进行），显示fabric中对象的宽度和高度。 我直接在文件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))
},

它能够工作，但会在当前变换开始之前显示上一个变换的值。因此我需要进行另一个操作（例如简单点击对象）以更新为当前值。 所以我需要调用一些函数来模拟点击对象以更新值，或者将我的代码移动到另一个函数中，在变换期间（或之后）调用该函数，并且可以访问有关当前对象大小的信息。

- Pavel Němec

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()));
});

- Nistor Cristian

---

非常感谢。这正是我想要的。实际上，我是JavaScript的初学者，直接更改fabricJs源代码的原因是因为我懒得找出如何将其用作API，尽管我知道这样做会更好。 - Pavel Němec