android QQ截圖 開發

自定義CaptureView，在CaptureView上繪製具有一個可拉伸，移動的高亮矩形框，通過FrameLayout佈局將這個CaptureView覆蓋到需要截圖的圖片顯示控制元件ImageView上，當點選截圖按鈕後，計算CaptureView矩形框的座標值及寬和高讀取圖片相映區域的畫素，並將這些畫素通過畫布重新繪製成圖片。

 

首先先上佈局檔案：main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#FFFFFFFF"

android:orientation="vertical" >

 

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1" >

 

<!-- 顯示圖片 -->

 

<ImageView

android:id="@+id/iv_image"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:scaleType="fitXY" />

 

<!-- 自定義的截圖View -->

 

<gwn.test.capture.CaptureView

android:id="@+id/capture"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

 

<!-- 截圖顯示 -->

 

<ImageView

android:id="@+id/iv_corp"

android:layout_width="100dip"

android:layout_height="100dip"

android:layout_gravity="right"

android:background="#50000000"

android:scaleType="centerInside" />

</FrameLayout>

 

<Button

android:id="@+id/btn_crop"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="截圖" />

 

</LinearLayout>

佈局檔案很簡單，接下來主角就要登場了，當然這就是CaptureViewr的實現。CaptureView需要繪製的部分有三個，分別為整個View可視範圍viewRect，矩形框體captureRect，拉伸時的顯示箭頭。CaptureView的觸控事件型別有三種：無操作、移動、拉伸，程式碼定義如下：

private enum ActionMode { // 列舉動作型別：無、移動、拉伸

None, Move, Grow

}

 

首先先計算viewRect,captureView的大小，我們在系統給View指派大小的地方初始化這兩個區域，即在onLayout()方法中實現。程式碼如下：

protected void onLayout(boolean changed, int left, int top, int right,

int bottom) {

super.onLayout(changed, left, top, right, bottom);

// 初始化可視範圍及框體大小

viewRect = new Rect(left, top, right, bottom);

int viewWidth = right - left;

int viewHeight = bottom - top;

int captureWidth = Math.min(viewWidth, viewHeight) * 3 / 5;

int captureHeight = viewHeight * 2 / 5;

// 將框體繪製在可視範圍中間位置

int captureX = (viewWidth - captureWidth) / 2;

int captureY = (viewHeight - captureHeight) / 2;

captureRect = new Rect(captureX, captureY, captureX + captureWidth,

captureY + captureHeight);

}

 

接下來重寫ondraw(Canvas canvas)，將可視範圍、框體區域，箭頭繪製上去：

protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub

super.onDraw(canvas);

canvas.save();

Path path = new Path();

path.addRect(new RectF(captureRect), Path.Direction.CW);// 順時針閉合框體

canvas.clipPath(path, Region.Op.DIFFERENCE);

canvas.drawRect(viewRect, outsideCapturePaint); // 繪製框體外圍區域

 

canvas.drawPath(path, lineCapturePaint); // 繪製框體

canvas.restore();

if (mMode == ActionMode.Grow) { // 拉伸操作時，繪製框體箭頭

 

int xMiddle = captureRect.left + captureRect.width() / 2; // 框體中間X座標

int yMiddle = captureRect.top + captureRect.height() / 2; // 框體中間Y座標

 

// 框體左邊的箭頭

horStretchArrows.setBounds(captureRect.left

- horStretchArrowsHalfWidth, yMiddle

- horStretchArrowsHalfHeigth, captureRect.left

+ horStretchArrowsHalfWidth, yMiddle

+ horStretchArrowsHalfHeigth);

horStretchArrows.draw(canvas);

 

// 框體右邊的箭頭

horStretchArrows.setBounds(captureRect.right

- horStretchArrowsHalfWidth, yMiddle

- horStretchArrowsHalfHeigth, captureRect.right

+ horStretchArrowsHalfWidth, yMiddle

+ horStretchArrowsHalfHeigth);

horStretchArrows.draw(canvas);

 

// 框體上方的箭頭

verStretchArrows.setBounds(xMiddle - verStretchArrowsHalfWidth,

captureRect.top - verStretchArrowsHalfHeigth, xMiddle

+ verStretchArrowsHalfWidth, captureRect.top

+ verStretchArrowsHalfHeigth);

verStretchArrows.draw(canvas);

 

// 框體下方的箭頭

verStretchArrows.setBounds(xMiddle - verStretchArrowsHalfWidth,

captureRect.bottom - verStretchArrowsHalfHeigth, xMiddle

+ verStretchArrowsHalfWidth, captureRect.bottom

+ verStretchArrowsHalfHeigth);

verStretchArrows.draw(canvas);

}

}

 

重頭戲來了，CaptureView的事件監聽。首先定義觸控位置及動作，程式碼：

// 觸控位置及動作

public static final int GROW_NONE = (1 << 0);//框體外部

public static final int GROW_LEFT_EDGE = (1 << 1);//框體左邊緣

public static final int GROW_RIGHT_EDGE = (1 << 2);//框體右邊緣

public static final int GROW_TOP_EDGE = (1 << 3);//框體上邊緣

public static final int GROW_BOTTOM_EDGE = (1 << 4);//框體下邊緣

public static final int GROW_MOVE = (1 << 5);//框體移動

 

// 確定觸控位置及動作，分別為觸控框體外圍和框體上、下、左、右邊緣以及框體內部。

