在 fabric canvas 中查找原始 (x,y) 新坐标

Question

我正在使用 fabricjs 构建二维仓库地图，我将他们的货架系统显示为一系列矩形。

作为第一个“layer/group”，我将所有间隔添加为包含矩形和文本的组，两者都位于相同的 (x,y)。他们还设置了一个角度以适应他们在 space.

中的方向

作为第二个“layer/group”，我添加了包含圆圈和文本的组，代表海湾的问题数量。 (x,y) 也适合海湾。这样，我所有的问题总是在海湾的顶部，并且组的中心适合海湾的旋转角。

在第一次绘制时，一切都很好对齐。一旦它们显示在页面上，用户就可以创建新问题，所以我试图定位适合原始 (x,y) 的问题组，但由于它都可以平移和缩放，我很难过把它放在它应该在的地方。

我一直在看他们关于 transforms 的解释，但我想不通谁才是老大，我想嵌套组可能也是我一头雾水的原因。

通过做：

const gMatrix = matchingBay.group.calcTransformMatrix(false);
const targetToCanvas = fabric.util.transformPoint(matchingBay.aCoords.tl, gMatrix);

我在海湾，但在“团体”角落，这不是我要找的。 (x,y) 将是组中矩形的角之一，可能已旋转。

通过在此代码中指定原始 (x,y) 将使我远离实际绘画区域。

所以，我的问题是，如何获得转换后的 (x,y)，以便我可以在这些坐标处添加我的问题组？

[编辑]

根据spring的建议，让我意识到我可以使用旋转矩形的变换来找到它的坐标，所以我尝试了：

const rect = matchingBay.getObjects()[BAY_RECTANGLE_INX];
const gMatrix = rect.calcTransformMatrix();
const targetToCanvas = fabric.util.transformPoint(rect.aCoords.bl, gMatrix);

左下角是我要添加新圆的地方。旋转后，左下现在是右下。但我还是离开了。如图所示，红圈应该在拐角处。似乎还没有应用旋转。

qrDecompose 给了我一些看起来正确的东西：

{angle: -90, scaleX: 1, scaleY: -1, skewX: 0, skewY: 0, translateX: 6099.626027314769, translateY: 4785.016008065199 }

Answer 1

我意识到我的想法不对。由于我已经有了矩形，我只需要自己进行变换并自己解决角问题，以下解决了我的问题：

       { 
        [...]
        const rect = matchingBay.getObjects()[BAY_RECTANGLE_INX];
        const gMatrix = rect.calcTransformMatrix();
        const decomposed = fabric.util.qrDecompose(gMatrix);
    
        const trans = fabric.util.transformPoint(new fabric.Point((decomposed.scaleX * -rect.width) / 2, (decomposed.scaleY * rect.height) / 2), gMatrix);
        const top = trans.y;
        const left = trans.x;
    
        [...]
      }

由于矩阵带的是矩形的中心点，所以我可以通过宽高相减得到角，然后变换坐标，找出矩阵放在哪里。

在 fabric canvas 中查找原始 (x,y) 新坐标

Find original (x,y) new coordinates in fabric canvas

fabricjs