Android 绘图学习

ComposeShader，PorterDuff.mode及Xfermode

1 ComposeShader 简介

ComposeShader 组合另外两种shader的效果。
ComposeShader构造函数：

/**
 * Create a new compose shader, given shaders A, B, and a combining mode.
 * When the mode is applied, it will be given the result from shader A as its
 * "dst", and the result from shader B as its "src".
 *
 * @param shaderA  The colors from this shader are seen as the "dst" by the mode
 * @param shaderB  The colors from this shader are seen as the "src" by the mode
 * @param mode     The mode that combines the colors from the two shaders. If mode
 *                 is null, then SRC_OVER is assumed.
*/
public ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull Xfermode mode) ；
/**
 * Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.
 * When the mode is applied, it will be given the result from shader A as its
 * "dst", and the result from shader B as its "src".
 *
 * @param shaderA  The colors from this shader are seen as the "dst" by the mode
 * @param shaderB  The colors from this shader are seen as the "src" by the mode
 * @param mode     The PorterDuff mode that combines the colors from the two shaders.
*/
public ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB,
        @NonNull PorterDuff.Mode mode) ；

参数说明：
shaderA,shaderB:要混合的两种shader，
Xfermode mode： 组合两种shader颜色的模式，
PorterDuff.Mode mode: 组合两种shader颜色的模式。

2 Xfermode是什么呢？

Xfermode称为图形混合模式也被称为过渡模式，把两个图形混合成一张图。

Xfermode 实现类有AvoidXfermode，PixelXorXfermode，PorterDuffXfermode，但是AvoidXfermode，PixelXorXfermode都已经被标识不推荐使用了，所以就只有PorterDuffXfermode一个实现类。PorterDuffXfermode用于图形合成时的图像过渡模式计算。
前两个实现类在API level 16被标记为Deprecated了（因为不支持硬件加速），用也可以，但是需要关闭硬件加速，高版本api默认打开硬件加速，如果需要关闭硬件加速，无法发挥OpenGLes的作用，也就无法充分利用GPU绘图能力，有关硬件加速请看https://developer.android.com/guide/topics/graphics/hardware-accel；

不同版本对硬件加速的支持程度（摘抄自官网）:

构造函数：
PorterDuffXfermode(PorterDuff.Mode mode)
mode：混合图像模式。
代码示例：

canvas.drawColor(Color.WHITE);
        RectF rectF = new RectF(0, 0, width, height);
        canvas.saveLayer(rectF,mPaint);
        canvas.drawBitmap(dstBmp, 0, 0, mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(srcBmp, 0, 0, mPaint);
        mPaint.setXfermode(null);
        canvas.restore();

3 什么是PorterDuff.Mode?

Porter--Duff 分别是发明“Compositing Digital Images”两位学者的名字缩写，图形混合有很多种模式。PorterDuff.Mode分为Alpha合成模式和混合模式。图像合成就是将源像素和背景像素的颜色进行混合，最终显示的颜色取决于其RGB颜色分量和Alpha值。
Android 中PorterDuff.Mode模式包括：
Mode.CLEAR;
Mode.SRC;
Mode.DST;
Mode.SRC_OVER;
Mode.DST_OVER;
Mode.SRC_IN;
Mode.DST_IN;
Mode.SRC_OUT;
Mode.DST_OUT;
Mode.SRC_ATOP;
Mode.DST_ATOP;
Mode.XOR;
Mode.DARKEN;
Mode.LIGHTEN;
Mode.MULTIPLY;
Mode.SCREEN;
Mode.ADD;
Mode.OVERLAY;

关于PorterDuff.Mode的详细说明，请看android Developer的官网说明：https://developer.android.com/reference/android/graphics/PorterDuff.Mode
比较旧的混合标识图片：

新的标识模式说明：
原图，目标图：先绘制的是目标图，后绘制的是原图。
举例说明：
目标图片：

源图片：

CLEAR：
清除模式，[0, 0]，即图像中所有像素点的alpha和颜色值均为0，此时所有图片不显示，所以在学习Canvas，可以设置画笔的Xfermode，mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));可以清空画布。

