2011年9月25日日曜日

Titanium Mobileで回転&ピンチジェスチャ


iPhoneで回転とかピンチイン/アウトっていうジェスチャはマイナーなジェスチャで、あまり使う場面がありません。(UXとしても推奨されない部類?)

とはいえ、Titanium Mobileでこのジェスチャがサポートされていない(ですよね!?)のもどうかと思い、使われる事はないであろうと分かっていながらモジュールを作ってしまいました。

相変わらずiOSのみ対応です。

OpenCVでは有名なlenaさんの画像を回したり拡大したり縮小したりできるデモ。


Gesture Recognizer Demo from Atsushi Kataoka on Vimeo.

ViewにrotateGesture、pinchGestureというプロパティをtrueで設定すると、rotateとかpinchっていうイベントが発生します。
ジェスチャ終了時には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();

MarketplaceにFreeで公開したいのですが、アイコンとイメージを作るのが面倒で止まっています。
アイコンとイメージは何の報酬もありませんが緩く募集します。

ソースコードは https://github.com/atsusy/Gesture-Recognizer