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

Posted 2023-05-09

【中文标题】fabricjs：缩放后如何显示对象大小

【英文标题】：fabricjs: how to show object size after scaling

【发布时间】：2015-08-23 12:28:55

【问题描述】：

我正在使用名为“Woocommerce Product Designer”的 wordpress 插件，其中包含一个 1.4.9 版中名为 fabicjs 的 javascript 库。

在我重新缩放对象之后（或同时），我需要一种方法来显示织物中对象的宽度和高度。

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

它可以工作，但它会在当前转换开始之前显示先前转换的值。这样，我需要另一个操作（例如简单地单击对象）来更新为当前值。

所以我需要调用一些模拟点击对象的函数来更新值，或者将我的代码移动到另一个函数，该函数在转换期间（或之后）调用并且可以访问有关当前对象大小的信息。

【参考方案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()));
);

【讨论】：

非常感谢。这正是我想要的。实际上我是 javascript 的初学者，我直接更改了 fabricJs 源代码是因为我懒得去了解如何将它用作 API，即使我知道它要好得多