fabric.js - 重新调整尺寸后获得新高度

Question

我创建组：

var text    = new fabric.Text(textValue,{left: 20, top: 30, fontSize:25});
var rect    = new fabric.Rect({
                    width       : text.get('width') + 40,
                    fill        : "#FFFFFF",
                    height      : 100,
                    stroke      : '#000000',
                    strokeWidth : 1

                  });

    var myGroupObj = new fabric.CustomGroup([  rect,text ], {
      left      : 0,
      top       : 0,
    });

现在，当我手动调整组的大小并想获得一个新的高度时。

myGroupObj.get('height')

我总是最后一个 (100)。 有什么想法来获得新的高度，好吗？

Answer 1

当你设置新的宽度或新的高度时，别忘了更新scaleX和scaleY：

canvas.on("object:modified", function (e) {
    var activeObject = e.target;
        if (!activeObject) {
            return;
    }
    var newWidth = activeObject.width * activeObject.scaleX ;
    var newHeight = activeObject.height * activeObject.scaleY ;

    activeObject.width = newWidth;
    activeObject.height = newHeight;

    activeObject.scaleX = 1;
    activeObject.scaleY = 1;                
});

Answer 2

您应该调用getHeight() 函数，而不是访问.height 属性，它会为您提供fabric.js 对象的实际 高度（您在屏幕上看到的高度）。在您在 jsfiddle 上创建的代码中，要获得实际高度，您应该将行 alert(activeObject.height); 更改为 alert(activeObject.getHeight());，您会看到不同之处。

干杯， 贡萨罗·加布里埃尔

Answer 3

在手动调整http://jsfiddle.net/islyoung2/7Tf22/4/ 的大小后，我找到了获取对象新高度的解决方案。

var newHeight = myGroupObj.get('height') * myGroupObj.get('scaleY')

谢谢。