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

How to get image coordinates after centering the object using image.centerObject() in fabric js

我在图像上绘制一个矩形,然后将两者的坐标保存到 Mysql 数据库 table。

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

现在我看到的是Fabricjs根据window left,top,width,height保存坐标。但是 andriod app 需要根据 image 的坐标,而 fabricjs 没有提供。

有什么实现方法的建议吗?

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

在保存到数据库之前执行此操作:

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 Leftbr代表Bottom Right等。

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

示例:

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