KineticJS图像注释工具 [英] KineticJS image annotation tool accross devices

问题描述

我们在我们的跨平台应用程序（phonegap应用程序）中创建了一个图像注释工具，我们已经能够使用KineticJS来使该工具正常工作。它的一个伟大的API。但是我们有一个小问题。这里是场景：

We have made an Image annotation tool in one of our cross platform apps (phonegap app), we have been able to get the tool working using KineticJS. Its a great API. But we have a small problem. Here is the scenario:

1. 如果说我有10个图像，我做了一些注释，并将图层保存为JSON字符串说sqllite


2. 在服务器上同步我的sqllite。


3. 在网页加载时检查服务器，拉取图层json，反序列化json，


4. 该方法非常有效，除非该图层首次在iPad上创建，并且检索发生在iphone上。


5. 我们能够根据设备缩放图像，并相应地调整大小，但注释图层中的对象具有完全不同的来自iPad的坐标，因此它们不会显示在iPhone的正确位置。

1. If say i have 10 images on which i did some annotation, and saved the layer as JSON string in say sqllite for each image.
2. Synced my sqllite with server.
3. on page load, checked the server, pulled the layer json, deserialized the json, and added it over the image canvas.
4. The approach works very well except if the layer was first created on say iPad and the retrieval happened on say iphone.
5. We are able to scale the image according to the device and resize our stage accordingly, but the objects in annotation layer have completely different coordinates coming from iPad so they do not show up at the right places in iPhone.

如何摆脱这个问题？

推荐答案

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

Hi I stumbled upon this question and wish to offer some advice, although I am still fairly novice.

所以你可能想考虑的只是写一个简单的算法可以做两个不同的事情：

So what you might want to consider is just writing a simple algorithm that could do two different things:

1. 从ipad保留坐标的宽高比，并为每个注释应用简单的常量变换： （即'newCoord = oldCoord *（iphoneWidth / ipadWidth）;'）。该乘法器必须足够大以适应iphone屏幕内的图像，并且如我想象的ipad的相对方形性质将使得更小的图像在iphone的较大的宽高比上。

1. Retain the aspect ratio of coordinates from the ipad and apply a simple constant transformation for each annotation: (i.e. 'newCoord = oldCoord*(iphoneWidth/ipadWidth);' ). The multiplier would have to be large enough to fit the image within the iphone screen, and as I imagine the relative square nature of the ipad would make for smaller images on iphone's larger aspect ratio.

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

At the original time of annotating, or sometime right after step 1, you could just make the annotations on a 0 to 1 basis (float i guess?) before writing to the sqllite; 1 being the max length of a side and 0 being the 0th coordinate. This way you could just maintain any ratio. Multiply by the displaying frame's width and height (step 5). For example if you have three different points annotated along one side, you could store those sides as

{p1->（0.0,0.33），p2->（0.0,0.66），p3->（0.99）}

只要边界保持相同，这些点就应该与最终图像的变换成比例。如果你的最终分辨率是1000p x 1000p，你只需乘以1000得到最后一点。所以你得到 p1->（0.0,330p）

These points should scale with transformation of the final image as long as the bounds are kept the same. If your final res was to be 1000p x 1000p, youd just multiply by 1000 to get the final point. so youd get p1->(0.0,330p)

这篇关于KineticJS图像注释工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！