上个月写了一篇《Android开发之仿微博贴纸效果实现——基础篇》，文章中提到还有一篇进阶篇要写，很早就想动笔了，因中途去维护了开源库《高仿微信图片选择器2.0版本》，导致耽搁到了现在，刚好趁这几天过年在家休息，把这篇文章给完成了。
我们来回顾下上篇文章所写的内容，我们通过canvas.drawBitmap(mBitmap, mMatrix, null);将Bitmap图像绘制到Canvas上，然后用一个矩阵Matrix配合不同手势来维护图像的变换状态（移动、缩放、旋转）。
这篇文章主要来讲一下多图贴纸的实现思路和代码的设计重构，在上篇文章中，我们实现单个贴纸效果是一个自定义View，那么多个贴纸要如何实现呢？可能有的朋友会想，既然已经实现了单个贴纸，那么多个贴纸只要依葫芦画瓢，让一个ViewGroup去装载多个贴纸不就可以了？确实没毛病，这样做也是可以的，不过中间可能会遇到一些麻烦，比如状态的管理（当多个贴纸重叠在一起时，触摸焦点的判断等）而且之前的实现代码是面向过程的，一整坨的代码维护起来也不是那么的舒服，这里我想介绍一种新思路，用更优雅的方式去实现多图贴纸。
国际惯例，先看一下实现的效果图：
关于贴纸的核心代码其实并没有改变（矩阵的变换，坐标点的映射，角度、缩放值的计算等），有了这个前提后，我们抛开代码层面来捋一下思路，想想如何更优雅的实现这个多图贴纸效果。
开源库的使用：
为了方便大家使用，这里我把贴纸库做了封装，目前已经开源了，有什么建议可以随时反馈给我，我会更新维护上去，传送门：StickerView
1、如何在项目中引入该贴纸库：
//gradle引入此行
compile 'com.lcw.library:StickeView:1.0.1'
2、布局设置：
3、添加贴纸：
Sticker sticker = new Sticker(mContext,mBitmap);
mStickerLayout.addSticker(sticker);
好了，开始我们今天的讲解。
实现思路：
首先我们可以把贴纸看成一个独立个体，在个体里包含了图片，矩阵，初始坐标，焦点等属性，在构建完这些属性后，需要通过Canvas绘制出来 ，还有手势操作，我们通过手势去识别出当前的操作类型和计算出变化的数值，动态去改变矩阵，再通过Canvas绘制出来，其实这些和View并没有直接的关系，所以我们可以把贴纸抽象成一个对象，根据面向对象的编程思想，我们可以大致得到下面这张图：
简单的解释下这张图的设计（只体现出关键元素）：
ISupportOperation：贴纸的操作接口，这里涉及到贴纸的平移，缩放，旋转，绘制，触摸等操作。
BaseSticker：贴纸基类（抽象类），这里实现了ISupportOperation的部分方法，主要会对根据变换矩阵对贴纸自身的绘制（矩阵）。
Sticker：贴纸类，这里我们会对用户的手势进行分析处理，得到相关的动作和数据，比如平移的距离，缩放的大小，旋转的角度等，然后交给贴纸基类做具体的绘制。
StickerManager：贴纸的管理类，这里维护着所有的贴纸，可以对贴纸进行状态的管理（比如增删改查，焦点状态等）。
StickerLayout：自定义贴纸布局（自定义View），这里会根据触摸坐标从贴纸的管理类中获取当前被操作的贴纸，然后再对触摸事件进行分发，交给具体贴纸类处理。
整理一下流程：
用户触摸贴纸布局（StickerLayout）可以得到触摸坐标，根据坐标我们可以在贴纸管理类中（StickerManager）得到对应的贴纸，然后我们把触摸事件分发给贴纸（Sticker）进行触摸事件的分解，得到相关动作和计算数值，然后交给贴纸基类（BaseSticker）完成自身状态变换和相关绘制，最后通知贴纸布局进行界面刷新。
流程图如下：
编码实现：
了解了实现思路，就完成一大半工作了，剩下的只需要我们用代码将它阐述出来即可，下面给出核心代码：
首先当用户触摸贴纸布局（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