WinUI3开发_GlowText（发光字）_winui3设置阴影-优快云博客

什么是GlowText？

GlowText是一种外发光字体，其发光的原理是在字体下面增加一层描边(目的是为了与字的路径融洽)并使用模糊方式让其模糊也就是阴影效果，这样看起来就像字体边缘发光了一样。
下图是不发光字体与使用描边并模糊后的效果：
在这里插入图片描述

可以看到发光字明显要更加好看一点。

如何在WinUI3中实现GlowText？

在WinUI3中为我们提供了DropShadow，该API属于Composition的一种高级合成器API，可以让用户创建柔和、模糊、透明可控的阴影功能。
首先创建一个TextBlock：

<TextBlock x:Name="GlowText" Text="Hello World！" Foreground="#FFFFFF" FontSize="14" FontWeight="SemiBold"/>

然后在代码里使用Composition功能，首先获取Textblock的Visual与Composition：

auto textVisual = ElementCompositionPreview::GetElementVisual(GlowText());
auto compositor = textVisual.Compositor();

然后通过Compositor创建DropShadow

DropShadow shadow = compositor.CreateDropShadow();

然后我们就可以通过DropShadow来设置阴影的颜色、模糊程度、透明度：

shadow.Color(ColorHelper::FromArgb(255, 145, 224, 188));
shadow.BlurRadius(8.0f);
shadow.Opacity(0.85f);

有了阴影的样式接下来就要设置阴影的形状，我们要给TextBlock来设置阴影，所以形状要与TextBlock一致，这里DropShadow提供了Mask（蒙版）的方法来生成与某个元素一致形状的阴影功能。
Mask要求的是一个CompositionBrush类型，如果想要获取某个元素的Mask可以通过GetAlphaMask方法，CompositionBrush实际上是一个蒙版图像，里面包含了透明度，每个像素的透明度值，用于做蒙版，它没有RGB值，只有每个像素上的透明度，取值在0~1f之间。

shadow.Mask(GlowText().GetAlphaMask());

那么最后就要使用SpriteVisual与SetElementChildVisual来做合成了：

 SpriteVisual glow = compositor.CreateSpriteVisual();
 glow.RelativeSizeAdjustment({ 1.f, 1.f });
 glow.Shadow(shadow);
 ElementCompositionPreview::SetElementChildVisual(GlowText(), glow);

关于SpriteVisual、SetElementChildVisual与蒙版相关的讲解可以参考我这篇文章：WinUI3开发_图像羽化
下图是运行效果：
在这里插入图片描述
需要注意在合成时要用Shadow，因为SpriteVisual是一种可以渲染颜色、渐变、图像、阴影的模块，需要注意前面的mask只是数据合成，告诉SpriteVisual怎么渲染，而SpriteVisual才是真正的渲染部分，它才会去调用底层GPU去渲染图像。