【Android】PorterDuffXfermode混合效果

作者: 代码充电宝 | 来源:发表于2020-01-04 16:07 被阅读0次

（1）Xfermode概述

Xfermode是一种将所绘制的图形的像素按照一定模式进行混合从而形成新的像素值
基本有以下几种形式，左图是官网提供的，代码导致理解有误差，以右图为准

（2）默认效果

后绘制的覆盖前面绘制的

public class MyView extends View {

    private static final int SIZE = 200;

    private Paint mPaint;

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

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

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

    private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景色
        canvas.drawARGB(255, 255, 156, 161);

        // 画圆
        mPaint.setColor(0xFFFF0000);
        canvas.drawCircle(SIZE / 2, SIZE / 2, SIZE / 2, mPaint);

        // 画矩形
        mPaint.setColor(0xFF00FF00);
        canvas.drawRect(SIZE / 2, SIZE / 2, SIZE * 3 / 2, SIZE * 3 / 2, mPaint);
    }
}

（3）layer图层理解

不设置默认情况下，后面绘制的覆盖老的

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景色
        canvas.drawARGB(255, 255, 156, 161);

        // 画圆
        mPaint.setColor(0xFFFF0000);
        canvas.drawCircle(SIZE / 2, SIZE / 2, SIZE / 2, mPaint);

        // 画矩形
        mPaint.setColor(0xFF00FF00);
        canvas.drawRect(SIZE / 2, SIZE / 2, SIZE * 3 / 2, SIZE * 3 / 2, mPaint);
    }

PorterDuff.Mode.CLEAR：同一个图层重合的部分会被置为透明（此时Activity的背景就是黑色）

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景色
        canvas.drawARGB(255, 255, 156, 161);

        // 画圆
        mPaint.setColor(0xFFFF0000);
        canvas.drawCircle(SIZE / 2, SIZE / 2, SIZE / 2, mPaint);

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        // 画矩形
        mPaint.setColor(0xFF00FF00);
        canvas.drawRect(SIZE / 2, SIZE / 2, SIZE * 3 / 2, SIZE * 3 / 2, mPaint);
        
        mPaint.setXfermode(null);
    }

图层理解

1、canvas默认就有一个layer，默认都绘制在这个图层上
2、canvas.saveLayer()可以新建一个layer，新建的layer放置在canvas默认layer的上部，之后我们所有的绘制操作都绘制到了我们新建的图层上，默认这个图层是透明的
3、canvas.saveLayer()方法会返回一个int值，用于表示layer的ID，在我们对这个新layer绘制完成后可以通过调用canvas.restoreToCount(layer)或者canvas.restore()把这个layer绘制到canvas默认的layer上去，这样就完成了一个layer的绘制工作。

image.png

背景颜色在默认图层
圆形和方形在新建图层，混合模式为CLEAR，最终效果显示为3/4圆
图层合并后显示如上

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景色
        canvas.drawARGB(255, 255, 156, 161);

        // 新建一个图层
        int saveLayer = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);

        // 画圆
        mPaint.setColor(0xFFFF0000);
        canvas.drawCircle(SIZE / 2, SIZE / 2, SIZE / 2, mPaint);

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        // 画矩形
        mPaint.setColor(0xFF00FF00);
        canvas.drawRect(SIZE / 2, SIZE / 2, SIZE * 3 / 2, SIZE * 3 / 2, mPaint);

        mPaint.setXfermode(null);

        // 将新建的图层绘制到默认图层上
        canvas.restoreToCount(saveLayer);
    }

（4）混合效果尝试

测试代码，修改PorterDuff模式

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 背景色
        canvas.drawARGB(255, 255, 156, 161);

        int saveLayer = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);

        // 画圆
        mPaint.setColor(0xFFFF0000);
        canvas.drawCircle(SIZE / 2, SIZE / 2, SIZE / 2, mPaint);


        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        // 画矩形
        mPaint.setColor(0xFF00FF00);
        canvas.drawRect(SIZE / 2, SIZE / 2, SIZE * 3 / 2, SIZE * 3 / 2, mPaint);

        mPaint.setXfermode(null);
        canvas.restoreToCount(saveLayer);
    }

混合模式

1.PorterDuff.Mode.CLEAR：清空混合区域，变为全透明
2.PorterDuff.Mode.SRC：显示上层绘制图片，下层也显示
3.PorterDuff.Mode.DST：只显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER：正常绘制显示，上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER：上下层都显示。下层居上显示。
6.PorterDuff.Mode.SRC_IN：取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN：取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT：取上层绘制非交集部分。显示下层
9.PorterDuff.Mode.DST_OUT：取下层绘制非交集部分。不显示上层
10.PorterDuff.Mode.SRC_ATOP：取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP：取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR：异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN：取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN：取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY：取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN：取两图层全部区域，交集部分变为透明色