我们来回顾下上篇文章所写的内容，我们通过canvas.drawBitmap(mBitmap, mMatrix, null);将Bitmap图像绘制到Canvas上，然后用一个矩阵Matrix配合不同手势来维护图像的变换状态（移动、缩放、旋转）。
这篇文章主要来讲一下多图贴纸的实现思路和代码的设计重构，在上篇文章中，我们实现单个贴纸效果是一个自定义View，那么多个贴纸要如何实现呢？可能有的朋友会想，既然已经实现了单个贴纸，那么多个贴纸只要依葫芦画瓢，让一个ViewGroup去装载多个贴纸不就可以了？确实没毛病，这样做也是可以的，不过中间可能会遇到一些麻烦，比如状态的管理（当多个贴纸重叠在一起时，触摸焦点的判断等）而且之前的实现代码是面向过程的，一整坨的代码维护起来也不是那么的舒服，这里我想介绍一种新思路，用更优雅的方式去实现多图贴纸。
国际惯例，先看一下实现的效果图：
stickerview.gif
关于贴纸的核心代码其实并没有改变（矩阵的变换，坐标点的映射，角度、缩放值的计算等），有了这个前提后，我们抛开代码层面来捋一下思路，想想如何更优雅的实现这个多图贴纸效果。
开源库的使用：
为了方便大家使用，这里我把贴纸库做了封装，目前已经开源了，有什么建议可以随时反馈给我，我会更新维护上去，传送门：StickerView
1、如何在项目中引入该贴纸库：
//gradle引入此行compile 'com.lcw.library:StickeView:1.0.1'
2、布局设置：
<com.lcw.library.stickerview.StickerLayout 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<Sticker> stickerList = StickerManager.getInstance().getStickerList(); for (int i = 0; i < stickerList.size(); i++) {
Sticker sticker = stickerList.get(i);
sticker.onDraw(canvas, mPaint);
}
}具体的贴纸实现代码在上篇文章已经提过了，所以这里就不再重复的代码粘贴，不清楚的朋友可以看下上篇的文章，或者去github下载源码细看。
作者：李晨玮
链接：https://www.jianshu.com/p/f1b0e4adae34
随时随地看视频
