Javascript Appcelerator:在视图中处理图像移动变换/动画

Javascript Appcelerator:在视图中处理图像移动变换/动画,javascript,appcelerator,titanium-mobile,Javascript,Appcelerator,Titanium Mobile,我试图重现用两个手指在视图上移动图像的可能性,就像Instagram中的贴纸一样(这里有视频:) 我使用变换功能,但当我旋转图像时,我无法移动或缩放它,图像比例返回到1 对于像Instagram一样流畅的ba,我错过了什么 我尝试以下代码: function start() { // TAB PAGE SELECTION var win = Titanium.UI.createWindow({ backgroundColor:'#000', });

我试图重现用两个手指在视图上移动图像的可能性,就像Instagram中的贴纸一样(这里有视频:)

我使用变换功能,但当我旋转图像时,我无法移动或缩放它,图像比例返回到1

对于像Instagram一样流畅的ba,我错过了什么

我尝试以下代码:

function start() {

    // TAB PAGE SELECTION
    var win = Titanium.UI.createWindow({
        backgroundColor:'#000',
    });
    win.backgroundcolor='#000000';
    win.navTintColor = "black";
    
    var overlay = Titanium.UI.createView();
    var overlay1 = Titanium.UI.createImageView();
    var imageUnicorn = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'/images/pika.png');

    overlay1.image = imageUnicorn;
    
    
    var olt  = Ti.UI.createMatrix2D();
    var Count = 0;
    overlay1.addEventListener('click', function(e) {
    Count = Count + 1;
    switch (Count) {
        case 0:
        overlay1.transform = Ti.UI.createMatrix2D().rotate(0);
        break;
        case 1:
        overlay1.transform = Ti.UI.createMatrix2D().rotate(90);
        break;
        case 2:
        overlay1.transform = Ti.UI.createMatrix2D().rotate(180);
        break;
        case 3:
        overlay1.transform = Ti.UI.createMatrix2D().rotate(270);
        Count = -1;
        break;
    }
});

// MOVING
var curX, curY;

overlay1.addEventListener('touchstart', function(e) {
    curX = e.x;
    curY = e.y;
});
 
var deltaX , deltaY;
overlay1.addEventListener('touchmove', function(e) {
    deltaY = e.y - curY;
    deltaX = e.x - curX;

    olt = olt.translate(deltaX, deltaY);
    overlay1.animate({
        transform : olt,
        duration : 10
    });
});


// PINCH TO ZOOM
overlay1.addEventListener('pinch', function(e){ 
    olt = Ti.UI.createMatrix2D().scale(e.scale);
    overlay1.animate({
        transform : olt,
        duration : 10
    }); 
});




    overlay.add(overlay1);

    Ti.Media.showCamera({
        allowEditing : false,
        showControls : false,
        overlay : overlay,
        mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
        autohide : false,
    });


    return win;
};

module.exports = start;