private int getGrow(float x, float y) {

final float effectiveRange = 20F; // 觸控的有效範圍大小

int grow = GROW_NONE;

int left = captureRect.left;

int top = captureRect.top;

int right = captureRect.right;

int bottom = captureRect.bottom;

boolean verticalCheck = (y >= top - effectiveRange)

&& (y < bottom + effectiveRange);

boolean horizCheck = (x >= left - effectiveRange)

&& (x < right + effectiveRange);

 

// 觸控了框體左邊緣

if ((Math.abs(left - x) < effectiveRange) && verticalCheck) {

grow |= GROW_LEFT_EDGE;

}

 

// 觸控了框體右邊緣

if ((Math.abs(right - x) < effectiveRange) && verticalCheck) {

grow |= GROW_RIGHT_EDGE;

}

 

// 觸控了框體上邊緣

if ((Math.abs(top - y) < effectiveRange) && horizCheck) {

grow |= GROW_TOP_EDGE;

}

 

// 觸控了框體下邊緣

if ((Math.abs(bottom - y) < effectiveRange) && horizCheck) {

grow |= GROW_BOTTOM_EDGE;

}

 

// 觸控框體內部

if (grow == GROW_NONE && captureRect.contains((int) x, (int) y)) {

grow = GROW_MOVE;

}

return grow;

}

 

如果grow的值不為GROW_NONE，也即使用者觸控位置在框體邊緣或框體內部，那麼就鎖定使用者本次觸控，直到使用者放開觸控釋放。判斷使用者的移動事件是伸縮框體還是移動框體，如果是伸縮框體，則呼叫growBy()方法拉伸框體，否則呼叫moveBy()移動框體程式碼如下：

private void handleMotion(int grow, float dx, float dy) {

if (grow == GROW_NONE) {

return;

} else if (grow == GROW_MOVE) {

moveBy(dx, dy); // 移動框體

} else {

if (((GROW_LEFT_EDGE | GROW_RIGHT_EDGE) & grow) == 0) {

dx = 0; // 水平不伸縮

}

 

if (((GROW_TOP_EDGE | GROW_BOTTOM_EDGE) & grow) == 0) {

dy = 0; // 垂直不伸縮

}

growBy((((grow & GROW_LEFT_EDGE) != 0) ? -1 : 1) * dx,

(((grow & GROW_TOP_EDGE) != 0) ? -1 : 1) * dy);

}

}

 

下面是貼上這兩個方法，有關說明見註釋

private void moveBy(float dx, float dy) {

Rect invalRect = new Rect(captureRect);

captureRect.offset((int) dx, (int) dy);

captureRect.offset(Math.max(0, viewRect.left - captureRect.left),

Math.max(0, viewRect.top - captureRect.top));

captureRect.offset(Math.min(0, viewRect.right - captureRect.right),

Math.min(0, viewRect.bottom - captureRect.bottom));

 

//清除移動滯留的痕跡

invalRect.union(captureRect);//更新圍繞本身區域和指定的區域，

invalRect.inset(-100, -100);

invalidate(invalRect); // 重繪指定區域

}

 

private void growBy(float dx, float dy) {

float widthCap = 50F; //captureRect最小寬度

float heightCap = 50F; //captureRect最小高度

 

RectF r = new RectF(captureRect);

 

//當captureRect拉伸到寬度 = viewRect的寬度時，則調整dx的值為 0

if (dx > 0F && r.width() + 2 * dx >= viewRect.width()) {

dx = 0F;

}

//同上

if (dy > 0F && r.height() + 2 * dy >= viewRect.height()) {

dy = 0F;

}

 

r.inset(-dx, -dy); // 框體邊緣外移

 

 

//當captureRect縮小到寬度 = widthCap時

if (r.width() <= widthCap) {

r.inset(-(widthCap - r.width()) / 2F, 0F);

}

 

//同上

if (r.height() <= heightCap) {

r.inset(0F, -(heightCap - r.height()) / 2F);

}

 

if (r.left < viewRect.left) {

r.offset(viewRect.left - r.left, 0F);

} else if (r.right > viewRect.right) {

r.offset(-(r.right - viewRect.right), 0);

}

if (r.top < viewRect.top) {

r.offset(0F, viewRect.top - r.top);

} else if (r.bottom > viewRect.bottom) {

r.offset(0F, -(r.bottom - viewRect.bottom));

}

 

captureRect.set((int) r.left, (int) r.top, (int) r.right,

(int) r.bottom);

invalidate();

}

 

接下來看下截圖操作，由於ImageView顯示的圖片跟原始圖片有比例上的區別，因此，先取得調整比例的圖片，程式碼說明：

// ImageView中的影象是跟實際的圖片有比例縮放，因此需要調整圖片比例

private Bitmap regulationBitmap(Bitmap bitmap) {

int ivWidth = ivImage.getWidth();

int ivHeight = ivImage.getHeight();

 

int bmpWidth = bitmap.getWidth();

int bmpHeight = bitmap.getHeight();

 

// 寬和高的比例

float scaleWidth = (float) ivWidth / bmpWidth;

float scaleHeight = (float) ivHeight / bmpHeight;

Matrix matrix = new Matrix();

matrix.postScale(scaleWidth, scaleHeight);

Bitmap resizeBmp = Bitmap.createBitmap(bitmap, 0, 0, bmpWidth,

bmpHeight, matrix, true);

 

return resizeBmp;

}

 

截圖程式碼：

private Bitmap cropImage(){

Rect cropRect = mCaptureView.getCaptureRect();

int width = cropRect.width();

int height = cropRect.height();

 

Bitmap croppedImage = Bitmap.createBitmap(width,

height, Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(croppedImage);

Rect dstRect = new Rect(0, 0, width, height);

 

// 調整圖片顯示比例

mBitmap = regulationBitmap(mBitmap);

 

canvas.drawBitmap(mBitmap, cropRect, dstRect, null);

return croppedImage;

}