javascript - 如何在fabric js中使用image.centerObject()将对象居中后获取图像坐标

Question

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

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

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

有什么建议可以实现这一目标吗？

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

Answer 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 代表左上，br 代表右下，依此类推。

那么进行减法并找到两个对象的相对坐标应该没有问题。

示例:

如果图像有 tl (45,80) 并且矩形有 tl (80,110) 则意味着相对于图像的矩形坐标为 (80-45, 110-80) = (35, 30)