Android圖片的拖拽與縮放

Android圖片的拖拽與縮放

2014年5月9日

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

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

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

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

示例代碼：http://download.csdn.net/detail/wwj_748/7324363

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD48cD48aW1nIHNyYz0="/uploadfile/Collfiles/20140510/2014051009060071.png" width="320" height="500" alt="\" />

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;

	@Override
	protected 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; // 中心點

		@Override
		public 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);
	}

}