一、简述
前段时间公司史无前例的接了一个大数据外包项目(哇~我们又不是外包公司(╯°Д°)╯︵ ┻━┻),要求搞很多图表方便观察运营的数据情况,图表当然要用到MPAndroidChart啦,但并不是所有的图表都可以用它用实现,这时就需要自定义View了,其中有一个要求,如下图所示,这就是本篇要实现的效果:
本篇全文适合像我一样的小白细细观看,如果你很赶时间,就只是进来看看标题上的解决方案,那么请直接看第二部分分析与实现的第5章节《优化解决抗锯齿问题》 。
二、分析与实现
最终效果上图就可以看到了,下面就来想想怎么实现从0实现这个自定义View吧。
1、分析
1)UI
可以看到这个View要根据进度,绘制对应长度的弧(或者说是不完整的环),因为环的颜色是渐变的,不能用程序来控制(或者说不好实现),所以向美术要了如下两张切图:
别看这两个环大小不一,实际上图片的整体尺寸是一样的,都是95*95。
那么接下来就是根据进度把图片的部分区域绘制出来就好了。
2)功能
- 可以自由设置总进度(maxProcess)与当前进度(process)。
- 可以执行绘制动画效果。
3)难点
- canvas绘制bitmap
- canvas裁切功能的使用
- 锯齿出现的原因与解决方法
- PorterDuff的理解与使用
2、实现
1)获取自定义控件宽高
这段可以说是自定义View的模板代码了,就不详细说明,基本上所有的自定义View都这样测量控件宽高,模板代码如下:
public class ArithmeticView extends View {
private int mWidth = 0;// 控件的宽度
private int mHeight = 0;// 控件的高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
switch (widthSpecMode) {
case MeasureSpec.AT_MOST:
mWidth = dp2px(200);
break;
case MeasureSpec.EXACTLY:
case MeasureSpec.UNSPECIFIED:
mWidth = widthSpecSize;
break;
}
switch (heightSpecMode) {
case MeasureSpec.AT_MOST:
mHeight = dp2px(200);
break;
case MeasureSpec.EXACTLY:
case MeasureSpec.UNSPECIFIED:
mHeight = heightSpecSize;
break;
}
setMeasuredDimension(mWidth, mHeight);
}
}
2)初始化加载图片资源
因为是项目特有的自定义View,不考虑通用问题,直接在View创建后加载需要用到的图片资源即可。
private Bitmap mBitmapInner;
private Bitmap mBitmapOuter;
public ArithmeticView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mBitmapInner = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_inner);
mBitmapOuter = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_outer);
}
3)draw()方法实现
因为要绘制的环有2个,分为大小环,故绘制对应环的方法命名为:drawInnerBitmap()、drawOuterBitmap()。
@Override
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
drawInnerBitmap(canvas);
drawOuterBitmap(canvas);
}
private void drawInnerBitmap(Canvas canvas) {
}
private void drawOuterBitmap(Canvas canvas) {
}
可以看到在onDraw()方法中有这样一段代码:
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, >Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
这是为了抗锯齿的,但这里先透露一下,该方法对下面的实现方案一抗锯齿无效。
3、canvas绘制bitmap
1)canvas.drawBitmap()
canvas绘制bitmap用到的方法就是drawBitmap(),它的所有重载方法如下图所示
说明一下,如果你就单单只是把绘制Bitmap绘制出来,那么最后的paint参数可以传入null。
实际上,当你使用drawBitmap()绘制Bitmap时,画笔paint的作用并不大,可以认为无效。
那么多方法,用哪个呢?其实开发中常用的重载方法就如下两个:
public void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
public void drawBitmap(Bitmap bitmap, Rect src, RectF dst, @Nullable Paint paint)
第1个重载方法参数较少,其中left和top表示图片要绘制到canvas的起始位置,这个方法无法指定bitmap的图片要显示的区域(有时一张图片就只需要显示它的四分之一),这就是该重载方法的局限,而第2个重载方法则可以随便指定bitmap要显示的区域,而且是最常用的方法,功能相对更强,这里使用该方法来实现Bitmap的绘制。
2)绘制外环Bitmap
因为2个环的绘制原理一样,所以这里就以绘制外环为例:
private void drawOuterBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth();
int bottom = mBitmapOuter.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
canvas.drawBitmap(mBitmapOuter, src, dsc, null);
}
其中,src表示要图片要被绘制区域(注意,是针对图片来说的),如果只绘制图片的四分之一,则代码如下:
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth() / 2;
int bottom = mBitmapOuter.getHeight() / 2;
Rect src = new Rect(left, top, right, bottom);
而dsc则表示要绘制到canvas上的哪个矩形区域(注意,是针对canvas来说的),前面的懂了,相信这个也不难理解。
这样,图片就绘制出来了,注意此时是没有锯齿的。
4、方案一:使用canvas裁切功能
环的完整绘制在上面已经用drawBitmap()方法实现,那么接下来就是绘制一个不完整的环了。我首先想到的方法就是使用canvas的裁切功能,将canvas的绘制区域先裁切出来,然后再在上面绘制图形,进而实现根据进度绘制图片的一部分。
针对该自定义View,需要说明一点,canvas的可绘制区域应该是一个从中上方开始逆时针打开的扇形(可以想象成一把扇子);用二维坐标系的方式来说的话,就从y轴开始,以原点为圆心,逆时针画圆。
1)canvas.clipXXX()
canvas的裁切功能需要用到clip开头的方法,canvas中所有的clipXXX()方法如下图所示:
绝大部分方法都是为了裁切出一个矩形,而我们这个不一样,它是要裁切出一个扇形!所以只有一个clipPath()方法可用,由我们来自定义裁切形状(同样的,除了矩形以外的任何形状都需要我们自己定义路径)。
2)使用clipPath()根据进度裁切扇形
不管是哪个clipPath()方法,都需要用到Path对象,该path对象就代表了canvas的裁切路径,因为大小环的进度可能不同,但原理一样,所以将path的设置代码抽出来作为一个共用方法,代码如下:
private Path mPath;
private void init() {
...
mPath = new Path();
}
/**
* 设置裁切路径
*
* @param process 当前进度
* @param maxProcess 总进度
*/
private void setClipPath(float process, float maxProcess) {
mPath.reset();
float ratio = process / maxProcess;
if (ratio == 1) {
// 当进度比例为1时,说明进度100%,要完整绘制Bitmap
mPath.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CCW);
} else {
float sweepAngle = ratio * -360;
mPath.moveTo(mWidth / 2, mHeight / 2);// View的中心点位置
mPath.lineTo(mWidth / 2, mHeight);// View的中心点上方位置
mPath.arcTo(new RectF(0, 0, mWidth, mHeight), 270, sweepAngle * mProgressPercent, false);// 根据角度画弧线
mPath.lineTo(mWidth / 2, mHeight / 2);// 最后再回到View的中心点位置,形成一个封闭路径
}
mPath.close();
}
关于Path的moveTo()、lineTo()、arcTo等方法在这里就是不详细科普了,因为方法比较多,要说明可能会花费不少篇幅,而且实际上这些方法顾名就可思义,如果不是很懂的同学自行百度查一下吧。
这里要着重说明一点,Android中的角度问题,如下图所示:
Android中的角度是以x轴为0°开始,以顺时针方向递增,而我们的自定义View要绘制的方向则是逆时针,所以要计算arcTo的sweepAngle时要注意乘以一个负值。
3)canvas的保存与复原
要注意一点,canvas的裁切功能会对后续的绘制产生影响,所以在裁切之前需要将Canvas的当前状态保存一下,在裁切绘制过后将Canvas的状态恢复回来。否则,之后的绘制结果可能并不是你想要的了。
如果不保存与恢复Canvas的状态,那么下次绘制只会在裁切出来的区域中进行。举个例子,假设内环的尺寸只有50*50,你先绘制了内环,但没有保存与恢复Canvas的状态,那么之后在绘制外环时(外环尺寸95*95),你就会发现外环看不到了。
保存Canvas的当前状态代码:
canvas.save(Canvas.CLIP_SAVE_FLAG);
恢复Canvas之前的状态代码:
canvas.restore();
所以外环裁切并绘制的完整代码如下:
private void drawOuterBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth();
int bottom = mBitmapOuter.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
canvas.save(Canvas.CLIP_SAVE_FLAG);
setClipPath(mOuterProcess, mOuterMaxProcess);
canvas.clipPath(mPath);
canvas.drawBitmap(mBitmapOuter, src, dsc, null);
canvas.restore();
}
将进度设置为80%后,绘制出来的效果如下:
注意了,锯齿出现了!!!
5、优化解决抗锯齿问题
为什么?明明对canvas设置了抗锯齿了,怎么还这样?难道是因为在调用canvas.drawBitmap()时,没有传入抗锯齿画笔的原因?错,前面已经说过了,这个paint对drawBitmap()的作用并不大,就算你传入了可以抗锯齿的paint,锯齿依然存在。仔细想想,在使用裁切前后,锯齿的出现情况,你就能发现猫腻,百度及Google大法后,最终得出如下几点结论:
- Android中,Canvas的抗锯齿功能必须使用到画笔Paint。
- clipPath()会使drawBitmap()绘制出来的图像出现锯齿,而且没法解决方法,即使你使用了画笔。
- 可以使用PorterDuff来实现同样的绘制效果。
那么,接下来就开始进行“曲线救国”路线。
6、方案二:使用PorterDuff
对于PorterDuff的介绍这里就不说了,百度吧,或者跳过,直接来看下面这图:
这图很好的表示了PorterDuff.Mode的各种效果,下面是对效果的详细说明。
Mode | 说明 |
---|---|
.CLEAR | 所绘制不会提交到画布上 |
PorterDuff.Mode.SRC | 显示上层绘制图片 |
PorterDuff.Mode.DST | 显示下层绘制图片 |
PorterDuff.Mode.SRC_OVER | 正常绘制显示,上下层绘制叠盖 |
PorterDuff.Mode.DST_OVER | 上下层都显示。下层居上显示 |
PorterDuff.Mode.SRC_IN | 取两层绘制交集。显示上层 |
PorterDuff.Mode.DST_IN | 取两层绘制交集。显示下层 |
PorterDuff.Mode.SRC_OUT | 取上层绘制非交集部分 |
PorterDuff.Mode.DST_OUT | 取下层绘制非交集部分 |
PorterDuff.Mode.SRC_ATOP | 取下层非交集部分与上层交集部分 |
PorterDuff.Mode.DST_ATOP | 取上层非交集部分与下层交集部分 |
PorterDuff.Mode.XOR | 异或:去除两图层交集部分 |
PorterDuff.Mode.DARKEN | 取两图层全部区域,交集部分颜色加深 |
PorterDuff.Mode.LIGHTEN | 取两图层全部,点亮交集部分颜色 |
PorterDuff.Mode.MULTIPLY | 取两图层交集部分叠加后颜色 |
PorterDuff.Mode.SCREEN | 取两图层全部区域,交集部分变为透明色 |
仔细看图中的Src、Dst、SrcIn,有没有什么想法呢?
如果你之前没用过PorterDuff.Mode也不慌,继续"听"我给你吹水,并不难理解。
1)原理与实现
这里要先理解2个单词:src与dst。通俗的说,dst是已经绘制在canvas上的图像,而src则是将要绘制到canvas上的图像(不得不说跟OpenGL的模板测试部分概念很像耶~)。那么,对于我们这个自定义View而言,dst就是那个扇形图像,src就是环,再结合PorterDuff.Mode的SrcIn模式,就可以让环的Bitmap只显示出扇形的部分了。
注意:使用PorterDuff需要禁止硬件加速。
代码很简单,不多废话,如下:
private Paint mPaint;
private void init() {
// 禁止硬件加速,硬件加速会有一些问题,这里禁用掉
setLayerType(LAYER_TYPE_SOFTWARE, null);
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
private void drawOuterBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth();
int bottom = mBitmapOuter.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
mPaint.reset();
setClipPath(mOuterProcess, mOuterMaxProcess);
canvas.drawPath(mPath, mPaint);// 绘制Dst
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式(显示Scr与Dst交接的区域)
canvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
}
效果很棒,没有锯齿了。
2)优化,实现双环无锯齿绘制
前面看似已经用PorterDuff实现了环的无锯齿绘制,但如果内环也是按照上面的代码来写,你就会发现,只显示后绘制的外环。具体原因嘛,我也不太懂,猜测是多次使用PorterDuff,会将之前绘制在Canvas上的图像清除吧。(如果有人知道真实原因,麻烦留言说一下,thx)。既然,直接对canvas操作不可取,那就换个思路吧。
我们要的不过是最后显示出来的不完整的环对吧,那我们可以在另一个Canvas上把这个不完整的环画出来,得到它的Bitmap,再在onDraw()的Canvas上对这个Bitmap进行绘制即可。所以,改进后的代码如下:
private void drawOuterBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth();
int bottom = mBitmapOuter.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
// 1. 在另一个Canvas中使用 path + mBitmapOuter 将最终图形finalBitmap绘制出来。
mPaint.reset();
setClipPath(mOuterProcess, mOuterMaxProcess);
Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
mCanvas.drawPath(mPath, mPaint);// 绘制Dst
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式(显示Scr与Dst交接的区域)
mCanvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
// 2. 再在原来的Canvas中将finalBitmap绘制出来。
canvas.drawBitmap(finalBitmap, 0, 0, null);
}
同样的,内环的代码基本一致,直接看效果吧。
三、完整代码
至于那个执行绘制动画效果的功能并非本文重点,实现上能见仁见智,下面贴出该自定义View的完整代码,当然执行绘制动画效果的功能也在里面(具体实现看animateStart()方法)。完整代码如下:
public class ArithmeticView extends View {
private int mWidth = 0;// 控件的宽度
private int mHeight = 0;// 控件的高度
private Bitmap mBitmapInner;
private Bitmap mBitmapOuter;
private Path mPath;
private float mInnerProcess = 50;
private float mInnerMaxProcess = 100;
private float mOuterProcess = 80;
private float mOuterMaxProcess = 100;
private float mProgressPercent = 1;// 当前进度百分比
private ValueAnimator mValueAnimator;
private Paint mPaint;
public ArithmeticView(Context context) {
this(context, null);
}
public ArithmeticView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ArithmeticView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
switch (widthSpecMode) {
case MeasureSpec.AT_MOST:
mWidth = dp2px(200);
break;
case MeasureSpec.EXACTLY:
case MeasureSpec.UNSPECIFIED:
mWidth = widthSpecSize;
break;
}
switch (heightSpecMode) {
case MeasureSpec.AT_MOST:
mHeight = dp2px(200);
break;
case MeasureSpec.EXACTLY:
case MeasureSpec.UNSPECIFIED:
mHeight = heightSpecSize;
break;
}
setMeasuredDimension(mWidth, mHeight);
}
private void init() {
// 禁止硬件加速,硬件加速会有一些问题,这里禁用掉
setLayerType(LAYER_TYPE_SOFTWARE, null);
mBitmapInner = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_inner);
mBitmapOuter = BitmapFactory.decodeResource(getResources(), R.mipmap.main_arithmetic_outer);
mPath = new Path();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
drawInnerBitmap(canvas);
drawOuterBitmap(canvas);
}
private void drawInnerBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapInner.getWidth();
int bottom = mBitmapInner.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
mPaint.reset();
setClipPath(mInnerProcess, mInnerMaxProcess);
Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
mCanvas.drawPath(mPath, mPaint);// 绘制Dst
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式(显示Scr与Dst交接的区域)
mCanvas.drawBitmap(mBitmapInner, src, dsc, mPaint);// 绘制Src
canvas.drawBitmap(finalBitmap, 0, 0, null);
}
private void drawOuterBitmap(Canvas canvas) {
int left = 0;
int top = 0;
int right = mBitmapOuter.getWidth();
int bottom = mBitmapOuter.getHeight();
Rect src = new Rect(left, top, right, bottom);
RectF dsc = new RectF(0, 0, mWidth, mHeight);
/*------------------ 方案1:使用clipPath方式绘制图片,但无法抗锯齿 ------------------*/
// canvas.save(Canvas.CLIP_SAVE_FLAG);
// setClipPath(mOuterProcess, mOuterMaxProcess);
// canvas.clipPath(mPath);
// canvas.drawBitmap(mBitmapOuter, src, dsc, null);
// canvas.restore();
/*------------------ 方案二:使用PorterDuff方式,可以抗锯齿 ------------------*/
// 1. 在另一个Canvas中使用 path + mBitmapOuter 将最终图形finalBitmap绘制出来。
mPaint.reset();
setClipPath(mOuterProcess, mOuterMaxProcess);
Bitmap finalBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);// 一张白纸位图
Canvas mCanvas = new Canvas(finalBitmap);// 用指定的位图构造一个画布来绘制
mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));// 画布绘制Bitmap时搞锯齿
mCanvas.drawPath(mPath, mPaint);// 绘制Dst
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 设置转换模式(显示Scr与Dst交接的区域)
mCanvas.drawBitmap(mBitmapOuter, src, dsc, mPaint);// 绘制Src
// 2. 再在原来的Canvas中将finalBitmap绘制出来。
canvas.drawBitmap(finalBitmap, 0, 0, null);
}
/**
* 设置裁切路径
*
* @param process 当前进度
* @param maxProcess 总进度
*/
private void setClipPath(float process, float maxProcess) {
mPath.reset();
float ratio = process / maxProcess;
if (ratio == 1) {
mPath.addCircle(mWidth / 2, mHeight / 2, mWidth / 2, Path.Direction.CCW);
} else {
float sweepAngle = ratio * -360;
mPath.moveTo(mWidth / 2, mHeight / 2);
mPath.lineTo(mWidth / 2, mHeight);
mPath.arcTo(new RectF(0, 0, mWidth, mHeight), 270, sweepAngle * mProgressPercent, false);
mPath.lineTo(mWidth / 2, mHeight / 2);
}
mPath.close();
}
public float getInnerProcess() {
return mInnerProcess;
}
public void setInnerProcess(float innerProcess) {
mInnerProcess = innerProcess;
postInvalidate();
}
public float getInnerMaxProcess() {
return mInnerMaxProcess;
}
public void setInnerMaxProcess(float innerMaxProcess) {
mInnerMaxProcess = innerMaxProcess;
}
public float getOuterProcess() {
return mOuterProcess;
}
public void setOuterProcess(float outerProcess) {
mOuterProcess = outerProcess;
postInvalidate();
}
public float getOuterMaxProcess() {
return mOuterMaxProcess;
}
public void setOuterMaxProcess(float outerMaxProcess) {
mOuterMaxProcess = outerMaxProcess;
}
/**
* 开始动画
*
* @param duration 动画时长(毫秒)
*/
public void animateStart(long duration) {
if (mValueAnimator != null) {
mValueAnimator.cancel();
mValueAnimator = null;
}
mValueAnimator = ValueAnimator.ofFloat(0, 100);
mValueAnimator.setDuration(duration).start();
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Float value = (Float) animation.getAnimatedValue();
if (value == 100) {
mValueAnimator.cancel();
mValueAnimator = null;
}
mProgressPercent = value / 100;
postInvalidate();
}
});
}
private int dp2px(int dp) {
float density = getContext().getResources().getDisplayMetrics().density;
return (int) (dp * density);
}
}
![](http://img.e-com-net.com/image/info10/96b39ef088e749e492596a55652c5cdf.png)