KineticJS图像标注工具集成设备

Question

我们已经在我们的一个跨平台应用程序(phonegap应用程序)中制作了一个图像注释工具，我们已经能够让该工具使用KineticJS。这是一个很好的API。但我们有个小问题。下面是一个场景：

1. 如果假设我有10个图像，我对其进行了一些注释，并将该层保存为JSON字符串，为每个图像设置sqllite。
2. 和服务器同步了我的sqllite。
3. 在页面加载时，检查服务器，提取json层，反序列化json，并将其添加到图像画布上。
4. 这种方法非常有效，除非该层最初是在例如iPad上创建的，而检索是在iphone上进行的。
5. 我们可以根据设备缩放图像，并相应地调整舞台大小，但是注释层中的对象与iPad完全不同，因此它们没有出现在iPhone中的正确位置。

如何解决这个问题？

Answer 1

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

因此，您可能需要考虑的是编写一个简单的算法，它可以做两件不同的事情：

1. 从ipad中保留坐标的纵横比，并为每个注释应用一个简单的常量转换：(即'newCoord = oldCoord*(iphoneWidth/ipadWidth ) ;‘)。乘法器必须足够大，以适应iphone屏幕内的图像，就像我想象的那样，ipad的相对平方特性会在iphone的更大的纵横比上产生更小的图像。
2. 在注释的最初时间，或者在第1步之后的某个时候，您可以只在0到1的基础上进行注释(我猜是浮动吗？)在写入到sqllite之前；1是边的最大长度，0是第0坐标。这样你就可以维持任何比率。乘以显示帧的宽度和高度(步骤5)。例如，如果沿一侧注释了三个不同的点，则可以将这些边存储为

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

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