上个月写了一篇《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