騰訊大牛動態教學：Android 仿微信 QQ 圖片裁剪，趕忙收藏起來！

時間  2020-05-10
標籤 騰訊 動態 教學 android 微信 圖片 裁剪 趕忙 收藏 起來 欄目 騰訊 简体版
原文   原文鏈接

前言

在平時開發中，常常須要實現這樣的功能，拍照 - 裁剪，相冊 - 裁剪。固然，系統也有裁剪的功能，可是因爲機型，系統兼容性等問題，在實際開發當中，咱們一般會本身進行實現。今天，就讓咱們一塊兒來看看怎樣實現。git

這篇博客實現的功能主要有仿微信，QQ 上傳圖像裁剪功能，包括拍照，從相冊選取。裁剪框的樣式有圓形，正方形，九宮格。github

主要講解的功能點canvas

  1. 使用說明
  2. 總體的實現思路
  3. 裁剪框的實現
  4. 圖片縮放的實現，包括放大，縮小，移動，裁剪等

咱們先來看看咱們實現的效果圖微信

騰訊大牛動態教學：Android 仿微信 QQ 圖片裁剪，趕忙收藏起來！

使用說明

有兩種調用方式ide

第一種

第一種，使用普通的 startActivityForResult 進行調用，並重寫 onActivityResult 方法，在裏面根據 requestCode 進行處理post

1ClipImageActivity.goToClipActivity(this, uri);
 2@Override
 3protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
 4    switch (requestCode) {
 5        case REQ_CLIP_AVATAR:  //剪切圖片返回
 6            if (resultCode == RESULT_OK) {
 7                final Uri uri = intent.getData();
 8                if (uri == null) {
 9                    return;
10                }
11                String cropImagePath = FileUtil.getRealFilePathFromUri(getApplicationContext(), uri);
12
13
14    ----
15
16}

第二種

第二種調用 ClipImageActivity.goToClipActivity 方法，結果以 callBack 回調的方式返回回來，這種看起來比較直觀點，我的也比較喜歡這種方法。它的實現原理是經過空白的 fragment 處理實現的，有興趣的能夠看我這一篇博客 Android Fragment 的妙用 - 優雅地申請權限和處理 onActivityResultui

1ClipImageActivity.goToClipActivity(this, uri, new ActivityResultHelper.Callback() {
2    @Override
3    public void onActivityResult(int resultCode, Intent data) {
4
5    }
6});

總體實現思路

從上面的效果圖咱們能夠看到，裁剪功能主要包括兩大塊this

  1. 裁剪框
  2. 圖片的縮放，移動，裁剪等

所以，爲了方便往後的修改，咱們將裁剪框的功能單獨提取出來，圖片縮放功能提出出來。即裁剪框單獨一個 View。spa

下面，讓咱們一塊兒來看看裁剪框功能的實現。3d

裁剪框功能的實現

騰訊大牛動態教學：Android 仿微信 QQ 圖片裁剪，趕忙收藏起來！

裁剪框主要有兩層，第一層，裁剪框的實現（包括圓形，長方形，九宮格形狀），第二層，在裁剪區域上面蓋上一層蒙層。

蒙層

蒙層的實現咱們是經過 Xfermode 實現的

1xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);
2
3
4//經過Xfermode的DST_OUT來產生中間的透明裁剪區域，必定要另起一個Layer（層）
5canvas.saveLayer(0, 0, this.getWidth(), this.getHeight(), null, Canvas.ALL_SAVE_FLAG);
6
7//設置背景
8canvas.drawColor(Color.parseColor("#a8000000"));
9paint.setXfermode(xfermode);

圓形裁剪框的實現

繪製圓形裁剪框很容易實現，主要肯定圓心和半徑便可

1//中間的透明的圓
2canvas.drawCircle(this.getWidth() / 2, this.getHeight() / 2, clipRadiusWidth, paint);
3//白色的圓邊框
4canvas.drawCircle(this.getWidth() / 2, this.getHeight() / 2, clipRadiusWidth, borderPaint);

正方形裁剪框的實現

騰訊大牛動態教學：Android 仿微信 QQ 圖片裁剪，趕忙收藏起來！

繪製長方形的話主要要肯定四個點的座標 left ，top， right， botom。很簡單

1left = mHorizontalPadding；
2top = this.getHeight() / 2 - clipWidth / 2；
3right =   this.getWidth() - mHorizontalPadding；
4botom = this.getHeight() / 2 + clipWidth / 2；
1//繪製中間白色的矩形蒙層
2canvas.drawRect(mHorizontalPadding, this.getHeight() / 2 - clipWidth / 2,
3        this.getWidth() - mHorizontalPadding, this.getHeight() / 2 + clipWidth / 2, paint);
4//繪製白色的矩形邊框
5canvas.drawRect(mHorizontalPadding, this.getHeight() / 2 - clipWidth / 2,
6        this.getWidth() - mHorizontalPadding, this.getHeight() / 2 + clipWidth / 2, borderPaint);

