KineticJS图像标注工具跨设备

我们在其中一个跨平台应用程序（phonegap app）中制作了一个图像注释工具，我们已经能够使用KineticJS获得该工具的工作。 它是一个伟大的API。 但是我们有一个小问题。 这是情景：

1. 如果说我有10个图像，我做了一些注释，并将图层保存为每个图像的sqllite中的JSONstring。
2. 将我的sqllite与服务器同步。
3. 在页面加载，检查服务器，拉动图层json，反序列化json，并将其添加到图像canvas上。
4. 该方法工作得很好，除非该图层是在iPad上首次创build的，而检索是在iphone上进行的。
5. 我们可以根据设备缩放图像并相应地调整舞台大小，但注释层中的对象与iPad完全不同的坐标，所以它们不会显示在iPhone的正确位置。

如何摆脱这个问题？

Answer 1

您好我偶然发现这个问题，并希望提供一些build议，虽然我还是相当新手。

所以你可能想要考虑的只是写一个简单的algorithm，可以做两件事：

1. 保留ipad坐标的纵横比，并为每个注释应用一个简单的常量转换（即newCoord = oldCoord *（iphoneWidth / ipadWidth）;'）。 乘数将必须足够大，以适应iPhone屏幕内的图像，并且正如我想象的那样，ipad的相对方形本质会使iphone的较大纵横比上的较小图像成为可能。

2. 在注释的原始时间，或在第1步之后的某个时间，您可以在写入sqllite之前，在0到1的基础上进行注释（浮点数我猜？）。 1是一边的最大长度，0是第0坐标。 这样你可以保持任何比例。 乘以显示框架的宽度和高度（步骤5）。 例如，如果沿着一边注释了三个不同的点，则可以将这些边存储为

{p1->(0.0,0.33),p2->(0.0,0.66),p3->(0.99)}

只要边界保持不变，这些点应该随着最终图像的变换而缩放。 如果你的最终分辨率是1000p x 1000p，你只需乘以1000就可以得到最终的结果。 所以你得到p1->(0.0,330p)