时间戳

首页 > 解决方案 > 在织物画布中查找原始 (x,y) 新坐标

fabricjs - 在织物画布中查找原始 (x,y) 新坐标

问题描述

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

作为第一个“层/组”，我将所有托架添加为包含矩形和文本的组，它们都位于相同的 (x,y) 处。它们还设置了一个角度以适应它们在空间中的方向。

作为第二个“层/组”，我添加了包含圆圈和文本的组，代表海湾的问题数量。(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) 以便我可以在这些坐标处添加我的问题组？

[编辑]

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

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 }

在此处输入图像描述

标签： fabricjs

解决方案

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

       { 
        [...]
        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;
    
        [...]
      }

由于矩阵带来了矩形的中心点，我可以通过减去它的宽度和高度来得到角，然后变换坐标以找出矩阵放置它的位置。

推荐阅读