上个月写了一篇《Android开发之仿微博贴纸效果实现——基础篇》，文章中提到还有一篇进阶篇要写，很早就想动笔了，因中途去维护了开源库《高仿微信图片选择器2.0版本》，导致耽搁到了现在，刚好趁这几天过年在家休息，把这篇文章给完成了。

我们来回顾下上篇文章所写的内容，我们通过canvas.drawBitmap(mBitmap, mMatrix, null);将Bitmap图像绘制到Canvas上，然后用一个矩阵Matrix配合不同手势来维护图像的变换状态(移动、缩放、旋转)。

这篇文章主要来讲一下多图贴纸的实现思路和代码的设计重构，在上篇文章中，我们实现单个贴纸效果是一个自定义View，那么多个贴纸要如何实现呢？可能有的朋友会想，既然已经实现了单个贴纸，那么多个贴纸只要依葫芦画瓢，让一个ViewGroup去装载多个贴纸不就可以了？确实没毛病，这样做也是可以的，不过中间可能会遇到一些麻烦，比如状态的管理(当多个贴纸重叠在一起时，触摸焦点的判断等)而且之前的实现代码是面向过程的，一整坨的代码维护起来也不是那么的舒服，这里我想介绍一种新思路，用更优雅的方式去实现多图贴纸。

国际惯例，先看一下实现的效果图：

stickerview.gif

关于贴纸的核心代码其实并没有改变(矩阵的变换，坐标点的映射，角度、缩放值的计算等)，有了这个前提后，我们抛开代码层面来捋一下思路，想想如何更优雅的实现这个多图贴纸效果。

开源库的使用：

为了方便大家使用，这里我把贴纸库做了封装，目前已经开源了，有什么建议可以随时反馈给我，我会更新维护上去，传送门：StickerView

1、如何在项目中引入该贴纸库：

//gradle引入此行

compile 'com.lcw.library:StickeView:1.0.1'

2、布局设置：

android:id="@+id/sl_sticker_layout"

android:layout_width="match_parent"

android:layout_height="match_parent" />

3、添加贴纸：

Sticker sticker = new Sticker(mContext,mBitmap);

mStickerLayout.addSticker(sticker);

好了，开始我们今天的讲解。

实现思路：

首先我们可以把贴纸看成一个独立个体，在个体里包含了图片，矩阵，初始坐标，焦点等属性，在构建完这些属性后，需要通过Canvas绘制出来 ，还有手势操作，我们通过手势去识别出当前的操作类型和计算出变化的数值，动态去改变矩阵，再通过Canvas绘制出来，其实这些和View并没有直接的关系，所以我们可以把贴纸抽象成一个对象，根据面向对象的编程思想，我们可以大致得到下面这张图：

Sticker贴纸类图(主枝干)

简单的解释下这张图的设计(只体现出关键元素)：

ISupportOperation：贴纸的操作接口，这里涉及到贴纸的平移，缩放，旋转，绘制，触摸等操作。

BaseSticker：贴纸基类(抽象类)，这里实现了ISupportOperation的部分方法，主要会对根据变换矩阵对贴纸自身的绘制(矩阵)。

Sticker：贴纸类，这里我们会对用户的手势进行分析处理，得到相关的动作和数据，比如平移的距离，缩放的大小，旋转的角度等，然后交给贴纸基类做具体的绘制。

StickerManager：贴纸的管理类，这里维护着所有的贴纸，可以对贴纸进行状态的管理(比如增删改查，焦点状态等)。

StickerLayout：自定义贴纸布局(自定义View)，这里会根据触摸坐标从贴纸的管理类中获取当前被操作的贴纸，然后再对触摸事件进行分发，交给具体贴纸类处理。

整理一下流程：

用户触摸贴纸布局(StickerLayout)可以得到触摸坐标，根据坐标我们可以在贴纸管理类中(StickerManager)得到对应的贴纸，然后我们把触摸事件分发给贴纸(Sticker)进行触摸事件的分解，得到相关动作和计算数值，然后交给贴纸基类(BaseSticker)完成自身状态变换和相关绘制，最后通知贴纸布局进行界面刷新。

流程图如下：

Sticker贴纸流程图(主枝干)

编码实现：

了解了实现思路，就完成一大半工作了，剩下的只需要我们用代码将它阐述出来即可，下面给出核心代码：

首先当用户触摸贴纸布局(StickerLayout)的时候，需要根据坐标去获取对一个的贴纸(由于添加贴纸的时候是加入一个List集合，所以再取出贴纸的时候，我们应该倒序去遍历这个集合，才可以拿到最近时间添加的那个贴纸)

/**

* 根据触摸坐标返回当前触摸的贴纸

*

* @param x

* @param y

* @return

*/

public Sticker getSticker(float x, float y) {

float[] dstPoints = new float[2];

float[] srcPoints = new float[]{x, y};

for (int i = mStickerList.size() - 1; i >= 0; i--) {

Sticker sticker = mStickerList.get(i);

Matrix matrix = new Matrix();

sticker.getMatrix().invert(matrix);

matrix.mapPoints(dstPoints, srcPoints);

if (sticker.getStickerBitmapBound().contains(dstPoints[0], dstPoints[1])) {

return sticker;

}

}

return null;

}

然后把贴纸交给对应的Sticker类去做处理：

@Override

