Mtk's Blog: [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)

package jp.fujiu.GLImageViewGestures;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.GLU;
import android.opengl.GLUtils;
import android.opengl.GLSurfaceView.Renderer;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Bitmap.Config;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.OnScaleGestureListener;

public class MainActivity extends Activity implements OnScaleGestureListener {
 private MainSurface surface = null;
 private ScaleGestureDetector scaleGgesture= null;
 private float scaleFactor = 1;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  surface = new MainSurface(this);
  surface.setRenderer(surface);
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
 }
 
 @Override
 protected void onResume() {
  super.onResume();
  
  if (scaleGgesture==null){
   scaleGgesture = new ScaleGestureDetector(getApplicationContext(), this);
  }
 }

 // タッチイベント処理
 private float touchedX = 0;
 private float touchedY = 0;

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  //ジェスチャーの判定
  scaleGgesture.onTouchEvent(event);
  
  //マルチタッチなら画像移動い
  if (event.getPointerCount()==1){
   switch (event.getAction()) {
   case MotionEvent.ACTION_MOVE:
    float x = event.getX();
    float y = event.getY();
    
    surface.setCameraPotision((touchedX - x), (touchedY - y));
    touchedX = x;
    touchedY = y;
    break;
   case MotionEvent.ACTION_DOWN:
    touchedX = event.getX();
    touchedY = event.getY();
    break;
   }
  }
  return true;
 }
 
 @Override
 public boolean onScale(ScaleGestureDetector detector) {
  scaleFactor *= detector.getScaleFactor();
  surface.setScale(scaleFactor);
  return true;
 }

 @Override
 public boolean onScaleBegin(ScaleGestureDetector detector) {
  return true;
 }

 @Override
 public void onScaleEnd(ScaleGestureDetector detector) {
  scaleFactor *= detector.getScaleFactor();
 }
 
 // OpenGLのViewクラス
 private class MainSurface extends GLSurfaceView implements Renderer {
  //視野関連
  private float fovy = 45f;
  private float aspect;
  
  // カメラの位置
  private float cameraX = 0;
  private float cameraY = 0;

  //カメラの移動量
  private float cameraDist;

  // 頂点座標
  private float apexs[] = new float[] { -1f, -1f, 1f, -1f, -1f, 1f, 1f,
    1f, };
  // 頂点座標バッファ
  private FloatBuffer apexBuff;

  // 頂点テクスチャ
  private float coords[] = new float[] {
    0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, };
  
  // 頂点テクスチャバッファ
  private FloatBuffer coordsBuff;

  private int[] textures = new int[1];
  private int textureId = 0;

  void setCameraPotision(float x, float y) {
   //移動量が極端に大きい場合は無視
   if (Math.abs(x)> 100 || Math.abs(y)> 100){
    return;
   }
   
   cameraX +=  x/cameraDist;
   cameraY += -y/cameraDist;
   
   //画像が画面の外に出ない様にブレーキ
   if (cameraX> 1)cameraX =  1;
   if (cameraX<-1)cameraX = -1;
   if (cameraY> 1)cameraY =  1;
   if (cameraY<-1)cameraY = -1;
  }
  
  void setScale (float scale){
   this.fovy = 45f / scale;
   //画像の極端な拡大縮小を防ぐ
   if(this.fovy > 150) this.fovy = 150;
   if(this.fovy <  10) this.fovy =  10;
  }

  public MainSurface(Context context) {
   super(context);
  }

  @Override
  public void onSurfaceCreated(GL10 gl, EGLConfig config) {
   // バッファの生成
   apexBuff = makeFloatBuffer(apexs);
   coordsBuff = makeFloatBuffer(coords);

   // テクスチャ管理番号割り当て
   gl.glDeleteTextures(1, textures, 0);
   gl.glGenTextures(1, textures, 0);
   textureId = textures[0];

   // テクスチャ管理番号バインド
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);

   // 画像ファイルをテクスチャにバインド
   BitmapFactory.Options options;
   options = new BitmapFactory.Options();
   options.inPreferredConfig = Config.ARGB_8888;
   Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image256x256, options);
   GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
   gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
   bitmap.recycle();
  }

  @Override
  public void onSurfaceChanged(GL10 gl, int width, int height) {
   cameraDist =(float)(width/2);
   gl.glViewport(0, 0, width, height);
   gl.glMatrixMode(GL10.GL_PROJECTION);
   gl.glLoadIdentity();
   aspect = (float) width / (float) height;

   // 背面塗り潰し色の指定
   gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);// 黒
  }

  @Override
  public void onDrawFrame(GL10 gl) {
   // 画面クリア
   gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
   
   gl.glPushMatrix();

   //視野
   GLU.gluPerspective(gl, this.fovy, aspect, 0.1f, 100f);

   // カメラ
   GLU.gluLookAt(gl, cameraX, cameraY, 3, cameraX, cameraY, 0, 0, 1, 0);
   
   gl.glPushMatrix();
   
   // 頂点配列の指定
   gl.glVertexPointer(2, GL10.GL_FLOAT, 0, apexBuff);
   gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

   // テクスチャ配列の指定
   gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
   gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, coordsBuff);

   // テクスチャーの有効化
   gl.glEnable(GL10.GL_TEXTURE_2D);
   gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

   //テクスチャの表示方法
   GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
   
   // テクスチャ描画
   gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);

   // テクスチャーの無効化
   gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
   gl.glDisable(GL10.GL_TEXTURE_2D);
   gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
   
   gl.glPopMatrix();
   
   gl.glPopMatrix();
  }
 }

 //頂点の配列をバッファーに変換するメソッド
 private static FloatBuffer makeFloatBuffer(float[] values) {
  ByteBuffer bb = ByteBuffer.allocateDirect(values.length * 4);
  bb.order(ByteOrder.nativeOrder());
  FloatBuffer fb = bb.asFloatBuffer();
  fb.put(values);
  fb.position(0);
  return fb;
 }
}

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

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

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

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