ProterDuff 使用详解

开头我们来看 ProterDuff 这个词。

好神奇的单词，完全不知道什么意思对不对（有木有），上网一搜原来是关于2D图像组合的一种理论。

这是豆瓣上的解释：http://www.douban.com/note/143111853/

那么我们为什么要组合2D图形呢？我们先来看一组图：

这是桌面应用程序在触摸和拖动图标时候的状态，图1中的白色围绕着bitmap的边缘，图2也是。找到桌面源码中的HolographicOutlineHelper.java查看，原来是用到了ProterDuff.Mode组合出来的图形。当然还有大量的计算。下面介绍一下ProterDuff是如何来组合图形的

这是官网文档

枚举类

public static final enum

PorterDuff.Mode

extends Enum<PorterDuff.Mode>

java.lang.Object

↳ java.lang.Enum<android.graphics.PorterDuff.Mode>

↳

android.graphics.PorterDuff.Mode

Summary

Enum Values
PorterDuff.Mode	ADD	Saturate(S + D)
PorterDuff.Mode	CLEAR	[0, 0]
PorterDuff.Mode	DARKEN	[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]
PorterDuff.Mode	DST	[Da, Dc]
PorterDuff.Mode	DST_ATOP	[Sa, Sa * Dc + Sc * (1 - Da)]
PorterDuff.Mode	DST_IN	[Sa * Da, Sa * Dc]
PorterDuff.Mode	DST_OUT	[Da * (1 - Sa), Dc * (1 - Sa)]
PorterDuff.Mode	DST_OVER	[Sa + (1 - Sa)Da, Rc = Dc + (1 - Da)Sc]
PorterDuff.Mode	LIGHTEN	[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]
PorterDuff.Mode	MULTIPLY	[Sa * Da, Sc * Dc]
PorterDuff.Mode	OVERLAY
PorterDuff.Mode	SCREEN	[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]
PorterDuff.Mode	SRC	[Sa, Sc]
PorterDuff.Mode	SRC_ATOP	[Da, Sc * Da + (1 - Sa) * Dc]
PorterDuff.Mode	SRC_IN	[Sa * Da, Sc * Da]
PorterDuff.Mode	SRC_OUT	[Sa * (1 - Da), Sc * (1 - Da)]
PorterDuff.Mode	SRC_OVER	[Sa + (1 - Sa)Da, Rc = Sc + (1 - Sa)Dc]
PorterDuff.Mode	XOR	[Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc]

分别是这些意思：

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

取两图层全部区域，交集部分变为透明色

然后我们就可以开始怀着一颗好奇心画图了.....

自定义一个View，在View中创建两个Bitmap，分别画方和圆，尺寸可以随便定

Java：

public class DuffView extends View {

	private Bitmap mSrcB;
	private Bitmap mDstB;
	private Shader mBG;
	// 文档说了是枚举类，共有16个
	private static final Xfermode[] sModes = { new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
			new PorterDuffXfermode(PorterDuff.Mode.SRC), new PorterDuffXfermode(PorterDuff.Mode.DST),
			new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER), new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
			new PorterDuffXfermode(PorterDuff.Mode.SRC_IN), new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
			new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT), new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
			new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP), new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
			new PorterDuffXfermode(PorterDuff.Mode.XOR), new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
			new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN), new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
			new PorterDuffXfermode(PorterDuff.Mode.SCREEN) };

	public DuffView(Context context) {
		super(context);

	}

	public DuffView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public DuffView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init();
	}

	// 初始化
	private void init() {
		mSrcB = makeSrc(400, 400);
		mDstB = makeDst(400, 400);
		Bitmap bitmap = Bitmap.createBitmap(new int[] { 0xFFFFFFFF, 0xFFCCCCCC, 0xFFCCCCCC, 0xFFFFFFFF }, 2, 2,
				Bitmap.Config.RGB_565);
		mBG = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
		Matrix m = new Matrix();
		m.setScale(6, 6);
		mBG.setLocalMatrix(m);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		canvas.drawColor(Color.WHITE);
		Paint paint = new Paint();
		paint.setFilterBitmap(false);
		canvas.translate(35, 35);
		paint.setStyle(Style.STROKE);
		paint.setShader(null);
		canvas.drawRect(0, 0, 400, 400, paint);
		// shader
		paint.setStyle(Style.FILL);
		paint.setShader(mBG);
		canvas.drawRect(0, 0, 400, 400, paint);
		int sc = canvas.saveLayer(0, 0, 400, 400, null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG
				| Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);
		canvas.drawBitmap(mDstB, 0, 0, paint);
		// 组合图形最关键的地方就在这里
		// paint.setXfermode(sModes[0]);
		canvas.drawBitmap(mSrcB, 0, 0, paint);
		canvas.restoreToCount(sc);
	}

	// 画圆
	static Bitmap makeDst(int w, int h) {
		Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
		p.setColor(0xFFFFCC44);
		p.setColor(Color.RED);
		canvas.drawCircle(w / 2, h / 2, w / 3, p);
		return bitmap;
	}

	// 画方
	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(0xFF66AAFF);
		c.drawRect(w / 2, h / 2, w - 20, h - 20, p);
		return bm;
	}

}

这里先运行效果看一下：