UI 绘制-Paint(三)图层混合模式

435 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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  

Xferomde绘制过程

离屏缓冲(Off-Screen Buffer)

上面的例子直接执行的话,是不会是期望效果的

1240.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

500.png

1240-20221019201033862.png

ModeDescription
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根据目标颜色复制或筛选源和目标

reference

HenCoder Android 开发进阶: 自定义 View 1-2 Paint 详解