如何获得旋转画布矩形的实际宽度答案

【问题标题】：How to get the actual width of a rotated canvas rectangle如何获得旋转画布矩形的实际宽度
【发布时间】：2018-06-01 14:33:09
【问题描述】：

我正在使用 konva js 制作transformable rectangle。我可以使用访问矩形的宽度 rect1.getClientRect().height .但是，当我旋转矩形时，宽度属性正在发生变化。我相信 width 属性给出了矩形画布容器的整体水平长度。有什么办法可以得到旋转矩形的实际宽度。这是jsfiddle

【问题讨论】：

您能说明一下您需要什么吗？您的矩形是 100 x 90。当您旋转矩形时，形状的宽度将保持为 100。getClientRect 将给出边界矩形的宽度，这自然会有所不同。那么你想知道什么？老实说，我想提供帮助，但不清楚您需要什么。
@VanquiishedWombat 抱歉回复晚了。我需要形状的宽度，而不是转换后的边界矩形。我提供的示例给出了边界矩形的宽度而不是形状的宽度

标签： javascript canvas konvajs

【解决方案1】：

Konva 对象有一个attrs 属性：rect1.attrs.width * rect1.attrs.scaleX

https://jsfiddle.net/8gack34s/4/

还有 attrs.rotation 可以用来进行数学计算。

Konva 警告：Konva.Transformer 目前处于试验阶段，可能存在错误。请向 GitHub 存储库报告任何问题。

【讨论】：

我已经增加了矩形的大小，但它仍然显示 100,19（不是更新矩形的大小）
那就试试rect1.attrs.width * rect1.attrs.scaleX