【Android】PorterDuffXfermode混合效果

2020-01-04  本文已影响0人  代码充电宝

(1)Xfermode概述

<a name="1zF5m"></a>

(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);
    }
}

<a name="PLqBj"></a>

(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);
    }
    @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
    @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);
    }

<a name="Kzo01"></a>

(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);
    }

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:取两图层全部区域,交集部分变为透明色

上一篇 下一篇

猜你喜欢

热点阅读