Android Xfermode 学习笔记

一、概述

Xfermode全名transfer-mode，其作用是实现两张图叠加时的混合效果。

网上流传的关于Xfermode最出名的图来源于AndroidSDK的samples中，名叫Xfermodes.java，效果如下：



二、体验

提炼出Xfermodes.java中的核心代码，自己写了个简单粗暴的demo试试水：

public class ImageViewXfermode extends ImageView {
public ImageViewXfermode(Context context) {
super(context);
init();
}

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

public ImageViewXfermode(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

private void init() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}

@Override
protected void onDraw(Canvas canvas) {
int defaultWidth = dip2px(85); //xml里view的宽度是85dp
int defaultdHeight = dip2px(85); //xml里view的高度是85dp

if (canvas.getHeight() == defaultWidth && canvas.getHeight() == defaultdHeight) {
//拿到黄色圆形的bitmap
Bitmap bitcircle = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvascicle = new Canvas(bitcircle);
Paint paintcicle = new Paint(Paint.ANTI_ALIAS_FLAG);
paintcicle.setColor(0xFFFFCC44);
canvascicle.drawCircle(dip2px(30), dip2px(30), dip2px(25), paintcicle);

//拿到蓝色矩形的bitmap
Bitmap bitrect = Bitmap.createBitmap(defaultWidth, defaultdHeight, Config.ARGB_8888);
Canvas canvasrect = new Canvas(bitrect);
Paint paintrect = new Paint(Paint.ANTI_ALIAS_FLAG);
paintrect.setColor(0xFF66AAFF);
canvasrect.drawRect(dip2px(30), dip2px(30), dip2px(80), dip2px(80), paintrect);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Xfermode xfermode = new PorterDuffXfermode(Mode.LIGHTEN);

//采用saveLayer，让后续canvas的绘制在自动创建的bitmap上
int cnt = canvas.saveLayer(0, 0, defaultWidth, defaultdHeight, null, Canvas.ALL_SAVE_FLAG);
//先画圆形，圆形是dest
canvas.drawBitmap(bitcircle, 0, 0, paint);
paint.setXfermode(xfermode);
//后画矩形，矩形是src
canvas.drawBitmap(bitrect, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(cnt);
} else {
super.onDraw(canvas);
}
}

private int dip2px(float dip) {
float scale = getResources().getDisplayMetrics().density;
return (int)(dip * scale + 0.5f);
}
}

效果如下：



介绍一下几个关键点：

1、关于src和dest

　　先绘制到canvas上的是dest，后绘制的是src

2、关于硬件加速

　　在sdkversion>=11时，需要关闭硬件加速（第19行），否则 Mode.CLEAR 、 Mode.DARKEN 、 Mode.LIGHTEN 三种模式下绘制效果不正常

3、saveLayer的作用

　　Canvas.saveLayer在Canvas.save的基础上，额外自动分配了一个bitmap，使得saveLayer之后的所有绘制都在这个新分配的bitmap上完成。

　　如果把saveLayer去掉呢？效果就是蓝色矩形跟黄色圆形和灰色背景都进行了 Mode.LIGHTEN 操作：

　　


4、如果不saveLayer

　　有一种变通的方法，在dest对应bitmap的canvas上绘制src对应的bitmap，这样的目的与saveLayer是一致的，不在当前canvas上直接绘图：

@Override
protected void onDraw(Canvas canvas) {
int defaultWidth = dip2px(85); //xml里view的宽度是85dp
int defaultdHeight = dip2px(85); //xml里view的高度是85dp

if (canvas.getHeight() == defaultWidth && canvas.getHeight() == defaultdHeight) {
//拿到黄色圆形的bitmap
Bitmap bitcircle = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvascicle = new Canvas(bitcircle);
Paint paintcicle = new Paint(Paint.ANTI_ALIAS_FLAG);
paintcicle.setColor(0xFFFFCC44);
canvascicle.drawCircle(dip2px(30), dip2px(30), dip2px(25), paintcicle);

//拿到蓝色矩形的bitmap
Bitmap bitrect = Bitmap.createBitmap(defaultWidth, defaultdHeight, Config.ARGB_8888);
Canvas canvasrect = new Canvas(bitrect);
Paint paintrect = new Paint(Paint.ANTI_ALIAS_FLAG);
paintrect.setColor(0xFF66AAFF);
canvasrect.drawRect(dip2px(30), dip2px(30), dip2px(80), dip2px(80), paintrect);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Xfermode xfermode = new PorterDuffXfermode(Mode.LIGHTEN);

//设置setXfermode
paint.setXfermode(xfermode);
//在圆形的canvas上画矩形，先画圆形，圆形是dest，后画矩形，矩形是src
canvascicle.drawBitmap(bitrect, 0, 0, paint);
paint.setXfermode(null);
//将圆形canvas上画出来的结果绘制到canvas上
canvas.drawBitmap(bitcircle, 0.0f, 0.0f, paint);
} else {
super.onDraw(canvas);
}
}

[转载请保留本文地址：http://www.cnblogs.com/goagent/p/5326438.html]

三、更多玩法——圆形ImageView

利用Xfermode的特性也可以做出圆形的ImageView来。先画原图，再画圆形，采用 Mode.DST_IN 即可：

@Override
protected void onDraw(Canvas canvas) {
int defaultWidth = dip2px(85); //xml里view的宽度是85dp
int defaultdHeight = dip2px(85); //xml里view的高度是85dp
Drawable drawable = getDrawable();

if (canvas.getHeight() == defaultWidth && canvas.getHeight() == defaultdHeight && drawable instanceof BitmapDrawable) {
//setBackgroundColor(Color.TRANSPARENT);
//拿到原图的bitmap
Bitmap bitimg = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvasimg = new Canvas(bitimg);
Matrix matrix = new Matrix();
matrix.setScale(defaultWidth * 1.0f / drawable.getIntrinsicWidth(), defaultdHeight * 1.0f / drawable.getIntrinsicHeight());
Paint paintimg = new Paint(Paint.ANTI_ALIAS_FLAG);
canvasimg.drawBitmap(((BitmapDrawable)drawable).getBitmap(), matrix, paintimg);

//拿到圆形的bitmap
Bitmap bitcircle = Bitmap.createBitmap(defaultWidth, defaultdHeight, Config.ARGB_8888);
Canvas canvascircle = new Canvas(bitcircle);
Paint paintcircle = new Paint(Paint.ANTI_ALIAS_FLAG);
paintcircle.setColor(0xFF66AAFF);
canvascircle.drawCircle(dip2px(85 / 2.0f), dip2px(85 / 2.0f), dip2px(85 / 2.0f), paintcircle);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Xfermode xfermode = new PorterDuffXfermode(Mode.DST_IN);

//采用saveLayer，让后续canvas的绘制在自动创建的bitmap上
int cnt = canvas.saveLayer(0, 0, defaultWidth, defaultdHeight, null, Canvas.ALL_SAVE_FLAG);
//先画原图，原图是dest
canvas.drawBitmap(bitimg, 0, 0, paint);
paint.setXfermode(xfermode);
//后画圆形，圆形是src
canvas.drawBitmap(bitcircle, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(cnt);
} else {
super.onDraw(canvas);
}
}

[转载请保留本文地址：http://www.cnblogs.com/goagent/p/5326438.html]