持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第20天,点击查看活动详情
本文主要介绍图层18种图文混合模式
混合模式使用场景
ProterDuff.Mode 在 Paint 的使用有三处
| API | 使用 |
|---|---|
| ComposeSharder | 组合渲染(Paint 二有介绍) |
| 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
离屏缓冲(Off-Screen Buffer)
上面的例子直接执行的话,是不会是期望效果的
为什么 ?
按照逻辑我们会认为,在第二步画圆的时候,跟它共同计算的是第一步绘制的方形。但实际上,却是整个 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
| 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 | 根据目标颜色复制或筛选源和目标 |