fabricjs获取真实宽高

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

1.API介绍

  1. Rect的宽度

image.png 2. Rect的高度 image.png

  1. Rect的真实宽度和高度

image.png

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

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

image.png   返回的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);