WP/C#实现图像滤镜优化方案:打造炫目视觉体验!
原因:我之所以想做这个项目,是因为在之前查找关于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设计在网络上获得了好评,尽管某些效果确实很吸引人,但缺少文档导致使用上的不便。)
ge:
项目结构概述
项目在构建过程中,考虑到几种特效之间存在一些共同的重复元素,如图片展示和图片导入功能,因此我将这些共用功能模块化。
- 操作区域的定制化:对于每种不同的特效,操作区的需求也不尽相同。在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
WP/C#实现图像滤镜优化方案:打造炫目视觉体验!的更多相关文章
- 图像滤镜艺术---PS图像转手绘特效实现方案
原文:图像滤镜艺术---PS图像转手绘特效实现方案 手绘效果实现方案 本文介绍一种PS手绘效果的实现方案,PS步骤来自网络,本文介绍代码实现过程. 整体看来,虽然效果还是有很大差异,但是已经有了这种特 ...
- (转)Web性能优化方案
第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...
- Web性能优化方案
第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...
- 数据库sql优化总结之1-百万级数据库优化方案+案例分析
项目背景 有三张百万级数据表 知识点表(ex_subject_point)9,316条数据 试题表(ex_question_junior)2,159,519条数据 有45个字段 知识点试题关系表(ex ...
- 大型php网站性能和并发访问优化方案(转载自php中文网)
网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎 ...
- 图像滤镜艺术---(Instagram)1977滤镜
原文:图像滤镜艺术---(Instagram)1977滤镜 图像特效---(Instagram)1977滤镜 本文介绍1977这个滤镜的具体实现,这个滤镜最早是Instagram中使用的 ,由于Ins ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
- 大型php网站性能和并发访问优化方案
网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢? ...
- netty系列之:一个价值上亿的网站速度优化方案
目录 简介 本文的目标 支持多个图片服务 http2处理器 处理页面和图像 价值上亿的速度优化方案 总结 简介 其实软件界最赚钱的不是写代码的,写代码的只能叫马龙,高级点的叫做程序员,都是苦力活.那么 ...
- Tomcat 配置详解/优化方案
转自:http://blog.csdn.net/cicada688/article/details/14451541 Service.xml Server.xml配置文件用于对整个容器进行相关的配置 ...
随机推荐
- Zabbix6.0使用教程 (五)—zabbix从二进制包安装上篇
大家好,我是乐乐.上一期我们已经讲过从源代码安装zabbix,本期着重讲从二进制包安装zabbix. 当我们在ZABBIX官方存储库可以看到,Zabbix SIA 提供如下官方RPM和DEB包: ·R ...
- EL1008E: Property or field 'timestamp' cannot be found on object of type 'java.util.HashMap' - maybe not public-请求springboot-后台报错
一.问题由来 自己在使用node.js写的前端项目访问springBoot访问的后端项目的时候,springboot项目中报这个错,抛出这个异常. 详细的错误信息如下: Servlet.service ...
- MK5 机械键盘 说明书
FN + 右箭头 就是加快节奏 FN + ScrLk 就是切换模式
- gcc生成静态链接库与动态链接库步骤,并链接生成可执行文件的简单示例
编写 mylib.h void test(); 编写 mylib.c #include<stdio.h> void test(){ printf("hello world&quo ...
- 【leetcode 1425. 带限制的子序列和】【矩阵幂快速运算】
class Solution { public int countVowelPermutation(int n) { long[][] matrix = new long[][]{ {0, 1, 1, ...
- 简单使用vim编辑器的用法
vim的使用笔记可以涵盖很多内容,以下是一些基本操作和常见命令的简要总结: 启动Vim 打开或创建文件:vim filename 基本模式切换 正常模式(Normal Mode):启动时默认进入此模式 ...
- 低代码平台前端的设计与实现(三)设计态画布DesignCanvas的设计与实现
上一篇文章,我们分析并设计了关于构建引擎BuildEngine的切面设计.本文我们将基于BuildEngine所提供的切面处理能力,在CustomCreateElementHandle中通过一些逻辑, ...
- 记录--六道题理解Vue2 和 Vue3 的响应式原理比对
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 技术栈是 Vue 的同学,在面试中难免会被问到 Vue2 和 Vue3 的相关知识点的实现原理和比较,面试官是步步紧逼,一环扣一环. ...
- power quyer 批量合并同一文件夹下数据格式相同的Excel文件
一.需求描述:现在有一批数据格式相同的Excel文件需要把里面的内容合并到同一个Excel的一个sheet里面 二.新建一个叫数据汇总的Excel文件-数据-新建查询-从文件-选择数据存放的文件夹-然 ...
- C# MySQL导出表结构到Excel
软件如图,输入基础信息,点击"测试登录" 连接MySQL需要安装驱动,如下图 连接成功如下图 登录成功后,自动获取所有表信息 双击表名称,右侧查看表结构信息 导出表结构效果如下图 ...