整理一個用matrix對imageview移動和綻放圖片的方法
效果圖:
需要注意的是在佈局中要設定imageview android:scaleType="matrix"
程式碼如下:
XImageView.java
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.widget.ImageView;
public class XImageView extends ImageView {
private Matrix matrix;
private float startX;
private float startY;
private PointF pointerMidByEvent;
private float startDisByXY;
// 第一步:手指拖動圖片
// 第二步:實現手指放大
public XImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public XImageView(Context context, AttributeSet attrs) {
super(context, attrs);
initParams();
}
public XImageView(Context context) {
super(context);
}
private void initParams() {
matrix = new Matrix();
// 設定預設
setImageMatrix(matrix);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 觸控手指數量
int pointerCount = event.getPointerCount();
System.out.println("event.getPointerCount() = "+event.getPointerCount());
if (pointerCount == 1) {
// 目前我們只是一個手指觸控(拖動圖片)
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 絕對位置 -- event.getRawX(); event.getRawY();
// 記錄我們手指按下的時候的位置(相對位置)
startX = event.getX();
startY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
// 當前手指觸控的位置
float x2 = event.getX();
float y2 = event.getY();
// dx,dy--增量 delta
matrix.postTranslate((x2 - startX), (y2 - startY));
setImageMatrix(matrix);
startX = x2;
startY = y2;
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
} else if (event.getPointerCount() == 2) {
// 兩個手指觸控放大(第二根手指觸控)
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_POINTER_DOWN:
System.out.println("----pointerCount == 2-------");
// 獲取兩點之間的距離
startDisByXY = getDisByXY(event);
// 計算縮放的中心點座標(開始觸控的時候中心點座標)
pointerMidByEvent = getPointerMidByEvent(event);
break;
case MotionEvent.ACTION_MOVE:
// 當前觸控的兩個手指之間的距離
float disByXY = getDisByXY(event);
// 計算放大的倍數
float scale = disByXY / startDisByXY;
System.out.println("pointerMidByEvent = "+pointerMidByEvent);
matrix.postScale(scale, scale, pointerMidByEvent.x,
pointerMidByEvent.y);
setImageMatrix(matrix);
break;
default:
break;
}
}
return super.onTouchEvent(event);
}
/**
* 計算兩點之間的中心點
*
* @param event
* @return
*/
private PointF getPointerMidByEvent(MotionEvent event) {
// 得到第一個手指的座標
float x1 = event.getX();
float y1 = event.getY();
// 得到第二根手指觸控的位置
float x2 = event.getX(1);
float y2 = event.getY(1);
PointF pointF = new PointF();
pointF.x = (x1 + x2) / 2;
pointF.y = (y1 + y2) / 2;
return pointF;
}
/**
* 計算兩個手指直接的中心位置(縮放中心點)
*
*
* @param event
* return value --- 兩點之間的距離
*/
private float getDisByXY(MotionEvent event) {
// 得到第一個手指的座標
float x1 = event.getX();
float y1 = event.getY();
// 得到第二根手指觸控的位置
float x2 = event.getX(1);
float y2 = event.getY(1);
// FloatMath.sqrt--開平方
return FloatMath.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}
}
MainActivity.java:
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.xml
<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"
tools:context="${relativePackage}.${activityClass}" >
<com.tz.dream.image.XImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:scaleType="matrix"
android:src="@drawable/image_bg" />
</RelativeLayout>
整理自教程
相關文章
- Android:ImageView圖片縮放、居中AndroidView
- android imageview 縮放檢視圖片AndroidView
- Android用ImageView顯示本地和網上的圖片AndroidView
- Android自定義ImageView 在圖片上新增一個圖層AndroidView
- ImageView圖片填充全屏View
- 高效圖片輪播,兩個ImageView實現View
- android imageview圖片居中技巧應用AndroidView
- 移動端圖片等比例縮放實踐
- ImageView顯示圖片資源的兩種方法(background/src)View
- Android圖片底部居中的ImageViewAndroidView
- ImageView顯示網路上的圖片View
- 一個基於canvas的移動端圖片編輯器Canvas
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- 使用RxJava實現ImageView的拖動、旋轉和縮放RxJavaView
- Android ImageView 清空背景圖片AndroidView
- ugui 縮放圖片使圖片的四個角和四邊保持原樣UGUI
- [Android]Layout中ImageView中圖片的對齊顯示問題AndroidView
- iOS ImageView contentMode 圖片填充模式iOSView模式
- ImageView中圖片儲存到檔案View
- java匯出圖片,拼接多個圖片, 拼接文字和圖片 到一個圖片檔案Java
- Android圖片處理(Matrix,ColorMatrix)AndroidColorMatrix
- android圖片裁剪拼接實現(一):Matrix基本使用Android
- imageView圖片放大縮小及旋轉View
- Android ImageView 圖片靠右,靠左處理AndroidView
- 一個事件驅動的圖片爬蟲事件爬蟲
- android遊戲開發一:背景圖片的移動Android遊戲開發
- CSS動畫製作綻放的花朵CSS動畫
- Canvas 放煙花合集 -- 用粉絲頭像做成煙花綻放?Canvas
- iOS開發之imageView居中顯示圖片iOSView
- iOS開發之ImageView複用實現圖片無限輪播iOSView
- 用Flask寫一個上傳圖片的APIFlaskAPI
- Node.js 對圖片進行裁切、縮放Node.js
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- 移動端實用資源整理
- canvas圖片裁剪,雙指縮放順滑體驗,支援PC端移動端Canvas
- 用canvas實現一個自動識別兩張圖片差異(圖片找不同)的功能Canvas
- 將圖片旋轉(這裡不是旋轉imageView)View
- js實現移動端圖片預覽:手勢縮放, 手勢拖動,雙擊放大...JS