如何在fabric js中使用image.centerObject（）使对象居中后获取图像坐标

Posted 2023-03-25

【中文标题】如何在fabric js中使用image.centerObject（）使对象居中后获取图像坐标

【英文标题】：How to get image coordinates after centering the object using image.centerObject() in fabric js

【发布时间】：2016-03-22 04:14:21

【问题描述】：

我在图像上绘制一个矩形，然后将两者的坐标保存到 mysql 数据库表中。

然后我必须从 Andriod APP 中检索相同的图像并覆盖矩形 它不会知道 FabricJS 上的任何内容。 它只会知道图像和矩形的坐标。 幸运的是，对于图像来说这不是问题，因为它可以使用一些纵横比算法来维护。 但是如何获取 Rectangle 的坐标，以便正确渲染。

现在我看到的是 Fabricjs 根据窗口左侧、顶部、宽度、高度保存坐标。但是 andriod 应用程序需要根据 image 的坐标，而 fabricjs 不提供。

有什么建议可以实现吗？

如果有人不明白，请告诉我。 它是一个基本且简单的语句，因此不添加任何小提琴或代码。

【参考方案1】：

在保存到数据库之前执行以下操作：

image.setCoords();
rect.setCoords();

在

image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br

和

rect.oCoords.tl, rect.oCoords.tr, rect.oCoords.bl, rect.oCoords.br

您会发现 4 个对象，它们的 x 和 y 坐标都代表您在该对象的绝对位置。 tl 代表Top Left，br 代表Bottom Right 等等。

你应该没有问题然后做一些减法并找到两个对象的相对坐标。

示例：

如果图像有tl (45,80)，而矩形有tl (80,110)，则表示相对于图像的矩形坐标为(80-45, 110-80) = (35, 30)

【讨论】：

不，根据屏幕给出坐标，而不是图像。 android 团队负责使用一些纵横比渲染图像。所以，我不能强迫他们使用 image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br

这些是相对于画布原点 (0, 0) 而不是屏幕的位置。这是您可以从 fabricjs 画布中检索到的唯一现成数据，以便在其他地方重新渲染相同的情况。

答案满足范围，并给了我一些提示来完成我的工作。因此，接受它。谢谢。 我还有一个问题是如何知道你是否在哪个轴上重新调整大小 (tl, tr, bl , br) 。对此有什么想法吗？

在 canvas.on("object:resizing") 检查目标 originx 和 originy。您通常通过对角调整大小。同样在较新的 fabricjs 版本中，有一个变量会告诉你这一点。必须找出答案。