public boolean onTouch(View v, MotionEvent event) {

switch (event.getAction() & MotionEvent.ACTION_MASK) {

case MotionEvent.ACTION_DOWN:

case MotionEvent.ACTION_POINTER_DOWN:

//单指是否触摸到贴纸

mStick = StickerManager.getInstance().getSticker(event.getX(), event.getY());

if (mStick == null) {

if (event.getPointerCount() == 2) {

//处理双指触摸屏幕，第一指没有触摸到贴纸，第二指触摸到贴纸情况

mStick = StickerManager.getInstance().getSticker(event.getX(1), event.getY(1));

}

}

break;

default:

break;

}

if (mStick != null) {

mStick.onTouch(event);

invalidate();

}

return true;

}

在贴纸类(Sticker)中处理手势的识别、数据计算和动作下发给贴纸基类(BaseSticker)执行：

/**

* 处理触摸事件

*

* @param event

*/

public void onTouch(MotionEvent event) {

switch (event.getAction() & MotionEvent.ACTION_MASK) {

case MotionEvent.ACTION_DOWN:

//有触摸到贴纸

mMode = Sticker.MODE_SINGLE;

//记录按下的位置

mLastSinglePoint.set(event.getX(), event.getY());

break;

case MotionEvent.ACTION_POINTER_DOWN:

if (event.getPointerCount() == 2) {

mMode = Sticker.MODE_MULTIPLE;

//记录双指的点位置

mFirstPoint.set(event.getX(0), event.getY(0));

mSecondPoint.set(event.getX(1), event.getY(1));

//计算双指之间向量

mLastDistanceVector.set(mFirstPoint.x - mSecondPoint.x, mFirstPoint.y - mSecondPoint.y);

//计算双指之间距离

mLastDistance = calculateDistance(mFirstPoint, mSecondPoint);

}

break;

case MotionEvent.ACTION_MOVE:

if (mMode == MODE_SINGLE) {

translate(event.getX() - mLastSinglePoint.x, event.getY() - mLastSinglePoint.y);

mLastSinglePoint.set(event.getX(), event.getY());

}

if (mMode == MODE_MULTIPLE && event.getPointerCount() == 2) {

//记录双指的点位置

mFirstPoint.set(event.getX(0), event.getY(0));

mSecondPoint.set(event.getX(1), event.getY(1));

//操作自由缩放

float distance = calculateDistance(mFirstPoint, mSecondPoint);

//根据双指移动的距离获取缩放因子

float scale = distance / mLastDistance;

scale(scale, scale);

mLastDistance = distance;

//操作自由旋转

mDistanceVector.set(mFirstPoint.x - mSecondPoint.x, mFirstPoint.y - mSecondPoint.y);

rotate(calculateDegrees(mLastDistanceVector, mDistanceVector));

mLastDistanceVector.set(mDistanceVector.x, mDistanceVector.y);

}

break;

case MotionEvent.ACTION_UP:

reset();

break;

}

}

在贴纸基类(BaseSticker)执行贴纸类(Sticker)下发的动作命令：

/**

* 平移操作

*

* @param dx

* @param dy

*/

@Override

public void translate(float dx, float dy) {

mMatrix.postTranslate(dx, dy);

updatePoints();

}

/**

* 缩放操作

*

* @param sx

* @param sy

*/

@Override

public void scale(float sx, float sy) {

mMatrix.postScale(sx, sy, mMidPointF.x, mMidPointF.y);

updatePoints();

}

/**

* 旋转操作

*

* @param degrees

*/

@Override

public void rotate(float degrees) {

mMatrix.postRotate(degrees, mMidPointF.x, mMidPointF.y);

updatePoints();

}

/**

* 当矩阵发生变化的时候，更新坐标点(src坐标点经过matrix映射变成了dst坐标点)

*/

private void updatePoints() {

//更新贴纸点坐标

mMatrix.mapPoints(mDstPoints, mSrcPoints);

}

/**

* 绘制贴纸自身

*

* @param canvas

* @param paint

*/

@Override

public void onDraw(Canvas canvas, Paint paint) {

//绘制贴纸

canvas.drawBitmap(mStickerBitmap, mMatrix, paint);

if (isFocus) {

//绘制贴纸边框

canvas.drawLine(mDstPoints[0] - PADDING, mDstPoints[1] - PADDING, mDstPoints[2] + PADDING, mDstPoints[3] - PADDING, paint);

canvas.drawLine(mDstPoints[2] + PADDING, mDstPoints[3] - PADDING, mDstPoints[4] + PADDING, mDstPoints[5] + PADDING, paint);

canvas.drawLine(mDstPoints[4] + PADDING, mDstPoints[5] + PADDING, mDstPoints[6] - PADDING, mDstPoints[7] + PADDING, paint);

canvas.drawLine(mDstPoints[6] - PADDING, mDstPoints[7] + PADDING, mDstPoints[0] - PADDING, mDstPoints[1] - PADDING, paint);

//绘制移除按钮

canvas.drawBitmap(mDelBitmap, mDstPoints[0] - mDelBitmap.getWidth() / 2 - PADDING, mDstPoints[1] - mDelBitmap.getHeight() / 2 - PADDING, paint);

}

}

最后完成贴纸布局的刷新：

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

List stickerList = StickerManager.getInstance().getStickerList();

for (int i = 0; i < stickerList.size(); i++) {

Sticker sticker = stickerList.get(i);

sticker.onDraw(canvas, mPaint);

}

}

具体的贴纸实现代码在上篇文章已经提过了，所以这里就不再重复的代码粘贴，不清楚的朋友可以看下上篇的文章，或者去github下载源码细看。

好了，到这里文章就结束啦~

源码下载:

这里附上源码地址(欢迎Star，欢迎Fork)：StickerView