【转】Android仿QQ截图应用测试

2023-08-23 13:33:58

使用过QQ的同学应该都用过QQ截图，Ctrl+Alt+A进入截图操作，通过拉伸，移动高亮区域的框体可以快速截取我们需要的图片。在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" />

<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;

}

分析完毕！

码农公寓

相关文章