Android實現自定義相機系列(1)—自定義view裁剪控制元件
阿新 • • 發佈：2019-01-23
目標
本系列文章主要記錄自定義相機拍照系列，專案原始碼還在編寫中，後續會傳到github，內容包括：
1、使用Android的Camera API自定義拍照模式，例如人臉拍照，OCR拍照等；
2、對拍完的照片進行裁剪；
3、自定義圖片伸縮view，使用手勢對圖片進行放大縮小操作；
本人寫部落格也是為了自己學習和分享，也會參考網路上許多文章和開源專案，希望大家一塊學習進步。
學習這一系列課程，需要擁有Android自定義view的基本知識，這一篇文章主要介紹自定義裁剪view控制元件。
自定義view裁剪控制元件
Android自帶的系統中有圖片裁剪的功能，後面介紹系統自帶的拍照功能時再進行介紹，此篇文章介紹自定義裁剪控制元件的原理和實現，主要實現以下幾個功能：
- 繼承View，實現自定義View功能
- 繪製裁剪矩形框
- 實現矩形框的拖動功能
- 實現矩形框拉伸四個角縮放功能
- 提供返回獲取矩形座標方法，方便進行裁剪
演示效果圖
直接看程式碼會枯燥，這裡先看下演示效果圖
程式碼實現
1、自定義view類FrameOverlayView，實現帶灰色遮罩的矩形選取框控制元件。
public class FrameOverlayView extends View {
// 獲取矩形的四個點座標，方便擷取矩形中的圖片
public Rect getFrameRect() {
Rect rect = new 2、XML佈局檔案
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3">
<ImageView
android:id="@+id/iv_sourceImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/crop" />
<com.rzr.capture.view.FrameOverlayView
android:id="@+id/overlayView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<Button
android:id="@+id/btn_crop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="裁剪" />
<ImageView
android:id="@+id/iv_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />
</LinearLayout>
</LinearLayout>
3、在MainActivity中呼叫
public class MainActivity extends AppCompatActivity {
private FrameOverlayView overlayView;
private ImageView iv_sourceImage, iv_result;
private Button btn_crop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
overlayView = findViewById(R.id.overlayView);
iv_sourceImage = findViewById(R.id.iv_sourceImage);
final Bitmap image = ((BitmapDrawable) iv_sourceImage.getDrawable()).getBitmap();
iv_result = findViewById(R.id.iv_result);
btn_crop = findViewById(R.id.btn_crop);
btn_crop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Rect frameRect = overlayView.getFrameRect();
Bitmap crop = crop(frameRect, image);
iv_result.setImageBitmap(crop);
}
});
}
public Bitmap crop(Rect frame, Bitmap image) {
float[] src = new float[]{frame.right, frame.top};
Matrix matrix = new Matrix();
int width = frame.width();
int height = frame.height();
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
Bitmap originalBitmap = image;
matrix.postTranslate(-src[0], -src[1]);
canvas.drawBitmap(originalBitmap, matrix, null);
return bitmap;
}
}
4、DimensionUtil 工具類
public class DimensionUtil {
public static int dpToPx(int dp) {
return (int) (dp * Resources.getSystem().getDisplayMetrics().density);
}
}