Finding an (x,y) coordinate on an image
All,
For a class project, our application will include geolocation on a png map of a theme park. As we're trying not to use Google Maps overlays for the program, we'd like to find a way to find a specific x,y pixel position on the image.
Does anyone know how to place a label on a specific pixel position on the image? For instance, on a 1024x768 image, we'd like to find out how to place a label at 423,129.
Any thoughts on this?
Thanks!
2 Answers
-
You can place a label or any other view type on an x,y position of a parent view by adding it as a child:
var myLabel = Ti.UI.createLabel({width:150, height:30, top: 423, left:129, text:'Test'}; //width & height v important var imageContainer = Ti.UI.createView({backgroundImage:'/images/test.png', width:1024, height:768}); imageContainer.add(myLabel);
Use e.globalPoint for a click x & y and you can animate a label or view around the image to simulate moving across the theme park..
Good luck ;)
-
Works great, but I'm running into 2 issues;
- I can't seem to get our map displaying where we can scroll around it without using a webView (as we're using a 5617x4084 pixel image)..
- When I use the webView, the label I've created moves around on the map when I scroll around. Any ideas?
var mapAnimals = Ti.UI.createWebView({url:'animals.png', transform:scale, size:{ width:800, height:900 }, top:0, scalesPageToFit:true}); winAnimals.add(mapAnimals); var myLabel = Ti.UI.createLahttp://developer.appcelerator.com/question/130965/finding-an-xy-coordinate-on-an-image#bel({ width:150, height:30, top: 423, left:129, text:'Test'}); //width & height v important winAnimals.add(myLabel);