跨设备的KineticJS图像注释工具

Question

我们在我们的一个跨平台应用程序（phonegap应用程序）中制作了一个图像注释工具，我们已经能够使用KineticJS使该工具正常工作。它是一个很棒的API。但是我们遇到了一个小问题。这是场景：

1. 如果说我有10个图像，我在其上做了一些注释，并将图层保存为sqllite中的JSON字符串。
2. 将我的sqllite与服务器同步。
3. 在页面加载时，检查服务器，拉出图层json，反序列化json，并将其添加到图像画布上。
4. 该方法非常有效，除非首先在iPad上创建图层并且检索发生在说iphone上。
5. 我们可以根据设备缩放图像并相应调整舞台大小，但注释图层中的对象具有完全不同的iPad坐标，因此它们不会出现在iPhone的正确位置。

如何摆脱这个问题？

Answer 1

嗨我偶然发现了这个问题并希望提供一些建议，尽管我还是相当新手。

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

1. 保留ipad坐标的宽高比，并为每个注释应用简单的常量变换:(即＆＃39; newCoord = oldCoord *（iphoneWidth / ipadWidth）;＆＃39;）。乘法器必须足够大以适应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)