九宮格的

騰訊大牛動態教學：Android 仿微信 QQ 圖片裁剪，趕忙收藏起來！

九宮格的繪製稍微繁瑣一點，分三個步驟

  1. 繪製長方形邊框
  2. 繪製九宮格引導線
  3. 繪製裁剪邊框的是個直角

繪製長方形邊框的這裏就不說了，比較簡單。

咱們來看一下繪製九宮格引導線的

  • 繪製豎直方向兩條線
  • 繪製水平方向兩條線
1private void drawGuidelines(@NonNull Canvas canvas, Rect clipRect) {
 2
 3    final float left = clipRect.left;
 4    final float top = clipRect.top;
 5    final float right = clipRect.right;
 6    final float bottom = clipRect.bottom;
 7
 8    final float oneThirdCropWidth = (right - left) / 3;
 9
10    final float x1 = left + oneThirdCropWidth;
11    //引導線豎直方向第一條線
12    canvas.drawLine(x1, top, x1, bottom, mGuidelinePaint);
13    final float x2 = right - oneThirdCropWidth;
14    //引導線豎直方向第二條線
15    canvas.drawLine(x2, top, x2, bottom, mGuidelinePaint);
16
17    final float oneThirdCropHeight = (bottom - top) / 3;
18
19    final float y1 = top + oneThirdCropHeight;
20    //引導線水平方向第一條線
21    canvas.drawLine(left, y1, right, y1, mGuidelinePaint);
22    final float y2 = bottom - oneThirdCropHeight;
23    //引導線水平方向第二條線
24    can

繪製四個直角的

1private void drawCorners(@NonNull Canvas canvas, Rect clipRect) {
 2
 3    final float left = clipRect.left;
 4    final float top = clipRect.top;
 5    final float right = clipRect.right;
 6    final float bottom = clipRect.bottom;
 7
 8    //簡單的數學計算
 9    final float lateralOffset = (mCornerThickness - mBorderThickness) / 2f;
10    final float startOffset = mCornerThickness - (mBorderThickness / 2f);
11
12    //左上角左面的短線
13    canvas.drawLine(left - lateralOffset, top - startOffset, left - lateralOffset, top + mCornerLength, mCornerPaint);
14    //左上角上面的短線
15    canvas.drawLine(left - startOffset, top - lateralOffset, left + mCornerLength, top - lateralOffset, mCornerPaint);
16
17    //右上角右面的短線
18    canvas.drawLine(right + lateralOffset, top - startOffset, right + lateralOffset, top + mCornerLength, mCornerPaint);
19    //右上角上面的短線
20    canvas.drawLine(right + startOffset, top - lateralOffset, right - mCornerLength, top - lateralOffset, mCornerPaint);
21
22    //左下角左面的短線
23    canvas.drawLine(left - lateralOffset, bottom + startOffset, left - lateralOffset, bottom - mCornerLength, mCornerPaint);
24    //左下角底部的短線
25    canvas.drawLine(left - startOffset, bottom + lateralOffset, left + mCornerLength, bottom + lateralOffset, mCornerPaint);
26
27    //右下角左面的短線
28    canvas.drawLine(right + lateralOffset, bottom + startOffset, right + lateralOffset, bottom - mCornerLength, mCornerPaint);
29    //右下角底部的短線
30    canvas.drawLine(right + startOffset, bottom + lateralOffset, right - mCornerLength, bottom + lateralOffset, mCornerPaint);
31}

圖片裁剪框的實現到此講解完畢，更多細節請參考 ClipView

圖片的縮放，移動

實現原理簡述

這裏咱們是經過 ClipViewLayout 實現的，它是 RelativeLayout 的子類，裏面含有 ImageView 和 ClipView（裁剪框）。咱們經過監聽 ClipViewLayout 的 onTouchEvent 事件，設置 imageView 的圖片矩陣。

咱們先來了解一下，主要有三種模式，NONE，DRAG， ZOOM。NONE 表示初始模式，DRAG 表示拖拽模式，ZOOM 表示縮放模式

1private static final int NONE = 0;
2//動做標誌：拖動
3private static final int DRAG = 1;
4//動做標誌：縮放
5private static final int ZOOM = 2;

當咱們多個手指按下的時候，加入兩個手指之間的距離超過 10，此時咱們認爲進入 ZOOM 模式。DRAG 模式的話當咱們手指按下的時候進入。NONE 模式，當咱們手機擡起的時候，進入復位模式。

1switch (event.getAction() & MotionEvent.ACTION_MASK) {
 2    case MotionEvent.ACTION_DOWN:
 3        Log.d(TAG, "onTouchEvent: ACTION_DOWN");
 4        mSavedMatrix.set(mMatrix);
 5        //設置開始點位置
 6        mStart.set(event.getX(), event.getY());
 7        mode = DRAG;
 8        break;
 9    case MotionEvent.ACTION_POINTER_DOWN:
10        //開始放下時候兩手指間的距離
11        mOldDist = spacing(event);
12        if (mOldDist > 10f) {
13            mSavedMatrix.set(mMatrix);
14            midPoint(mMid, event);
15            mode = ZOOM;
16        }
17        break;
18    case MotionEvent.ACTION_UP:
19    case MotionEvent.ACTION_POINTER_UP:
20        mode = NONE;
21        break;

接下來咱們一塊兒來看一下，咱們 action_move 的時候，咱們是怎樣進行移動和縮放的。

移動的話相對比較簡單，首先它會計算出咱們這一次 event 事件相對咱們 action_down 時候 event 事件的偏移量 dx， dy。接着調用 mMatrix.postTranslate(dx, dy)，進行矩陣的移動。最後，再檢測是否超出邊界。

1case MotionEvent.ACTION_MOVE:
 2    Log.d(TAG, "onTouchEvent: mode =" + mode);
 3    if (mode == DRAG) { //拖動
 4        mMatrix.set(mSavedMatrix);
 5        float dx = event.getX() - mStart.x;
 6        float dy = event.getY() - mStart.y;
 7
 8        mVerticalPadding = mClipView.getClipRect().top;
 9        mMatrix.postTranslate(dx, dy);
10        //檢查邊界
11        checkBorder();
12    } 
13    ---
14    mImageView.setImageMatrix(mMatrix);

邊界檢測 主要是檢查縮放，移動後的圖片矩陣的 left， top，right， bottom 是否在圖片裁剪框以內，若是在的話，須要對圖片矩陣進行移動。確保邊界不在裁剪框以內。

1/**
 2 * 邊界檢測
 3 */
 4private void checkBorder() {
 5    RectF rect = getMatrixRectF(mMatrix);
 6    float deltaX = 0;
 7    float deltaY = 0;
 8    int width = mImageView.getWidth();
 9    int height = mImageView.getHeight();
10    // 若是寬或高大於屏幕，則控制範圍 ; 這裏的0.001是由於精度丟失會產生問題，可是偏差通常很小，因此咱們直接加了一個0.01
11    if (rect.width() + 0.01 >= width - 2 * mHorizontalPadding) {
12        // 圖片矩陣的最左邊 > 裁剪邊框的左邊
13        if (rect.left > mHorizontalPadding) {
14            deltaX = -rect.left + mHorizontalPadding;
15        }
16        // 圖片矩陣的最右邊 < 裁剪邊框的右邊
17        if (rect.right < width - mHorizontalPadding) {
18            deltaX = width - mHorizontalPadding - rect.right;
19        }
20    }
21    if (rect.height() + 0.01 >= height - 2 * mVerticalPadding) {
22        // 圖片矩陣的 top > 裁剪邊框的 top
23        if (rect.top > mVerticalPadding) {
24            deltaY = -rect.top + mVerticalPadding;
25        }
26        // 圖片矩陣的 bottom < 裁剪邊框的 bottom
27        if (rect.bottom < height - mVerticalPadding) {
28            deltaY = height - mVerticalPadding - rect.bottom;
29        }
30    }
31
32    Log.i(TAG, "checkBorder: deltaX=" + deltaX + " deltaY = " + deltaY);
33
34    mMatrix.postTranslate(deltaX, deltaY);
35}

裁剪功能的實現

1/**
 2 * 獲取剪切圖
 3 */
 4public Bitmap clip() {
 5    mImageView.setDrawingCacheEnabled(true);
 6    mImageView.buildDrawingCache();
 7    Rect rect = mClipView.getClipRect();
 8    Bitmap cropBitmap = null;
 9    Bitmap zoomedCropBitmap = null;
10    try {
11        cropBitmap = Bitmap.createBitmap(mImageView.getDrawingCache(), rect.left, rect.top, rect.width(), rect.height());
12        // 對圖片進行壓縮，這裏由於 mPreViewW 與寬高是相等的，因此壓縮比例是 1:1，能夠根據須要本身調整
13        zoomedCropBitmap = BitmapUtil.zoomBitmap(cropBitmap, mPreViewW, mPreViewW);
14    } catch (Exception e) {
15        e.printStackTrace();
16    }
17    if (cropBitmap != null) {
18        cropBitmap.recycle();
19    }
20    // 釋放資源
21    mImageView.destroyDrawingCache();
22    return zoomedCropBitmap;
23}

題外話

這個 Demo 涉及到的 Android 技術點實際上是蠻多的，能夠說是麻雀雖小，五臟俱全。Android 7.0 圖片拍照適配，6.0 動態權限申請，Android 使用空白 fragment 處理 onActivityResult，動態權限申請，自定義 View，View 的事件分發機制等等。

這篇博客主要是介紹我的認爲比較重要的技術點，其餘的能夠自行取了解。最後，提供一下 demo 下載地址：https://github.com/gdutxiaoxu/clipimagea

文章不易，若是你們喜歡這篇文章，或者對你有幫助但願你們多多，點贊 ， 轉發 ，關注。文章會持續更新的。絕對乾貨！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程