在 WPF 中实现融合效果

  • 在 WPF 中实现融合效果已关闭评论
  • 141 次浏览
  • A+
所属分类:.NET技术
摘要

融合效果是指对两个接近的元素进行高斯模糊后再提高对比度,使它们看上去“粘”在一起。在之前的一篇文章中,我使用 Win2D 实现了融合效果,效果如下:


1. 融合效果

融合效果是指对两个接近的元素进行高斯模糊后再提高对比度,使它们看上去“粘”在一起。在之前的一篇文章中,我使用 Win2D 实现了融合效果,效果如下:

在 WPF 中实现融合效果

不过 Win2D 不适用于 WPF,在 WPF 中可以使用 BlurEffect 配合自定义 Effect 实现类似的效果。HandyControl 中有一个使用自定义的 ContrastEffect 实现融合效果的 Demo,如下图:

在 WPF 中实现融合效果

但是 ContrastEffect 是通过 Contrast 属性同时控制 RGBA 四个通道的对比值,所以没办法控制准确地颜色。另外 HandyControl 也提供了 ColorMatrixEffect,不过 ColorMatrixEffect 很难控制对比度。
既然都用到自定义 Effect 了,这次索性自己写一个。

2. 自定义 Effect

在 Win2D 中,实现融合效果的步骤是先使用 GaussianBlurEffect 在两个元素间产生粘连在一起的半透明像素,再用 ColorMatrixEffect 加强对比对,使半透明的像素变得完全不透明。

在 WPF 中我们可以直接使用自带的 BlurEffect 实现高斯模糊,效果如下:

在 WPF 中实现融合效果

接下来需要加强对比度。WPF 中没有 ColorMatrixEffect 的替代品,不过我们可以使用 HLSL(高级着色器语言)编写 PixelShader 并生成自定义的 WPF Effect。编写 PixelShader 可以使用 Shazzam Shader Editor, walterlv 有一篇关于如何使用这款编辑器的教程:

WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码

在这里我编写了一个对 Alpha 进行二值化处理的 PixelShader 实现加强对比度功能,它的作用很简单:当像素的 Alpha 大于阈值就将 Alpha 置为 1,否则为 0,代码如下:

float Thresh : register(C0);  float4 main(float2 uv : TEXCOORD) : COLOR {     float4 color;     color = tex2D(input, uv.xy);     if (color.a == 0 || color.a == 1 || Thresh == 0)     {         return color;     }     float4 resultColor = 0;     float opacity = color.a > Thresh ? 1 : 0;     if (opacity > 0)     {         resultColor.rgb = color.rgb / color.a * opacity;     }      resultColor.a = opacity;     return resultColor; } 

在 WPF 中实现融合效果

虽然确实实现了融合效果,但是圆形的边缘有严重的锯齿。很明显,问题出在上面的代码中 Alpha 通道最终不是 0 就是 1,为了使边缘平滑,应该留下一些“中间派”。修改后的代码引用了 LowerThresh 和 UpperThresh,处于这两个阈值之间的像素用作保持边缘平滑的“中间派”,具体代码如下:

float UpperThresh : register(C0);  float LowerThresh : register(C1);  float4 main(float2 uv : TEXCOORD) : COLOR {     float4 color;     color = tex2D(input, uv.xy);     if (color.a == 0 || color.a == 1 || LowerThresh == 0)     {         return color;     }      if (UpperThresh < LowerThresh)     {         return color;     }      float4 resultColor = 0;     float opacity = 1;     if (color.a < LowerThresh)     {         opacity = 0;     }     if (color.a > LowerThresh && color.a < UpperThresh)     {         opacity = (color.a - LowerThresh) / (UpperThresh - LowerThresh);     }      if (opacity > 0)     {         resultColor.rgb = color.rgb / color.a * opacity;     }      resultColor.a = opacity;     return resultColor; } 

在 WPF 中实现融合效果

3. 最后

这篇文章介绍了如何使用自定义 Effect 实现融合效果,只要理解了融合效果的原理并动手实现了一次,之后就可以参考博客园的 ChokCoco 大佬玩出更多花样,例如这种效果::

在 WPF 中实现融合效果

更多好玩的效果可以参考 ChokCoco 大佬的博客:你所不知道的 CSS 滤镜技巧与细节

源码:https://github.com/DinoChan/wpf_design_and_animation_lab