Android自定义View基础--Paint设置PorterDuffXfermode图形混合模式实现遮罩效果，例如头像展示_android view遮罩 mpaint.setxfermode

先上效果

利用Android–Paint设置PorterDuffXfermode图形混合模式实现遮罩效果

通过自定义View重写onDraw方法来用Paint实现遮罩效果，我们之间上代码，代码有注释，全部代码如下可以之间运行

public class MaskView extends View {
    private Paint paint;
    private Bitmap bitmap;
    private int centerX;
    private int centerY;
    private float radius;

    public MaskView(Context context) {
        this(context,null);
    }

    public MaskView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

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

    private void init(Context context) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
        paint.setStyle(Paint.Style.FILL);//设置画笔样式为填充
        bitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.girl);//获取被遮罩的图片
        centerX = bitmap.getWidth()/2;//设置圆心位置
        centerY = bitmap.getHeight()/2;
        radius = 100;//没有水波纹动画的情况下设置为40
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);//关闭硬件加速
        canvas.drawBitmap(bitmap,0,0,paint);//绘制图片
        int layerId = canvas.saveLayer(0,0,bitmap.getWidth(),bitmap.getHeight(),paint,Canvas.ALL_SAVE_FLAG);//保存图层
        paint.setColor(Color.WHITE);//设置画笔颜色
        canvas.drawRect(0,0,bitmap.getWidth(),bitmap.getHeight(),paint);//绘制一个图层盖着我们刚才绘制的图片
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//PorterDuffXfermode 设置画笔的图形混合模式
        canvas.drawCircle(centerX,centerY,radius,paint);//画圆
        paint.setXfermode(null);
        canvas.restoreToCount(layerId);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在MainActivity中这样调用即可：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MaskView(this));
    }
}
1
2
3
4
5
6
7
8

我们还可以是用该效果来实现水波纹效果，让图片从中间慢慢展示出来

代码如下：

public class MaskView extends View {
    private Paint paint;
    private Bitmap bitmap;
    private int centerX;//圆心坐标
    private int centerY;
    private float radius;//圆半径
    private final int mDuration = 2000;

    public MaskView(Context context) {
        this(context,null);
    }

    public MaskView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

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

    private void init(Context context) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
        paint.setStyle(Paint.Style.FILL);//设置画笔样式为填充
        bitmap = BitmapFactory.decodeResource(context.getResources(),R.mipmap.girl);//获取被遮罩的图片
        centerX = bitmap.getWidth()/2;//设置圆心位置
        centerY = bitmap.getHeight()/2;
        radius = 0;//没有水波纹动画的情况下设置为40 如果做动画 从0开始

        ValueAnimator animator = ValueAnimator.ofFloat(0, (float) (Math.hypot(bitmap.getWidth(),bitmap.getHeight())/2));
        animator.setInterpolator(new LinearInterpolator());
        animator.setDuration(mDuration);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                radius = (float) animation.getAnimatedValue();
                invalidate();
            }
        });

        animator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);//关闭硬件加速
        canvas.drawBitmap(bitmap,0,0,paint);//绘制图片
        int layerId = canvas.saveLayer(0,0,bitmap.getWidth(),bitmap.getHeight(),paint,Canvas.ALL_SAVE_FLAG);//保存图层
        paint.setColor(Color.WHITE);//设置画笔颜色
        canvas.drawRect(0,0,bitmap.getWidth(),bitmap.getHeight(),paint);//绘制一个图层盖着我们刚才绘制的图片
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//PorterDuffXfermode 设置画笔的图形混合模式
        canvas.drawCircle(centerX,centerY,radius,paint);//画圆
        paint.setXfermode(null);
        canvas.restoreToCount(layerId);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57