Android图片查看器(图片可移动、缩放、旋转)

jopen 9年前

要实现图片在手指点击后移动和缩放有好几种方法,在这里是通过onTouch来实现的。

实例代码如下:

首先是在View中有一个ImageView

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"            xmlns:tools="http://schemas.android.com/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>  

然后为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;            }  

在这里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);        }