在 WPF 中實現融合效果

来源:https://www.cnblogs.com/dino623/archive/2022/09/27/gooey_effect_in_wpf.html
-Advertisement-
Play Games

1. 融合效果 融合效果是指對兩個接近的元素進行高斯模糊後再提高對比度,使它們看上去“粘”在一起。在之前的一篇文章中,我使用 Win2D 實現了融合效果,效果如下: 不過 Win2D 不適用於 WPF,在 WPF 中可以使用 BlurEffect 配合自定義 Effect 實現類似的效果。Handy ...


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


作者:dino.c
出處:http://www.cnblogs.com/dino623/
說明:歡迎轉載並請標明來源和作者。如有錯漏請指出,謝謝。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 怎麼借鑒開源代碼來打造一些自身面對的問題解決方案?也許有一些Demo來進行回答演示或許更為貼近地氣些。這裡打算寫一些玩轉源碼為主題的文字來實踐的回答,最近在看P3C的一些源碼,那就從這開始吧。 ...
  • 什麼是 Session 會話? 1、Session 就一個介面(HttpSession)。 2、Session 就是會話。它是用來維護一個客戶端和伺服器之間關聯的一種技術。 3、每個客戶端都有自己的一個 Session 會話。 4、Session 會話中,我們經常用來保存用戶登錄之後的信息。 如何創 ...
  • Spring中AOP的底層原理就是動態代理模式,所以我們在這裡對代理模式進行學習。 一、代理模式 1.什麼是代理 代理,顧名思義,就是一個人代替另一個人去做他需要做的事情。代理是一種設計模式,具體實現就是一個類代替某個類去實現功能。 我們舉一個例子: 我要租房子,我可以找房東直接租房子。同樣我可以找 ...
  • 特殊說明:第一章只包含了 初始化上下文,初始化監聽器列表,發佈springboot啟動事件 相關內容 其中一部分代碼 /** * Run the Spring application, creating and refreshing a new * {@link ApplicationContext ...
  • 前言 在使用SpringBoot的時候經常需要對客戶端傳入的參數進行合法性的校驗,校驗的方法基本上都是使用SpringBoot提供的註解,有時候遇上註解不能滿足需求的時候還需要在業務邏輯上進行判斷。這樣根本就沒有實現解耦。 使用方法 項目maven引入 <dependency> <groupId>c ...
  • 0.基本的數據類型: Number(數字) String(字元串) List(列表) Tuple(元組) Set(集合) Dictionary(字典) 1.基本的輸入輸出: input #輸入 print #輸出 age = 10; name = "小明"; print(age,type(age)) ...
  • ConcurrentHashMap 思考:HashTable是線程安全的,為什麼不推薦使用? HashTable是一個線程安全的類,它使用synchronized來鎖住整張Hash表來實現線程安全,即每次鎖住整張表讓線程獨占,相當於所有線程進行讀寫時都去競爭一把鎖,導致效率非常低下。 1 Concu ...
  • zip 是一個非常常見的壓縮包格式,本文主要用於說明如何使用代碼 文件或文件夾壓縮為 zip壓縮包及其解壓操作, 我們採用的是 微軟官方的實現,所以也不需要安裝第三方的組件包。 使用的時候記得 using System.IO.Compression; /// <summary> /// 將指定目錄壓 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...