前言

• 在开发应用的过程中经常会把图片进行圆角展示，相信大家都有各自的解决方案

常用的解决方案

• 把要显示的图片裁剪成圆形图片，然后展示。
• 使用一张中间镂空的图片盖在原有图片上方。
• 重写ImageView 的onDraw方法，取到需要绘制的drawable转化为Bitmap 使用BitmapShader 绘制成圆角
  以上三种方案我在之前开发中都有用过，我最倾向于第三种，这种方法灵活，使用起来也比较简单。

由BitmapShade得到的启发

既然BitmapShade可以做到圆角处理那么Xfermode根据绘制图像的不同叠加显示形式应该也能做到圆角
接下来我就进行了一些列的尝试

继承ImageView重写onDraw

public class MyImage extends ImageView {

• 初始化画笔，设置图片绘制叠加方式PorterDuff.Mode.DST_IN，点击view切换PorterDuff.Mode

   private void initPaint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
       if (paint == null) {
            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(Color.BLACK);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
            setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (i > modes.length - 1) i = 0;
                    paint.setXfermode(new PorterDuffXfermode(modes[i]));
                    I++;
                    invalidate();
                }
            });
        }
    }

• 重写onDraw,利用saveLayer使PorterDuff.Mode生效，把后面绘制的圆角矩形和imageView自身绘制叠加

    @Override
    protected void onDraw(Canvas canvas) {
        int count = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);
        super.onDraw(canvas);
        canvas.drawRoundRect(new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom()),
                cornerRadius, cornerRadius, paint);
        canvas.restoreToCount(count);
    }

上面的方案经过我的尝试是可以产生一些叠加效果的，但是始终没有显示出圆角图片，我甚至循环把每个PorterDuff.Mode都试了一遍，从上面代码可以看出每点击一次我会换一个Model ，最终也没能得到理想效果，我也没找到具体问题出在哪了，如果有哪位老铁清楚可以告知一二

换一个姿势

虽然上面的尝试没有成功，但是我仍觉得有戏，是不是换一种方式就能成功？
查看了canvas相关的绘制方法找到了canvas.drawPath是不是用他就能达到目的?
虽然我不太明白canvas.drawPath和canvas.drawRoundRect在绘制的过程中有什么内在的区别。
不多说开始尝试

public class MyImage extends ImageView {

• 初始化画笔和Path设置绘制叠加模式

  private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        if (paint == null) {
            paint = new Paint();
            mClipPath = new Path();
            paint.setAntiAlias(true);
            paint.setColor(Color.YELLOW);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        }
    }

• 当view改变大小后重新设置一些参数，主要优化性能，其实可以全部放到onDraw中。

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        layer = new RectF(0, 0, w, h);
        RectF pathRect = new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
        mClipPath.reset();
        mClipPath.addRoundRect(pathRect, cornerRadius, cornerRadius, Path.Direction.CW);
    }

• 绘制path

  @Override
    protected void onDraw(Canvas canvas) {
        int count = canvas.saveLayer(layer, null, Canvas.ALL_SAVE_FLAG);
        super.onDraw(canvas);
        canvas.drawPath(mClipPath, paint);
        canvas.restoreToCount(count);
    }

居然成功了！无图无真相？

public class MyImage extends ImageView {

以蓝色填充ImageView
<com.xxx.xxx.xxx.MyImage
        android:layout_centerInParent="true"
        android:src="@color/colorPrimaryDark"
        android:scaleType="centerCrop"
        android:layout_width="100dp"
        android:layout_height="300dp" />

QQ20180608-153432@2x.png

附上完整代码

package com.example.zhaoqingpu.testandroid;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class MyImage extends ImageView {
    private Paint paint;
    private int cornerRadius = 100;
    private RectF layer;  //内容区域
    public Path mClipPath;// 剪裁区域路径

    public MyImage(Context context) {
        super(context);
        init(context, null, 0);
    }

    public MyImage(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public MyImage(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        if (paint == null) {
            paint = new Paint();
            mClipPath = new Path();
            paint.setAntiAlias(true);
            paint.setColor(Color.YELLOW);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        layer = new RectF(0, 0, w, h);
        RectF pathRect = new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
        mClipPath.reset();
        mClipPath.addRoundRect(pathRect, cornerRadius, cornerRadius, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int count = canvas.saveLayer(layer, null, Canvas.ALL_SAVE_FLAG);
        super.onDraw(canvas);
        canvas.drawPath(mClipPath, paint);
        canvas.restoreToCount(count);
    }
}

至此结束，谢谢！