要实现图片在手指点击后移动和缩放有好几种方法,在这里是通过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 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); 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); if (endDistance > 10f) { float sclace = endDistance / startDistance; matrix.set(currentMatrix); matrix.postScale(sclace, sclace, 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轴缩放的比例,和以那个坐标点开始缩放。
下面是getMidPoint和getDistance
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); } 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); }