Move, Scale and Crop an Image

This question is related to Crop Image in Preview Screen

I would like to crop an image in a specified size(320x160). I was able to create a preview screen, which contains an image from camera/gallery. Now what I am doing is I created a view with transparent border and I wanna move this view above the image preview. Then I will crop the image based on the coordinates of the moving view. For this I have did the following

app.js

var win = Ti.UI.createWindow({
    backgroundColor : 'white',
    layout  : 'vertical'
});
 
var btnShowCamera = Ti.UI.createButton({
    width   : Ti.UI.SIZE,
    title   : 'Show Camera',
    top     : '10%',
    source  : 'CAMERA'
});
 
win.add(btnShowCamera);
 
 
var btnShowGallery = Ti.UI.createButton({
    width   : Ti.UI.SIZE,
    source  : 'GALLERY',
    top     : '10%',
    title   : 'Show Gallery'
});
 
var imgvwPhoto = Ti.UI.createImageView({
    width   : 320,
    top     : '10%',
    height  : 160,
    image   : 'defaultPhoto.jpg'
});
 
win.add(imgvwPhoto);
win.add(btnShowGallery);
 
btnShowCamera.addEventListener('click', _showCamera);
btnShowGallery.addEventListener('click', _showCamera);
 
win.open();
 
function _showCamera(e){
    var Camera = require('ui/common/Camera');
    var camera = new Camera(e.source.source, {success:_onSelectImage, allowEditing: false});
}
 
function _onSelectImage(selectedImage){
    try{
        imgvwPhoto.image = selectedImage;
    }catch(error){
        alert(error);
    }
}

//Module is used to preview the image from camera
//cameraImage : represents the image from camera or gallery
//callbackObj : Object contains callback method, which displays an image preview
var CameraPreview = function(cameraImage, callbackObj){
    var platformHeight = Ti.Platform.displayCaps.platformHeight; 
    var platformWidth = Ti.Platform.displayCaps.platformWidth; 
 
    var _previewWindow = Ti.UI.createWindow({
        width   : Ti.UI.FILL,
        height  : platformHeight,
        top     : 0,
        backgroundColor : '#000',
    });
 
    var _previewView = Ti.UI.createView({
        width   : Ti.UI.FILL,
        height  : platformHeight-70,
        top     : 0
    });
 
    //Image view holds the preview
    var _previewImage = Ti.UI.createImageView({
        height  : Ti.UI.SIZE,
        width   : Ti.UI.SIZE,
        image   : cameraImage,
    });
 
    //Crop view is used to crop the image displayed
    var _cropView = Ti.UI.createView({
        borderColor : '#ffffff',
        borderWidth : 2,
        width       : 320,
        height      : 160
    });
 
    //Bottom bar containing the camera buttons and cancel button
    var _bottomBar = Ti.UI.createView({
        width   : Ti.UI.FILL,
        height  : 70,
        bottom  : 0,
        backgroundColor : 'black'
    });
 
    //Retake button 
    var _retakeButton = Ti.UI.createButton({
        title   : 'Retake',
        color   :'#fff',
        left    : '3%',
    });
    //Button to chose the photo
    var _chooseButton = Ti.UI.createButton({
        title   : 'Use Photo',
        color   :'#fff',
        right   : '3%',
    });
 
    var pinching = false;
    var previousY = null;
    var olt = Titanium.UI.create2DMatrix();
 
    _previewView.add(_previewImage);
    _previewView.add(_cropView);
    _bottomBar.add(_retakeButton);
    _bottomBar.add(_chooseButton);
    _previewWindow.add(_bottomBar);
    _previewWindow.add(_previewView);
 
    _previewWindow.open();
 
    _retakeButton.addEventListener('click', _retakePhoto);
    _chooseButton.addEventListener('click', _onUsePhoto);
    _cropView.addEventListener('touchmove', _onMoveCropView);
    _cropView.addEventListener('touchstart', _setInitialPoints);
    _cropView.addEventListener('pinch', _scaleImage);
    _cropView.addEventListener('touchend', function(){
        pinching = false;
    });
 
    function _retakePhoto(){
        _previewWindow.fireEvent('showCamera');
    }
 
    function _onUsePhoto(){
        var ImageFactory = require('ti.imagefactory');
        var newBlob = ImageFactory.imageAsCropped(_previewImage.image, {width:610, height:320, x :_cropView.rect.x, y: _cropView.rect.y });
        callbackObj.success(newBlob);
        _previewWindow.close();
    }
    function _onMoveCropView(event){
        if (pinching){
            return;
        }
        var deltaY = event.y - previousY;
 
        olt = olt.translate(0, deltaY);
        _cropView.animate({
            transform : olt,
            duration : 100
        });
    }
 
    function _setInitialPoints(event){
        previousY = event.y;
    }
 
    function _scaleImage(event){
        pinching = true;
            //TODO: SCALE IMAGE
    }
    return _previewWindow;
};
 
module.exports = CameraPreview;

1. User can open camera/galley by clicking the buttons

2. This will open the camera/gallery and once the photo is selected, the preview screen will be opened.

3. User will be able to move the crop rectangle and the photo will be cropped on clicking the use photo button

4. It will display the image

Now to my issues,

1. How can I prevent the white box from moving out of the image?

2. Cropping the image has some issues. i.e. it does not crop the image properly. What I am doing wrong?

3. Is there any other better way than using the tranform matrix?

It would be great if anyone can help me to get out of it...

The sample app is hosted here

Tx, Anand