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