鸿蒙开发-想做毛玻璃和发光效果？MaskFilter遮罩滤镜详解

想给图形加个模糊效果MaskFilter 让你轻松实现你有没有在一些设计类 APP 里见过那种毛玻璃效果或者在修图软件里给图片加个模糊遮罩这些效果在 HarmonyOS 的 drawing 模块里用MaskFilter就能实现。MaskFilter 是什么简单说MaskFilter 就是一个蒙版滤镜。它可以在绘制图形的时候给图形的边缘或者整体加上一些特殊效果。目前 HarmonyOS 提供的 MaskFilter 主要支持模糊效果也就是高斯模糊。打个比方你在画布上画了一个红色的圆正常情况下边缘是清晰的。加上 MaskFilter 之后这个圆的边缘就会变得模糊、柔和就像用手指在纸上抹了一下颜料的感觉。MaskFilter 四种模糊类型下面是四种 BlurType 的效果示意和适用场景MaskFilter 模糊类型NORMAL 内外模糊OUTER 外部模糊INNER 内部模糊SOLID 实心模糊整体柔和效果适合背景虚化边缘发光效果适合阴影投影磨砂玻璃效果适合毛玻璃柔和按钮效果适合卡片背景创建一个模糊滤镜createBlurMaskFilterMaskFilter 的创建很简单因为它只有一个静态方法createBlurMaskFilterimport{RenderNode}fromkit.ArkUI;import{drawing}fromkit.ArkGraphics2D;classDrawingRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;letmaskFilterdrawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER,10);}}这里有两个参数需要解释一下第一个参数blurType模糊类型BlurType是一个枚举它决定了模糊效果作用在图形的哪个位置。你可以想象一下OUTER模糊效果只作用在图形的外部。就像你在窗户上贴了一张纸然后从外面看过去纸的边缘是模糊的但纸本身是清晰的。INNER模糊效果只作用在图形的内部。图形的边缘保持清晰但内部变得模糊。NORMAL内外都有模糊效果整体都变得柔和。SOLID图形内部保持实心边缘有模糊效果。在上面的例子里我们用的是drawing.BlurType.OUTER意思是模糊效果只往外扩散。第二个参数sigma标准偏差这个参数控制模糊的程度。你可以把它理解为模糊半径。值越大模糊范围越广效果越明显。sigma 1轻微模糊几乎看不出来sigma 10中等模糊边缘明显柔和sigma 50重度模糊图形都快化掉了在例子里我们传的是10这是一个比较适中的值。怎么使用 MaskFilter创建好 MaskFilter 之后你需要把它挂到画布上才能生效。具体来说是通过画布的setMaskFilter方法来设置的。不过这里要注意MaskFilter 通常是配合 Brush 或 Pen 一起使用的。下面是一个更完整的例子展示怎么用 MaskFilter 画一个带模糊效果的图形import{RenderNode}fromkit.ArkUI;import{drawing}fromkit.ArkGraphics2D;classDrawingRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 创建一个模糊滤镜模糊类型为 OUTERsigma 为 10letmaskFilterdrawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.OUTER,10);// 创建一个画笔letpennewdrawing.Pen();pen.setColor({alpha:255,red:255,green:0,blue:0});pen.setStrokeWidth(5);// 将 MaskFilter 应用到画笔上pen.setMaskFilter(maskFilter);canvas.attachPen(pen);// 画一个圆边缘会带有模糊效果canvas.drawCircle(200,200,100);}}这段代码做了一件事画一个红色的圆但圆的边缘带有模糊效果。你注意看我们是把 MaskFilter 设置到了 Pen 上然后用这个 Pen 来绘制。这样 Pen 绘制出来的所有图形都会带上这个模糊效果。不同 BlurType 的效果区别让我用更具体的方式来解释四种模糊类型的区别。假设你画了一个蓝色的矩形NORMAL 模式矩形的内外都模糊整体看起来像一团蓝色的雾。OUTER 模式矩形内部保持清晰但外部有一圈模糊的晕影。这是最常用的模式适合做发光效果、阴影效果。INNER 模式矩形的边缘是清晰的但内部变得模糊。适合做磨砂玻璃效果。SOLID 模式矩形内部保持实心不透明边缘有模糊过渡。适合做柔和的按钮、卡片背景。使用 MaskFilter 的完整流程下面是使用 MaskFilter 实现模糊效果的典型流程创建 MaskFilter设置模糊类型设置 Sigma 值创建画笔 Pen/Brush应用 MaskFilter 到画笔绑定画笔到 Canvas绘制图形图形带有模糊效果Sigma 值参考1-3 轻微模糊5-15 中等模糊20-50 重度模糊Sigma 值怎么选Sigma 的选择取决于你想要的效果强度。这里给一些参考值1-3非常轻微的模糊适合做微妙的阴影5-15中等模糊适合做毛玻璃效果、柔和的光晕20-50重度模糊适合做背景虚化、景深效果50 以上极度模糊图形几乎不可辨认要注意的是sigma 值越大渲染的开销也越大。如果你在做动画效果比如模糊程度随时间变化太大的 sigma 值可能会导致卡顿。建议在性能和效果之间找一个平衡点。实际应用场景场景一发光文字效果想让文字看起来像在发光先用 Font 和 TextBlob 创建文字路径然后用带有 MaskFilter 的 Brush 来绘制letmaskFilterdrawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.NORMAL,15);letbrushnewdrawing.Brush();brush.setColor({alpha:255,red:255,green:200,blue:0});brush.setMaskFilter(maskFilter);canvas.attachBrush(brush);// 绘制文字...场景二卡片投影效果给卡片加一个柔和的投影letshadowFilterdrawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.NORMAL,8);letbrushnewdrawing.Brush();brush.setColor({alpha:100,red:0,green:0,blue:0});brush.setMaskFilter(shadowFilter);canvas.attachBrush(brush);canvas.drawRect({left:50,top:55,right:250,height:155});先画一个半透明的黑色矩形作为阴影然后在上面画真正的卡片。场景三背景虚化做弹窗时想让背景变模糊letblurFilterdrawing.MaskFilter.createBlurMaskFilter(drawing.BlurType.NORMAL,30);// 先把背景图绘制到画布上// 然后应用 blurFilter 来模糊整个画布注意事项线程安全MaskFilter 和其他 drawing 对象一样是单线程模型。如果你在多线程环境下使用需要自己管理线程安全。性能考虑模糊效果是比较消耗性能的特别是 sigma 值很大的时候。如果你需要实时更新模糊效果比如做动画建议适当降低 sigma 值或者降低绘制的频率。物理像素MaskFilter 使用的是物理像素单位 px和 Font 一样。在高分屏上同样的 sigma 值看起来会比低分屏上更细腻。API 版本MaskFilter 从 API version 12 开始支持确保你的项目最低版本符合要求。小结MaskFilter 是一个简单但实用的工具专门用来给图形加模糊效果。它的核心就是createBlurMaskFilter这个静态方法通过调整BlurType和sigma两个参数你可以实现从轻微阴影到重度虚化的各种效果。虽然它目前只支持模糊这一种效果但在实际开发中模糊效果的用途非常广泛——发光、阴影、毛玻璃、景深几乎所有的视觉特效都离不开它。