Appcelerator:Finding current position of Image

Question

I am finding the current X and Y position in 'touchend' event. Now say the original position of ImageView is ; left=100 and top=100. On touchend it just gives value in 2 digits that is either 8,10 or 9,11 etc. Now I am not sure what's the offset of image view. If it is lastLeft+x and lastTop+y then it's not gonna work at all. What all I want to save current position of Image at TouchEnd in Db so that I could restore it later.

Kindly help me

Answer 1

My original answer was incorrect: here's an updated version.

The globalpoint property in the event object contains the coordinates on the screen that the user clicked on, while the x and y properties are the coordinates within the view at which the user clicked. By taking one away from the other (and, depending on whether your screen has a status bar, allowing for that too) you can work out the top/left of the object after an animation finishes.

I've put together a demo that works in 1.6.0 which demonstrates this (just create a new project and replace app.js with the following code)

// Windows
var window = Ti.UI.createWindow();

var image = Ti.UI.createImageView({
    url: 'KS_nav_ui.png',
    width: 100,
    height: 100,
    top: 0,
    left: 0,
    backgroundColor: '#f00'
});

image.addEventListener('touchstart', function (e) {

    var left = e.globalPoint.x - e.x,
        top = e.globalPoint.y - e.y - 20; // The 20 accounts for status bar

    Ti.API.info('Starting left: ' + left);
    Ti.API.info('Starting top: ' + top);

});

image.addEventListener('touchmove', function(e) {

    var newX = e.x + image.animatedCenter.x - image.width/2;
    var newY = e.y + image.animatedCenter.y - image.height/2;

    image.animate({center:{x:newX,y:newY}, duration:1});

});

image.addEventListener('touchend', function (e) {

    var left = e.globalPoint.x - e.x,
        top = e.globalPoint.y - e.y - 20; // The 20 accounts for status bar

    Ti.API.info('Finishing left: ' + left);
    Ti.API.info('Finishing top: ' + top);

});

window.add(image);

window.open();