在 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
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...