草庐IT

在 WPF 中实现融合效果

dino.c 2023-03-28 原文

1. 融合效果

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

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

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

2. 自定义 Effect

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

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

接下来需要加强对比度。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;
}

虽然确实实现了融合效果，但是圆形的边缘有严重的锯齿。很明显，问题出在上面的代码中 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;
}

3. 最后

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

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

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

WPF在自定colorfloat.NET技术

有关在 WPF 中实现融合效果的更多相关文章

  1. ruby - 在 Ruby 中实现 `call_user_func_array` - 2

    我怎样才能完成http://php.net/manual/en/function.call-user-func-array.php在ruby中？所以我可以这样做:classAppdeffoo(a,b)putsa+benddefbarargs=[1,2]App.send(:foo,args)#doesn'tworkApp.send(:foo,args[0],args[1])#doeswork,butdoesnotscaleendend 最佳答案 尝试分解数组App.send(:foo,*args)

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现无向图？ - 2

    我需要在RubyonRails中实现无向图G=(V,E)并考虑构建一个Vertex和一个Edge模型，其中Vertex有_多条边。由于边恰好连接两个顶点，您将如何在Rails中执行此操作？您是否知道任何有助于实现此类图表的gem或库(对重新发明轮子不感兴趣;-))？ 最佳答案 不知道有任何现有库在ActiveRecord之上提供图形逻辑。您可能必须实现自己的Vertex、EdgeActiveRecord支持的模型(请参阅Rails安装的rails/activerecord中的vertex.rb和edge.rb/test/fixtur

  3. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  4. ruby - 在 Ruby 中实现 to_int 和 to_str 的后果 - 2

    我haveaclass它公开了一个字符串值和一个int值(分别是命令输出和退出代码)。除了通过to_s和to_i公开它们之外，我还使用to_str和to_int，如下所示:classStatusdefto_s@outputendalias:to_str:to_sdefto_i@status.exitstatusendalias:to_int:to_iend我的想法是能够在尽可能多的情况下使用这个对象。将其强制转换为字符串或整数会增加可用性。例如，我可以将对象与字符串连接起来:a_string="Outputwas:"+results(我想用这个作为int强制转换的例子，但是Fixnum

  5. ruby - 在 Ruby 中实现二叉树 - 2

    我一直在尝试在Ruby中实现BinaryTree类，但我得到了stackleveltoodeep错误，尽管我似乎没有在该特定代码段中使用任何递归:1.classBinaryTree2.includeEnumerable3.4.attr_accessor:value5.6.definitialize(value=nil)7.@value=value8.@left=BinaryTree.new#stackleveltoodeephere9.@right=BinaryTree.new#andhere10.end11.12.defempty?13.(self.value==nil)?true:

  6. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java，我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类，其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而，通过Ruby中的这个设置，我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道，在Ruby1.9中，我们可以使用

  7. ruby - 在 Ruby 中实现 Luhn 算法 - 2

    我一直在尝试用Ruby实现Luhn算法。我一直在执行以下步骤:该公式根据其包含的校验位验证数字，该校验位通常附加到部分帐号以生成完整帐号。此帐号必须通过以下测试:从最右边的校验位开始向左移动，每第二个数字的值加倍。将乘积的数字(例如，10=1+0=1、14=1+4=5)与原始数字的未加倍数字相加。如果总模10等于0(如果总和以零结尾)，则根据Luhn公式该数字有效；否则无效。http://en.wikipedia.org/wiki/Luhn_algorithm这是我想出的:defvalidCreditCard(cardNumber)sum=0nums=cardNumber.to_s.s

  8. ruby - 在不同的文件中设置断点没有效果 - 2

    ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，

  9. ruby - 在 Ruby 中实现生产者消费者模式 - 2

    假设我有200个昂贵的方法调用(每个都有不同的参数)。出于某种原因，我可以并行执行其中的5个调用，但不能更多。我可以一次执行一个，但一次执行5个要快5倍。我想一直执行五件事。不想排五个，等五个都排完了，再排五个。如果我排队A、B、C、D、E并且C先完成，我想立即用F替换它，即使A和B还没有完成。我一直在研究这个问题，因为我可以想象它会定期发生。解决方案似乎是生产者-消费者模式，Ruby在其标准库中内置了一些用于该模式的结构(Queue和SizedQueue)。我玩过代码示例，阅读了一些文档，我想我对它有一个粗略的了解。但是我有一些问题我对我的解决方案没有信心，而且多线程的整个领域对我来

  10. ruby - 如何在 Ruby 中实现枚举器？ - 2

    例如:a=[1,2,3,4,5]a.delete_if{|x|x>3}相当于:a=[1,2,3,4,5]a.delete_if.each.each.each.each{|x|x>3}我知道a.delete_if返回一个枚举器。但是当eachblock返回true时，它​​如何知道应该删除对象呢？如何手动(和在Ruby中)实现delete_if？ 最佳答案 可以看看Rubinius源码:enumerablemodule这里是一个拒绝方法的例子:defrejectreturnto_enum(:reject)unlessblock_giv

随机推荐