moving an image around , doesnt work

Question

moving an image around , doesnt work

You must Login before you can answer or comment on any questions.

this is my code , it will get the image from either the camera , or from your gallery , then the image will be displayed on another window :

galleryImage.addEventListener('click', function(e) {
    Ti.Media.openPhotoGallery({
        success : function(event) {
            var imageTaken = Ti.UI.createImageView({
                image : event.media, //image from camera
                width: 'auto',  // image fixed with
                height: 500 // height will go according to the width by ratio ? hopefully ..    
 
            });
 
// object to store last position
var lastPosition = {
    set: function(point) {
        this.x = imageTaken.x;
        this.y = imageTaken.y;
    }
}
// object's position before it has been animated
var imagePosition = { top: imageTaken.top, left: imageTaken.left };
 
// starts the object movement
imageTaken.addEventListener('touchstart', function(e) {
    Titanium.API.info('Touch start: ' + JSON.stringify(e));
    // get absolute position at start
    lastPosition.set(e);
});
 
// during the object movement
imageTaken.addEventListener('touchmove', function(e) {
    Titanium.API.info('Moving: ' + JSON.stringify(e));
    // update the co-ordinates based on movement since last movement or touch start
    imagePosition.top += e.y - lastPosition.y; 
    imagePosition.left += e.x - lastPosition.x;
    imageTaken.animate({
        top: imagePosition.top, 
        left: imagePosition.left,
        duration: 1 
    });
    // reset absolute position to current position so next event will be relative to current position
    lastPosition.set(e.globalPoint);
});
 
// stops the object movement
imageTaken.addEventListener('touchend', function(e) {
    Titanium.API.info('Stop drag: ' + JSON.stringify(e));
});
 
// states the top and left values
// dragging starts at this point
imageTaken.top = imagePosition.top = 20;
imageTaken.left = imagePosition.left = 0;
 
            editWindow.add(imageTaken);
            editWindow.open();
        },
        cancel : function() {
        },
        error:function(error) {
            // called when there's an error
            var a = Titanium.UI.createAlertDialog({title:'Camera'});
            if (error.code == Titanium.Media.NO_CAMERA) {
                a.setMessage('Please run this test on device');
            } else {
                a.setMessage('Unexpected error: ' + error.code);
            }
            a.show();
        },
        saveToPhotoGallery : true,
        allowEditing : true,
        mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
    });
});

now i cant get it to move the image where i want it to go , when i try moving it i see in the "console" it shows :

[INFO] ....... "y":254,"x":95}

then after moving it :

[INFO] ....... "y":243,"x":136}

then the image is now stuck , i cant move it anywhere else ..

1 Answer

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Lots of things going on here.

First, what is going on here:

var lastPosition = {
    set: function(point) {
        this.x = imageTaken.x;
        this.y = imageTaken.y;
    }
}

You have this object with a set function and you pass in a point argument but never use that point to the position. You are using the imageTaken x and y coordinates, which haven't been set.

Next, you have this:

var imagePosition = { top: imageTaken.top, left: imageTaken.left };

You are using this imagePosition just to hold the top and left values of the image. If you didn't set them to begin with, chances are that they are equal to Nan

This is probably the most important:

imagePosition.top += e.y - lastPosition.y; 
    imagePosition.left += e.x - lastPosition.x;

You are setting the imagePosition to the touchpoint minus lastPoistion. Unfortunately lastPosition isn't set correctly because you haven't actually set any of the properties. So its a bunch of NaN values.

Finally you do this:

lastPosition.set(e.globalPoint);

Which again, doesn't use the actual point to set the position. And, globalPoint is deprecated. So just use the point calculations you've done above to set the new point.

You need to go through and print out what all your coordinates are both before and after you do the math on them to makes sure they are translating correctly.