问题
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:
- 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.
- Synced my sqllite with server.
- on page load, checked the server, pulled the layer json, deserialized the json, and added it over the image canvas.
- The approach works very well except if the layer was first created on say iPad and the retrieval happened on say iphone.
- 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.
How to get rid of this problem?
回答1:
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:
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.
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)}
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)
来源：https://stackoverflow.com/questions/22837585/kineticjs-image-annotation-tool-accross-devices