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();

をし、その行列を取り、にそれを変換するためのファブリックUTILがあります最終的な値：

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

今finalValuesが解決angleを含むオブジェクトになり、scaleX号、scaleY号、skewX号、skewY号、translateX号、translateY号である。

translateX,translateY通常のfabricObjectのleftとtopにマップすることに注意してください。