作者：某人_Valar
如需轉(zhuǎn)載請(qǐng)保留原文鏈接
近期都在處理android圖像方面的問(wèn)題惦辛，就記錄一下
相關(guān)文章
- android圖片的縮放筋岛，移動(dòng)
- android控件的縮放村刨，移動(dòng)
-
android控件隨手勢(shì)旋轉(zhuǎn)
本文結(jié)構(gòu) - 1.簡(jiǎn)介
- 2.使用步驟
- 3.源碼
1 簡(jiǎn)介
先來(lái)一張效果圖
TIM圖片.gif
上圖中灰色的一塊是ImageView控件爪幻，ImageView中的圖片進(jìn)行左右上下移動(dòng)塑顺，以及雙指縮放。
對(duì)于android控件的縮放移動(dòng)畅哑，點(diǎn)這里----android控件的縮放肴楷，移動(dòng)
2 使用步驟
- 布局layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/mywhite"
android:gravity="center_horizontal"
android:fitsSystemWindows="true">
<ImageView
android:background="@color/light_gery"
android:scaleType="matrix"
android:src="@drawable/ic_sure"
android:id="@+id/hair_iv"
android:layout_marginTop="50dp"
android:layout_width="300dp"
android:layout_height="300dp"/>
</LinearLayout>
- 先看關(guān)于手勢(shì)觸摸的判斷，需要判斷用戶是單指觸摸還是雙指荠呐，分別在OnTounch的監(jiān)聽事件中判斷赛蔫。
注：先重寫onLongClick()方法，不然會(huì)影響OnTouch里面的觸摸監(jiān)聽泥张。
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
hairIv.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
return true;
}
});
hairIv.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//單點(diǎn)觸控
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
//多點(diǎn)觸控
break;
case MotionEvent.ACTION_MOVE:
// 手指滑動(dòng)
if (mode == DRAG) {
// 是一個(gè)手指拖動(dòng)
Log.d(TAG, "mode = DRAG" );
} else if (mode == ZOOM) {
// 兩個(gè)手指滑動(dòng)
Log.d(TAG, "mode = ZOOM" );
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
// 手指放開事件
mode = NONE;
break;
}
return true;
}
});
這些寫上之后就可以先看一下單指呵恢，雙指的觸摸事件有沒(méi)有被正確處理
- 通過(guò)Android提供的Matrix類對(duì)圖像進(jìn)行處理，關(guān)于Matrix的原理可以看一下Android官方文檔Matrix部分媚创，也可以找一些其他的博客渗钉，這里只看使用。
定義要用到的變量
private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
// 第一個(gè)按下的手指的點(diǎn)
private PointF startPoint = new PointF();
// 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
private PointF midPoint = new PointF();
// 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
private float oriDis = 1f;
在onTouch中完善
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
final int x = (int) event.getRawX();
final int y = (int) event.getRawY();
Log.d(TAG, "onTouch: x= " + x + "y=" + y);
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//單點(diǎn)觸控
matrix.set(view.getImageMatrix());
savedMatrix.set(matrix);
startPoint.set(event.getX(), event.getY());
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
//多點(diǎn)觸控
oriDis = distance(event);
if (oriDis > 10f) {
savedMatrix.set(matrix);
midPoint = midPoint(event);
mode = ZOOM;
}
break;
case MotionEvent.ACTION_MOVE:
// 手指滑動(dòng)事件
if (mode == DRAG) {
// 是一個(gè)手指拖動(dòng)
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - startPoint.x, event.getY()
- startPoint.y);
} else if (mode == ZOOM) {
// 兩個(gè)手指滑動(dòng)
float newDist = distance(event);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = newDist / oriDis;
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
// 手指放開事件
mode = NONE;
break;
}
view.setImageMatrix(matrix);
return true;
}
其中用到的計(jì)算位置和距離的方法
/**
* 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
* x = (x1+x2)/2;
* y = (y1+y2)/2;
*
* @param event 觸摸事件
* @return 返回中心點(diǎn)的坐標(biāo)
*/
private PointF midPoint(MotionEvent event) {
float x = (event.getX(0) + event.getX(1)) / 2;
float y = (event.getY(0) + event.getY(1)) / 2;
return new PointF(x, y);
}
/**
* 計(jì)算兩個(gè)手指間的距離
*
* @param event 觸摸事件
* @return 放回兩個(gè)手指之間的距離
*/
private float distance(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return (float) Math.sqrt(x * x + y * y);//兩點(diǎn)間距離公式
}
3 源碼
public class ImageActivity extends AppCompatActivity{
@BindView(R.id.hair_iv)
ImageView hairIv;
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
// 第一個(gè)按下的手指的點(diǎn)
private PointF startPoint = new PointF();
// 兩個(gè)按下的手指的觸摸點(diǎn)的中點(diǎn)
private PointF midPoint = new PointF();
// 初始的兩個(gè)手指按下的觸摸點(diǎn)的距離
private float oriDis = 1f;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image);
ButterKnife.bind(this);
hairIv.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
return true;
}
});
hairIv.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
final int x = (int) event.getRawX();
final int y = (int) event.getRawY();
Log.d(TAG, "onTouch: x= " + x + "y=" + y);
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//單點(diǎn)觸控
matrix.set(view.getImageMatrix());
savedMatrix.set(matrix);
startPoint.set(event.getX(), event.getY());
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
//多點(diǎn)觸控
oriDis = distance(event);
if (oriDis > 10f) {
savedMatrix.set(matrix);
midPoint = midPoint(event);
mode = ZOOM;
}
break;
case MotionEvent.ACTION_MOVE:
// 手指滑動(dòng)事件
if (mode == DRAG) {
// 是一個(gè)手指拖動(dòng)
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - startPoint.x, event.getY()
- startPoint.y);
} else if (mode == ZOOM) {
// 兩個(gè)手指滑動(dòng)
float newDist = distance(event);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = newDist / oriDis;
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
// 手指放開事件
mode = NONE;
break;
}
view.setImageMatrix(matrix);
return true;
}
});
}
/**
* 計(jì)算兩個(gè)手指頭之間的中心點(diǎn)的位置
* x = (x1+x2)/2;
* y = (y1+y2)/2;
*
* @param event 觸摸事件
* @return 返回中心點(diǎn)的坐標(biāo)
*/
private PointF midPoint(MotionEvent event) {
float x = (event.getX(0) + event.getX(1)) / 2;
float y = (event.getY(0) + event.getY(1)) / 2;
return new PointF(x, y);
}
/**
* 計(jì)算兩個(gè)手指間的距離
*
* @param event 觸摸事件
* @return 放回兩個(gè)手指之間的距離
*/
private float distance(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return (float) Math.sqrt(x * x + y * y);//兩點(diǎn)間距離公式
}
}
