WPF/C#實現圖像濾鏡優化方案:打造炫目視覺體驗!

来源:https://www.cnblogs.com/qingxi11/p/18138196
-Advertisement-
Play Games

原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...


原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。

生成的效果

生成效果的方法:我主要是通過參考Shazzam Shader Editor來編寫HLSL像素著色器。

HLSL(High Level Shader Language,高級著色器語言)是Direct3D著色器模型所需的一種語言。WPF不僅支持Direct3D 9,還支持使用HLSL來創建著色器。雖然可以使用多種編輯器來編寫HLSL,但Shazzam Shader Editor是一款專為WPF設計的編輯器,它專門用於實現像素著色器。使用Shazzam可以簡化將像素著色器集成到WPF項目中所需的各種手動操作。(關於如何使用Shazzam,可線上查找詳細教程。)

在我的項目中,我根據所需的效果生成相應的.PS和.CS文件,並將這些文件添加到類庫中。接著,我會在具體的項目中引入這個庫來實現效果

項目實現細節

開發環境

  • 使用的MVVM庫:CommunityToolkit.Mvvm
  • 目標框架:.NET 8.0
  • 開發工具:Visual Studio 2022

使用的樣式庫

項目中採用了AduSkin樣式庫。個人建議:​我不特別推薦使用AduSkin,主要是因為它缺乏官方文檔,需要通過查看源代碼來學習使用。此外,一些樣式的命名與源代碼中的不一致,這可能會導致一些困惑。(備註:我最初選擇使用AduSkin是因為其UI設計在網路上獲得了好評,儘管某些效果確實很吸引人,但缺少文檔導致使用上的不便。)

項目結構概述

項目在構建過程中,考慮到幾種特效之間存在一些共同的重覆元素,如圖片展示和圖片導入功能,因此我將這些共用功能模塊化。

  • 操作區域的定製化:​對於每種不同的特效,操作區的需求也不盡相同。在Common控制項中,我使用了Option控制項來進行替代,以便於在外部進行定製。
  • 特效的動態調整:​每種特效的具體實現都有所不同,因此我設定了一個獨立的屬性ImageEffect,允許從外部動態修改。
  • 公共控制項:CommonEffectControl作為一個公共控制項,用於整合圖片顯示和圖片導入的共通功能。

具體引用的步驟

需要添加命令空間

  •  xmlns:common="clr-namespace:CT.WPF.MagicEffects.Demo.UserControls.Common"

前臺代碼

查看代碼
 <common:CommonEffectControl ImageEffect="{Binding SelectedOrdinary.ObjectShaderEffect}">
     <common:CommonEffectControl.Option>
         <StackPanel Orientation="Vertical">
             <Border BorderBrush="Transparent" BorderThickness="0">
                 <Skin:MetroScrollViewer ScrollViewer.VerticalScrollBarVisibility="Visible">
                     <ListView
                         Width="240"
                         Height="550"
                         BorderThickness="0"
                         ItemsSource="{Binding Ordinarys}"
                         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                         ScrollViewer.VerticalScrollBarVisibility="Hidden"
                         SelectedItem="{Binding SelectedOrdinary, Mode=TwoWay}"
                         SelectionMode="Single">
                         <ListView.ItemTemplate>
                             <DataTemplate>
                                 <StackPanel
                                     MinHeight="110"
                                     VerticalAlignment="Center"
                                     Orientation="Vertical">
                                     <Viewbox
                                         Width="99"
                                         Height="78"
                                         Margin="2">
                                         <Image Effect="{Binding ObjectShaderEffect}" Source="{Binding Path=Main.SelectedImagePath, Source={StaticResource Locator}}" />
                                     </Viewbox>
                                     <TextBlock
                                         HorizontalAlignment="Center"
                                         FontSize="14"
                                         Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type Skin:MetroWindow}}, Path=BorderBrush, Mode=TwoWay}"
                                         Text="{Binding Title}"
                                         TextWrapping="Wrap" />
                                 </StackPanel>
                             </DataTemplate>
                         </ListView.ItemTemplate>
                         <ListView.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <WrapPanel Orientation="Horizontal" />
                             </ItemsPanelTemplate>
                         </ListView.ItemsPanel>
                     </ListView>

                 </Skin:MetroScrollViewer>
             </Border>
         </StackPanel>
     </common:CommonEffectControl.Option>
 </common:CommonEffectControl>

ViewModel部分

查看代碼
   partial class OrdinaryEffectViewModel : ObservableObject {
      public OrdinaryEffectViewModel() {
          Ordinarys = new ObservableCollection<Ordinarys> {
              new Ordinarys(){ Title="灰度", ObjectShaderEffect= new GrayScaleEffect ()},
              new Ordinarys(){ Title="位移", ObjectShaderEffect= new DirectionalBlurEffect ()},
              new Ordinarys(){ Title="老電影", ObjectShaderEffect= new OldMovieEffect ()},
              new Ordinarys(){ Title="銳化", ObjectShaderEffect= new SharpenEffect ()},
          };
      }
      [ObservableProperty]
      private ObservableCollection<Ordinarys> ordinarys;
      [ObservableProperty]
      private Ordinarys selectedOrdinary;
  }

model部分

查看代碼
  partial class Ordinarys : ObservableObject {
     [ObservableProperty]
     private string? title;
     [ObservableProperty]
     private ShaderEffect? objectShaderEffect;
 }

還有攝像頭濾鏡覆蓋的效果歡迎大家體驗!!!

已經發佈nuget:dotnet add package MagicEffects --version 1.0.0

github:CT.WPF.MagicEffects

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 地球人皆知,許多物聯網教程作者的心中都深愛著一燈大師,所以第一個常式總喜歡點燈,高級一點的會來個“一閃一閃亮晶晶”。老周今天要扯的也是和燈有關的,但不單純地點個燈,那樣實在不好玩,缺乏樂趣。老周打算舞個龍燈,哦不,是用 LED 彩色燈帶給伙伴們整點炫酷樂子。 說到這LED彩燈,咱們常見到的有兩類: ...
  • 民爆生產廠區有地面站和民爆車,現場地面站的控制系統為西門子PLC和歐姆龍PLC,民爆車為三菱PLC,地面站通過光纖與本地機房進行數據交互,民爆車的位置及其他數據通過4G與本地機房進行數據交互。本地機房與北京運維中心進行數據交互,實現民爆行業的綜合運維平臺。 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...