系列文章传送门：
UI绘制-Paint（一）Paint基本属性及方法
UI绘制-Paint（二）颜色相关方法
UI绘制-Paint（三）图层混合模式
UI绘制-Paint（四）颜色过滤器 ColorFilter
本文主要介绍图层18中图文混合模式
ProterDuff.Mode 在Piant的使用有三处
| API | 使用 |
|---|---|
| ComposeSharder | 组合渲染(Piant 二有介绍) |
| PorterDuffColorFilter | 添加单色ColorFilter（Paint四会说明） |
| Xfermode（PorterDuffXfermode） | 设置绘制内容和View中已有的内容的混合计算方式（本文简单说明） |
setXfermode(Xfermode xfermode)
它将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值，从而更新Canvas中最终的像素颜色值。
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN)); //设置图层混合模式
canvas.drawBitmap(rectBitmap, 0, 0, paint); // 画方
paint.setXfermode(xfermode); // 设置 Xfermode
canvas.drawBitmap(circleBitmap, 0, 0, paint); // 画圆
paint.setXfermode(null); // 用完及时清除 Xfermode
Xferomde绘制过程
离屏缓冲（Off-Screen Buffer）
上面的例子直接执行的话，是不会是期望效果的
image.png
为什么 ？
按照逻辑我们会认为，在第二步画圆的时候，跟它共同计算的是第一步绘制的方形。但实际上，却是整个 View 的显示区域都在画圆的时候参与计算，并且 View 自身的底色并不是默认的透明色，导致不仅绘制的是整个圆的范围，而且在范围之外都变成了黑色。
没有离屏缓冲时
通过使用离屏缓冲，把要绘制的内容单独绘制在缓冲层，再把绘制好的内容贴回 View 中，保证Xfermode的使用不会出现错误的结果。若没有使用离屏缓冲，会将背景也进行混合。
离屏缓冲
使用离屏缓冲有两种方式：
- Canvas#saveLayer
// 离屏绘制
int layerId = canvas.saveLayer(0 ,0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
//目标图 画圆
canvas.drawBitmap(makeDst(mWidth, mHeight), 0 ,0, mPaint);
//设置混合模式
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
//源图 画方，重叠区域右下角部分
canvas.drawBitmap(makeSrc(mWidth, mHeight), 0, 0,mPaint);
//清除混合模式
mPaint.setXfermode(null);
canvas.restoreToCount(layerId);
- View#setLayerType 直接把整个View都绘制在离屏缓冲中。
setLayerType(LAYER_TYPE_HARDWARE); // 使用GPU来缓冲
setLayerType(LAYER_TYPE_SOFTWARE); // 使用Bitmap来缓冲
硬件加速
禁止硬件加速，API 14之后，有些函数不支持硬件加速，但系统默认开启，需要禁用
//禁止硬件加速
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
PorterDuff.Mode 图层混合模式
有如下18种：
详情可见 Google 官方文档 - PorterDuff.Mode
image.png
PorterDuff.Mode
| Mode | Description |
|---|---|
| SRC | 只保留源像素 |
| SRC_OVER | 源像素绘制在目标像素上 |
| SRC_IN | 保留覆盖目标像素的源像素，丢弃剩余的源像素和目标像素 |
| SRC_ATOP | 舍弃目标像素未覆盖的源像素 |
| DST | 只保留目标像素 |
| DST_OVER | 目标像素绘制在源像素上 |
| DST_IN | 保留覆盖源像素的目标像素，丢弃剩余的源像素和目标像素 |
| DST_ATOP | 舍弃源像素未覆盖的目标像素 |
| CLEAR | 源覆盖的目标像素被清除 |
| SRC_OUT | 保存目标像素未覆盖的源像素 |
| DST_OUT | 保存源像素未覆盖的目标像素 |
| XOR | 舍弃源像素和目标像素都覆盖的区域 |
| DARKEN | 保留源和目标像素的最小(component)组成部分 |
| LIGHTEN | 保留源和目标像素的最大(component)组成部分 |
| MULTIPLY | 将源像素和目标像素相乘 |
| ADD | 将源像素和目标像素相加 |
| SCREEN | 源像素和目标像素相加，然后减去源像素乘以目标像素 |
| OVERLAY | 根据目标颜色复制或筛选源和目标 |
运用
实现刮刮卡样式，可使用 SRC_OUT
public class XfermodeEraserView extends View {
private Paint mPaint;
private Bitmap mDstBmp, mSrcBmp, mTxtBmp;
private Path mPath;
public XfermodeEraserView(Context context) {
this(context, null);
}
public XfermodeEraserView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public XfermodeEraserView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//初始化画笔
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(80);
//禁用硬件加速
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
//初始化图片对象
mTxtBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.result);
mSrcBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.eraser);
mDstBmp = Bitmap.createBitmap(mSrcBmp.getWidth(), mSrcBmp.getHeight(), Bitmap.Config.ARGB_8888);
//路径（贝塞尔曲线）
mPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制刮奖结果
canvas.drawBitmap(mTxtBmp, 0, 0, mPaint);
//使用离屏绘制
int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
//先将路径绘制到 bitmap上
Canvas dstCanvas = new Canvas(mDstBmp);
dstCanvas.drawPath(mPath, mPaint);
//绘制 目标图像
canvas.drawBitmap(mDstBmp, 0, 0, mPaint);
//设置 模式 为 SRC_OUT, 擦橡皮区域为交集区域需要清掉像素
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
//绘制源图像
canvas.drawBitmap(mSrcBmp, 0, 0, mPaint);
mPaint.setXfermode(null);
canvas.restoreToCount(layerID);
}
private float mEventX, mEventY;
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mEventX = event.getX();
mEventY = event.getY();
mPath.moveTo(mEventX, mEventY);
break;
case MotionEvent.ACTION_MOVE:
float endX = (event.getX() - mEventX) / 2 + mEventX;
float endY = (event.getY() - mEventY) / 2 + mEventY;
//画二阶贝塞尔曲线
mPath.quadTo(mEventX, mEventY, endX, endY);
mEventX = event.getX();
mEventY = event.getY();
break;
}
invalidate();
return true; //消费事件
}
}
网友评论