2013年6月8日土曜日

[Android] ジェスチャーでOpenGL簡易画像ビュアーに拡大縮小機能を追加する

How to enlarge and reduce images on gestures
前回前々回はOpenGL APIを使って画像を表示するアプリを作りました。
今回はジェスチャーのピンチイン・ピンチアウトの操作で画像を拡大縮小する機能を追加します。

このブログを書いている時点の開発環境は次の通りです。
・Windows8 (64bit)
・Eclipse Juno (32bit) (XP互換モードで起動)
・Android SDK r21.0.1

2点以上のタッチ操作が必要なので、Android2.2以降でマルチタッチ対応の端末が必要です
新品で発売されているAndroid端末なら中華Padも含めてほぼ対応していると思います。
Android2.2以降を対象にするため、OpenGL ES 2.0 のAPIも利用します。

画像は前々回と同じ256×256ピクセルのものを使います。


画像ファイル(image256x256.png)はプロジェクトの
res - drawable-mdpi
にコピーします。
resフォルダーの下に drawable-nodpi というフォルダーを作ってそこに画像ファイルをコピーしてさい
drawable-nodpi 以外のフォルダーに保存した画像は端末の解像度に応じて自動でスケーリングされるようです。(2014年5月31日訂正)

※ ic_launcher.png はAndroid-SDKにデフォルトでインストールされるアイコン画像です。

ピンチイン・ピンチアウトの操作に対応させるため OnScaleGestureListener インターフェイスを継承します。
※特別な権限(Permission)は不要なのでマニフェストは省略します。
Target SDK Version が8以上の設定でビルドできます。

Activityクラス (MainActivity.java)

画像を拡大縮小するに当たり GLU.gluPerspective の視野角を変化させます。

なぜ拡大縮小に視野角を利用したか
将来、複数の画像を表示させたいと思ってます。
複数の画像を並べて表示し拡大縮小した場合、それぞれの画像の位置関係を保ったまま画像を拡大縮小したように見せるためです。
拡大縮小の処理をそれぞれの画像のサイズを変える方法では、拡大した複数の画像が重ならない様に位置を調整する必要があり処理が複雑になってしまいます。
描く画像の位置関係を保ったまま拡大縮小した様に見せるため、視野角を変化させる方法を採用しました。
ただし視野角を変化させると立体的な見え方が不自然になることがあります。
このアプリは平面を表示するだけなので視野角を変化させても弊害はありません。
視野角を変化させるほか、カメラの位置を近づけたり遠ざけたりする方法もいいと思います。

OpenGL ES 2.0 のAPIである GLES20.glTexParameteri を使ってテクスチャーの表示方法をClipに指定します。

Android2.2にバージョンアップしたdocomoのSH-03C(シャープ)で動作確認しました。
フリックで移動、ピンチアウトで拡大、ピンチインで縮小です。

これでOpenGLで作ったメリットが発揮されました。

関連ブログ
[Android] OpenGLで簡易画像ビュアーを作る
[Android] OpenGLでプロ生ちゃんをアニメーションさせる
[Android] OpenGL ESで文字を表示する
[Android] OpenGLで頂点の多いポリゴンを扱うには
[Android] OpenGLでシャープ製端末用3D(立体視)アプリケーションを作る
[Blender] obj2opengl.plをJava用に改造する
[Windows8][Android] Can't bind to local 8600 for debugger

以上、参考になれば幸いです。

0 件のコメント:

コメントを投稿