Fabric.js：如何计算旋转组内对象的画布相对位置

Question

无论您使用什么角度旋转包含矩形的组，矩形在其组内的位置都会保持不变。

这意味着必须使用角度和内部组参数计算在画布相对单位中旋转后矩形的位置。但是如何？

当组未旋转时，位置计算如下所述：How to get the canvas-relative position of an object that is in a group?。

我已经看过几次提到你可以使用转换矩阵，但还没有找到一个参考/例子来解释它。

任何帮助，非常感谢。

Answer 1

要获得组所选对象的已解析位置，您需要首先从对象获取transformMatrix：

var matrix = fabricObject.calcTransformMatrix();

然后有一个fabric util来获取该矩阵并将其转换为最终值：

var finalValues = fabric.util.qrDecompose(matrix);

现在finalValues将是一个包含已解决的angle，scaleX，scaleY，skewX，skewY，{{1}的对象}，translateX。

请注意，translateY，translateX映射到普通fabricObject上的translateY和left。