SRC：
只保留原图像的 alpha 和 color ，所以绘制出来只有源图。

DST：
只保留了目标图像的alpha和color值，所以绘制出来的只有目标图。

SRC_OVER： 源图像被绘制在目标图像的上方

DST_OVER： 目标图像被绘制在源图像的上方

SRC_IN： 在两者相交的地方绘制源图像，并且绘制的效果会受到目标图像对应地方透明度的影响

DST_IN： 与SRC_IN 对比，在两者相交的地方绘制目标图像，并且绘制的效果会受到源图像对应地方透明度的影响

SRC_OUT： 在不相交的地方绘制源图像，表示如果相交处的目标色的alpha是完全不透明的，这时候源图像会完全被过滤掉，否则会受到相交处目标色 alpha 影响，呈现出对应色值。

DST_OUT：对比SRC_OUT , 在不相交的地方绘制目标图像，相交处根据源图像alpha进行过滤，完全不透明处则完全过滤，完全透明则不过滤。

SRC_ATOP： 源图像和目标图像相交处绘制源图像，不相交的地方绘制目标图像，并且相交处的效果会受到源图像和目标图像alpha的影响

DST_ATOP： 源图像和目标图像相交处绘制目标图像，不相交的地方绘制源图像，并且相交处的效果会受到源图像和目标图像alpha的影响

XOR： 在不相交的地方按原样绘制源图像和目标图像，相交的地方受到对应alpha和颜色值影响，按公式进行计算，如果都完全不透明则相交处完全不绘制。

DARKEN： 效果变暗，即进行对应像素的比较，取较暗值，如果色值相同则进行混合。

LIGHTEN： 对比DARKEN ，DARKEN 的目的是变暗，LIGHTEN 的目的则是变亮，如果在均完全不透明的情况下，色值取源色值和目标色值中的较大值，否则按上面算法进行计算。

MULTIPLY： 正片叠底，源图像素颜色值乘以目标图像素颜色值除以255得到混合后图像像素颜色值。结果色总是较暗的颜色，任何颜色与黑色复合产生黑色，任何颜色与白色复合保持不变，当用黑色或白色以外的颜色绘画时，绘画工具绘制的连续描边产生逐渐变暗的颜色。

SCREEN： 滤色，保留两个图层中较白的部分，较暗的部分被遮盖；当一层使用了滤色（屏幕）模式时，图层中纯黑的部分变成完全透明，纯白部分完全不透明，其他的颜色根据颜色级别产生半透明的效果。

ADD： 饱和度相加，不常用

OVERLAY： 像素是进行 Multiply （正片叠底）混合还是 Screen （屏幕）混合，取决于底层颜色，但底层颜色的高光与阴影部分的亮度细节会被保留。

4 paint.setXfermode

只对bitmap起作用，修改developer的原图目标图，边上变成透明：
代码说明：
生成两张700*700的图片，在图片的内部绘制两个能够相交的图形，然后在view中分别绘制两个bitmap，就可以看到上面的结果，注意由于两个图片一样大，所以不想交的部分会受另外一张图的透明度的影响。

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;

public class ViewDemo12 extends View {

    private int width = 700;
    private int height = 700;
    private Bitmap dstBmp;
    private Bitmap srcBmp;
    private Paint mPaint;
    public ViewDemo12(Context context, AttributeSet attrs) {
        super(context, attrs);
        dstBmp = makeDst(width,height);
        srcBmp = makeSrc(width,height);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        RectF rectF = new RectF(0, 0, 700, 700);
        canvas.saveLayer(rectF,mPaint);
        canvas.drawBitmap(dstBmp, 0, 0, mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.OVERLAY));
        canvas.drawBitmap(srcBmp, 0, 0, mPaint);
        mPaint.setXfermode(null);
        canvas.restore();

    }

    static Bitmap makeDst(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

        p.setColor(0xFFE91E63);
        c.drawOval(new RectF(200, 20, 700, 520), p);
        return bm;
    }

    static Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

        p.setColor(0xFF2196F3);
        c.drawRect(20, 200,520,700, p);
        return bm;
    }

}

