Android圖片的拖拽與縮放

標籤：android

Android圖片的拖拽與縮放

2014年5月9日 

我們在使用應用當中經常需要瀏覽圖片，比如在當中，點擊圖片之後可以對圖片進行縮放。

本部落格介紹如何對圖片進行拖拽和縮放，這首先要瞭解Android中的觸摸機制了，在螢幕中有手指按下、手指抬起、手指移動還有多個手指觸摸的動作。我們要實現對圖片的拖拽和縮放就是要基於這些動作來進行邏輯處理。

圖片的拖拽主要是計算手指開始的位置與當前手指的位置關係，來進行平移的，具體可以看代碼。

圖片的縮放就涉及到計算兩點之間的距離來得到縮放比，調用矩陣方法來達到縮放的效果。

範例程式碼：http://download.csdn.net/detail/wwj_748/7324363

package com.wwj.dragscale;import android.app.Activity;import android.graphics.Matrix;import android.graphics.PointF;import android.os.Bundle;import android.util.FloatMath;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.widget.ImageView;/** * 對圖片進行拖拽和縮放 *  * @author wwj *  */public class MainActivity extends Activity {private ImageView imageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageView = (ImageView) findViewById(R.id.imageView);imageView.setOnTouchListener(new TouchListener());}private class TouchListener implements OnTouchListener {private PointF startPoint = new PointF();private Matrix matrix = new Matrix();private Matrix currentMaritx = new Matrix();private int mode = 0; // 用於標記模式private static final int DRAG = 1; // 拖動private static final int ZOOM = 2; // 放大private float startDis = 0;private PointF midPoint; // 中心點@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction() & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN:mode = DRAG; // 拖拽currentMaritx.set(imageView.getImageMatrix()); // 記錄ImageView當前移動位置startPoint.set(event.getX(), event.getY()); // 開始點break;case MotionEvent.ACTION_MOVE:// 移動事件if (mode == DRAG) { // 圖片拖動事件float dx = event.getX() - startPoint.x; // x軸移動距離float dy = event.getY() - startPoint.y;matrix.set(currentMaritx); // 在當前的位置基礎上移動matrix.postTranslate(dx, dy);} else if (mode == ZOOM) { // 圖片放大事件float endDis = distance(event); // 結束距離if (endDis > 10f) {float scale = endDis / startDis; // 放大倍數matrix.set(currentMaritx);matrix.postScale(scale, scale, midPoint.x, midPoint.y);}}break;case MotionEvent.ACTION_UP:mode = 0;break;// 有手指離開螢幕，但螢幕還有觸點（手指）case MotionEvent.ACTION_POINTER_UP:mode = 0;break;// 當螢幕上已經有觸點（手指），再有一個手指壓下螢幕case MotionEvent.ACTION_POINTER_DOWN:mode = ZOOM;startDis = distance(event);if (startDis > 10f) { // 避免手指上有兩個midPoint = mid(event);currentMaritx.set(imageView.getImageMatrix()); // 記錄當前的縮放倍數}break;}// 顯示縮放後的圖片imageView.setImageMatrix(matrix);return true;}}/** * 計算兩點之間的距離 *  * @param event * @return */public static float distance(MotionEvent event) {float dx = event.getX(1) - event.getX(0);float dy = event.getY(1) - event.getY(0);return FloatMath.sqrt(dx * dx + dy * dy);}/** * 計算兩點之間的中間點 *  * @param event * @return */public static PointF mid(MotionEvent event) {float midX = (event.getX(1) + event.getX(0)) / 2;float midY = (event.getY(1) + event.getY(0)) / 2;return new PointF(midX, midY);}}