Android圖片查看器(圖片可移動、縮放、旋轉)

jopen 9年前發布 | 43K 次閱讀 Android Android開發 移動開發

要實現圖片在手指點擊后移動和縮放有好幾種方法,在這里是通過onTouch來實現的。

</blockquote>

實例代碼如下:

首先是在View中有一個ImageView

    <RelativeLayout xmlns:android="
        xmlns:tools="
        android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

    <ImageView  
        android:id="@+id/iv"  
        android:scaleType="matrix"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/b" />  

</RelativeLayout>  </pre><br />

然后為ImageView設置onTouch點擊事件

    iv.setOnTouchListener(this);  

重寫onTouch
    private PointF startPoint = new PointF();// 獲取圖片的原始坐標  
    private int mode = 0, single = 1, multi = 2;// 設置點擊的模式,是單點觸摸還是多點  
    private Matrix matrix = new Matrix();  
    private Matrix currentMatrix = new Matrix();  
    private float startDistance; // 兩點開始的距離  
    private float startRotation;// 開始的角度  
    private PointF midPoint; // 兩點的中心位置  

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:// 表示用戶開始觸摸
mode = single;
currentMatrix.set(iv.getImageMatrix());
startPoint.set(event.getX(), event.getY());

            break;  
        case MotionEvent.ACTION_POINTER_DOWN:// 當屏幕上已經有觸點(手指),又有一個手指按下屏幕  
            mode = multi;  
            startDistance = getDistance(event);  
            startRotation = getRotation(event);  
            getMidPoint(event);  
            currentMatrix.set(iv.getImageMatrix());  
            midPoint = getMidPoint(event);  
            break;  
        case MotionEvent.ACTION_MOVE:// 手指在屏幕上移動,該事件會不斷觸發  
            if (mode == single) {  

                float x = event.getX() - startPoint.x;  
                float y = event.getY() - startPoint.y;  
                matrix.set(currentMatrix);  
                matrix.postTranslate(x, y);  

            } else if (mode == multi) {  

                float endDistance = getDistance(event);  
                float endRotate = getRotation(event);  
                if (endDistance > 10f) {  
                    float sclace = endDistance / startDistance;  
                    float rotate = endRotate - startRotation;  
                    matrix.set(currentMatrix);  
                    matrix.postScale(sclace, sclace, midPoint.x, midPoint.y);  
                    matrix.postRotate(rotate, midPoint.x, midPoint.y);  

                }  

            }  

            break;  
        case MotionEvent.ACTION_UP:// 手指離開屏幕  
        case MotionEvent.ACTION_POINTER_UP:// 當一個手指離開屏幕,但在屏幕上還有觸點。  
            mode = 0;  

            break;  

        default:  
            break;  
        }  
        iv.setImageMatrix(matrix);  
        return true;  
    }  </pre><br />

在這里mode用來判斷當前是哪種觸摸方式single代表單指操作用來移動圖片,multi代表雙指操作,用來做圖片縮放處理。

移動圖片:

currentMatrix代表點擊時圖片的當前位置

startPoint是點擊時圖片的坐標點

matrix.set(currentMatrix);matrix.postTranslate(x, y);

先獲取圖片的位置然后進行平移操作,平移的距離是手指移動的距離。

圖片縮放:

由于圖片的縮放要用兩個手指來實現,所以要用到MotionEvent.ACTION_POINTER_DOWN

startDistance是開始按下時兩個手指間的距離,

midPoint是按下時兩點間的中心,

matrix.postScale(sclace, sclace, midPoint.x, midPoint.y);這幾個參數表示X軸和y軸縮放的比例,和以那個坐標點開始縮放。

圖片旋轉:

startRotation 開始時候圖片的角度,

matrix.postRotate(rotate, midPoint.x, midPoint.y);rotate是旋轉的角度,minPoint.x和midPoint.y表示以某個點為中心開始旋轉。

    /**

 *  
 * @param event 
 * @return 兩個手指的中心點 
 */  
private PointF getMidPoint(MotionEvent event) {  
    float midx = (event.getX(0) + event.getX(1)) / 2;  
    float midy = (event.getY(0) + event.getY(1)) / 2;  
    return new PointF(midx, midy);  
}  

/** 
 *  
 * @param event 
 * @return 移動的距離 
 */  
private float getDistance(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 取旋轉角度 
 */  
private float getRotation(MotionEvent event) {  
    double delta_x = (event.getX(0) - event.getX(1));  
    double delta_y = (event.getY(0) - event.getY(1));  
    double radians = Math.atan2(delta_y, delta_x);  
    return (float) Math.toDegrees(radians);  
}  </pre><br />
 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!