如何在WinUI 3中实现霓虹文字(文字发光)效果?
实现TextBlock/RichTextBlock的霓虹文字发光效果
我想在TextBlock/RichTextBlock元素中实现类似霓虹的文字发光效果,需要给文字添加描边和彩色阴影,但目前只实现了阴影,不知道怎么给文字加描边。
当前代码如下:
var compositor = ElementCompositionPreview.GetElementVisual(Host).Compositor; var dropShadow = compositor.CreateDropShadow(); dropShadow.Color = Colors.Red; dropShadow.BlurRadius = 3; dropShadow.Opacity = 1; dropShadow.Mask = TextBlock.GetAlphaMask(); var spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = Host.ActualSize; spriteVisual.Shadow = dropShadow; ElementCompositionPreview.SetElementChildVisual(Host, spriteVisual);
现在的问题是阴影效果很弱,就算叠加5层也没法形成发光效果,推测是颜色叠加没有正确累加。想请教:
- 能不能给文字添加描边?
- 如何让阴影效果更明显?
- 有没有更高效的发光效果实现方式?
已解决方案
问题已解决,分享给需要的人:
我参考官方文档创建了自定义控件,修改了MakeShadow()方法的代码:
private void MakeShadow() { var compositor = ElementCompositionPreview.GetElementVisual(Host).Compositor; for (float i = 1; i <= 5; i++) { ((ContainerVisual)ElementCompositionPreview.GetElementVisual(Host)).Children.InsertAtBottom(GetSpriteVisual(compositor, i)); } SpriteVisual GetSpriteVisual(Compositor compositor, float radius) { var dropShadow = compositor.CreateDropShadow(); dropShadow.Color = Color.FromArgb(250, 140, 240, 250); dropShadow.BlurRadius = radius; dropShadow.Opacity = 1; dropShadow.Mask = TextBlock.GetAlphaMask(); var spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = Host.ActualSize; spriteVisual.Shadow = dropShadow; return spriteVisual; } }
代码中的循环变量i代表阴影效果的叠加次数,数值越高,文字发光效果越强烈。
内容的提问来源于stack exchange,提问作者Георгий Попов
相关产品推荐
相关产品推荐

