在Titanium中实现图片的Rotate和Pinch Gesture

最新推荐文章于 2025-11-18 19:57:14 发布

最新推荐文章于 2025-11-18 19:57:14 发布 · 134 阅读

文章标签：

#appcelerator #titanium #mobile #gesture

Titanium 专栏收录该内容

86 篇文章

订阅专栏

本文介绍了一个针对Titanium Mobile平台的iOS手势识别模块，该模块能够实现在iPhone上对图片进行缩放、移动、旋转及PinchGesture操作。通过在view中设置rotateGesture与pinchGesture为true，即可响应rotate与pinch事件。

在iPhone中，图片的缩放，移动，旋转以及Pinch Gesture功能在Titanium Mobile中并不支持这样Gesture。这里有人做了一个Module来实现这个功能。（只限于iOS）

[url=https://github.com/atsusy/Gesture-Recognizer]Gesture-Recognizer[/url]

在view中将rotateGesture、pinchGesture设置为true后，就能处理rotate,pinch的事件了。

Gesture完成后，将触发rotateend、pinchend事件。

代码大概是下边这样：


var window = Ti.UI.createWindow({  
    orientationModes:[  
              Ti.UI.LANDSCAPE_LEFT,  
              Ti.UI.LANDSCAPE_RIGHT,  
              Ti.UI.PORTRAIT,  
              Ti.UI.UPSIDE_PORTRAIT  
             ]  
});  

var image = Ti.UI.createImageView({  
    image:"lena_std.jpg",  
    rotateGesture:true,  
    pinchGesture:true  
});  
var lastAngle = 0.0;  
var currentAngle = 0.0;  

var lastScale = 1.0;  
var currentScale = 1.0;  

image.addEventListener('rotate', function(e){  
    currentAngle = e.rotation / Math.PI * 180.0;  
    image.transform = Ti.UI.create2DMatrix()  
        .scale(lastScale*currentScale)  
        .rotate(lastAngle+currentAngle);  
});  

image.addEventListener('rotateend', function(e){  
    lastAngle = (lastAngle + currentAngle) % 360.0;  
    currentAngle = 0.0;  
});  

image.addEventListener('pinch', function(e){  
    currentScale = e.scale;  
    image.transform = Ti.UI.create2DMatrix()  
        .scale(lastScale*currentScale)  
        .rotate(lastAngle+currentAngle);  
});  

image.addEventListener('pinchend', function(e){  
    lastScale = (lastScale * currentScale);  
    currentScale = 1.0;  
});  

window.add(image);  
window.open();

效果图如下：
[img]http://dl.iteye.com/upload/attachment/0062/0312/3129deb3-b7f1-3f14-addd-f256092459dc.gif[/img]
[img]http://dl.iteye.com/upload/attachment/0062/0311/5e5de711-0192-3a0a-ab85-18d6b5769e26.gif[/img]
[img]http://dl.iteye.com/upload/attachment/0062/0314/aa4e17c7-cf8f-3a33-8c40-02410236001f.gif[/img]