一、简述

前段时间公司史无前例的接了一个大数据外包项目（哇~我们又不是外包公司(╯°Д°)╯︵ ┻━┻），要求搞很多图表方便观察运营的数据情况，图表当然要用到MPAndroidChart啦，但并不是所有的图表都可以用它用实现，这时就需要自定义View了，其中有一个要求，如下图所示，这就是本篇要实现的效果：

本篇全文适合像我一样的小白细细观看，如果你很赶时间，就只是进来看看标题上的解决方案，那么请直接看第二部分分析与实现的第5章节《优化解决抗锯齿问题》 。

二、分析与实现

最终效果上图就可以看到了，下面就来想想怎么实现从0实现这个自定义View吧。

1、分析

1）UI

可以看到这个View要根据进度，绘制对应长度的弧（或者说是不完整的环），因为环的颜色是渐变的，不能用程序来控制（或者说不好实现），所以向美术要了如下两张切图：

别看这两个环大小不一，实际上图片的整体尺寸是一样的，都是95*95。

那么接下来就是根据进度把图片的部分区域绘制出来就好了。

2）功能

1. 可以自由设置总进度（maxProcess）与当前进度（process）。
2. 可以执行绘制动画效果。

3）难点

1. canvas绘制bitmap
2. canvas裁切功能的使用
3. 锯齿出现的原因与解决方法
4. 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的各种效果，下面是对效果的详细说明。

仔细看图中的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);
    }
}

欢迎关注微信公众号：全栈行动