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

时间:2015-12-16 06:09:13

标签: javascript android jquery html5-canvas fabricjs

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

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

现在我看到的是Fabricjs根据窗口左,顶部,宽度,高度保存坐标。但是andriod应用程序需要根据图像来确定坐标,而这些坐标并不能提供。

有任何建议如何实现这一目标?

如果有人不理解,请告诉我。 它是一个基本而简单的陈述,因此不会添加任何小提琴或代码。

1 个答案:

答案 0 :(得分:1)

保存到数据库之前

执行此操作:

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

in

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)而rect有tl (80,110),则表示相对于图片的rect坐标为(80-45, 110-80) = (35, 30)