fabricjs获取真实宽高

  在绘制图形的时候，获取图像的 width 和 height，发现并不能得到图形真实的宽高，现以矩形 Rect为例，解决这个小问题。

1.API介绍

1. Rect的宽度

2. Rect的高度

3. Rect的真实宽度和高度

2.为什么Fabric给了两套计算宽高的API呢？

  回答这个问题之前，请看下 rect.toJson()的返回值：

  返回的json字符串并没有返回真实的绘制信息的值，从getScaledWidth()和getScaledHeight()或者getBoundingRect() 返回值来看有如下关系：

getScaledWidth() = rect.width * (rect.scaleX || 1)
getScaledHeight() = rect.height * (rect.scaleY || 1)

真实情况是直接使用set('width',100) 设置的是Rect的width属性，手动拖动更改Rect大小设置的是Rect缩放值，即scaleX和scaleY的值。

3.解决办法

  有了上面的计算公式，在显示和重新设置宽高的时候，启用以下方式：

显示：

(rect.width || 1) * (rect.scaleX || 1)
(rect.height || 1) * (rect.scaleY || 1)

或者直接使用getScaledWidth()和getScaledHeight()或者getBoundingRect()

设置：

const orginWidth = value / (selectFabricObject.scaleX || 1);
selectFabricObject.set('width', orginWidth);

const orginHeight = value / (selectFabricObject.scaleY || 1);
selectFabricObject.set('height', orginHeight);