5 setXfermode 应用

前面我们利用BitmapShader实现了不同形状的图形，利用Xfermode也可以实现，利用SRC_IN。

public class ViewDemo13 extends View {

    private int width = 700;
    private int height = 700;
    private Bitmap dstBmp;
    private Bitmap srcBmp;
    private Paint mPaint;
    public ViewDemo13(Context context, AttributeSet attrs) {
        super(context, attrs);
        dstBmp = BitmapFactory.decodeResource(getResources(), R.drawable.hongbao);
        width = dstBmp.getWidth();
        height = dstBmp.getHeight();
        srcBmp = makeSrc(width,height);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        RectF rectF = new RectF(0, 0, width, height);
        canvas.saveLayer(rectF,mPaint);
        canvas.drawBitmap(dstBmp, 0, 0, mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(srcBmp, 0, 0, mPaint);
        mPaint.setXfermode(null);
        canvas.restore();
    }

    static Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(0xFFFFFFFF);
        p.setStyle(Paint.Style.FILL);
        c.drawRoundRect(0, 200,520,700,30,30, p);
        return bm;
    }
}

除此之外还能实现图片变亮，图片局部变暗，图片显示一部分，图片擦除等等诸多效果。

6 ComposeShader

混合两种shader，shader可以是BitmapShader,LinearGradient,RadialGradient,SweepGradient，所以可以有很多种组合。由于最后一个参数跟PorterDuff.mode有关，所以mode应用时将把从shaderA（ComposeShader 第一个参数）中获取的结果作为目标图像，shaderB（ComposeShader第二个参数）中获取的结果作为源图像，进行混合叠加。如果相交的两个图像大小不同，就会存在不想交的部分，不想交的部分是不会相互影响的，下面给出的示例代码，是两个大小相同的图像，完全透明，内部绘制了不透明的图形。

public class ViewDemo14 extends View {

    private int width = 700;
    private int height = 700;
    private Bitmap dstBmp;
    private Paint mPaint;
    BitmapShader bitmapShader;
    LinearGradient linearGradient;
    public ViewDemo14(Context context, AttributeSet attrs) {
        super(context, attrs);
        dstBmp = BitmapFactory.decodeResource(getResources(), R.drawable.hongbao);
        width = dstBmp.getWidth();
        height = dstBmp.getHeight();
        bitmapShader = new BitmapShader(dstBmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        linearGradient = new LinearGradient(0, 0, width, height, Color.RED, Color.GREEN, Shader.TileMode.CLAMP);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        RectF rectF = new RectF(0, 0, width, height);
        canvas.saveLayer(rectF,mPaint);
        ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.ADD);
        mPaint.setShader(composeShader);
        canvas.drawRect(0, 0, width,height,mPaint);
        mPaint.setXfermode(null);
        canvas.restore();

    }
}

由于内容较多，本篇只是概述，后面会更加详细的讲解PorterDuff.mode及Xfermode。

android绘图之Paint(1)
android绘图之Canvas基础（2）
Android绘图之Path（3）
Android绘图之drawText绘制文本相关（4）
Android绘图之Canvas概念理解（5）
Android绘图之Canvas变换（6）
Android绘图之Canvas状态保存和恢复（7）
Android绘图之PathEffect （8）
Android绘图之LinearGradient线性渐变（9）
Android绘图之SweepGradient（10）
Android绘图之RadialGradient 放射渐变（11）
Android绘制之BitmapShader（12）
Android绘图之ComposeShader，PorterDuff.mode及Xfermode（13）
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线（14）
Android绘图之贝塞尔曲线简介（15）
Android绘图之PathMeasure（16）
Android 动态修改渐变 GradientDrawable