<div class="iteye-blog-content-contain" style="font-size: 14px"></div>
0x00 楔子
最近做的一个项目,是一个油田三维可视化监控的场景编辑和监控的系统,和三维组态有些类似,不过主要用于油田上。 效果如下图所示:
首先当然是上模型,设计人员跟进。 有了相关的模型,使用我们开发的一个编辑器,通过模型拖拽编辑,管路编辑等等,很快就能够编辑出以上的场景:
一切进展的都很顺利。 直到客户说,我们有一个WPF开发的桌面端程序,我们需要把你们的三维嵌入到桌面端。
0x01 寂静无声
一开始我们是比较懵逼的。毕竟我们主要做JavaScript前端开发,对于C# 之类的接触的很少。
抱着试一试的态度在开发群里面问了下,有人懂WPF的开发吗?
寂静无声。。。
因为基本上专业在前端开发,可以理解。
0x02 初步尝试
既然都没有人会,那怎么办,只能我亲自出马了。虽然我没有太多接触过C#相关开发, 但是做过Java,Python,C,Flex,JavaScript等等的开发。凭借多年开发经验,所以相信并不会太难。当然第一步,是下载vs studio, 当看到n个G的下载时候,内心还是挺崩溃。
在漫长等待之后,终于下载并安装了 vs studio。
因为我们的三维管理是基于网页的WebGL开发出来的,所以我想,寻找的方向是在WPF中找是否有类似浏览器的控件。 经过查找找到了,就是WebBrowser 控件,大致使用如下,
<WebBrowserx:Name="WebBrowser1"Source ="xxx.com"></WebBrowser>
然而不幸的是,该控件确实可以显示网页,但是不支持WebGL。开始以为是因为使用了IE内核的原因,后来切换到chrome的内核,发现还是不行。
初步尝试 宣告失败。。。
0x03 CefSharp现身
迷茫之际只能借助伟大的搜索引擎了,当然我这里并不是说某度噢。 发现了一个神器CefSharp。CefSharp lets you embed Chromium in .NET apps,CefSharp就相当于是一个chrome浏览器。
感觉CefSharp应该是可以支持WebGL功能的,所以决定试一试。
0x04 安装CefSharp
我决定使用NuGet来安装CefSharp包。如果你是做C# 开发的,相信应该对NuGet不陌生。如果你不做C#开发。那么你可以这么理解NuGet:
- 如果你了解python,那么它类似pip。
- 如果你了解nodejs,那么它类似npm。
- 如果你了解ruby,那么它类似gem。
- 如果你了解java,那么它类似maven。
在创建的wpf项目的解决方案上面点击右键,可以发现NuGet管理:
点击“管理解决方案的NuGet程序包”,在出来的界面的搜索框输入CefSharp,可以找到CefSharp相关的包,因为我们使用WPF,所以选择CefSharp.Wpf进行下载安装:
0x05 配置CefSharp
安装了CefSharp.Wpf之后,在项目中使用using 语句引入Cefsharp,发现报错,如下图所示:
因为还需要对项目进行相关的配置。
A. CefSharp version 51 及以上版本
CefSharp version 51之后的版本支持AnyCPU,仍然需要做简单的配置。
首先,开启 “首选32位”这个选项,右键项目名称,选择属性,在打开的界面勾选:
然后,找到项目的“.csproj”文件,在的末尾加入如下文本:
<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>
你的“.csproj”文件应该是如下这个样子:
最后修改你的app.config文件,其在解决方案下:
在该文件中加入如下的文本:
<runtime>
<assemblyBindingxmlns="urn:schemas-microsoft-com:asm.v1">
<probingprivatePath="x86"/>
</assemblyBinding>
</runtime>
然后,你的app.config文件应该是这样:
B. CefSharp version 49或者更老的版本 CefSharp version 49及之前的版本,不支持AnyCPU,因此需要指定编译架构。否则会有以下提示:
CefSharp.Common does not work correctly on AnyCPU platform.
You need to specify platform (x86 / x64).
右键点击解决方案,选择属性,出现如下界面:
在配置属性 --》 配置下,把Release和Debug的平台都指定位特定的平台,比如x64。
0x06 使用CefSharp
经过以上配置之后,便可以使用CefSharp控件了,首先引入控件:
using CefSharp;
using CefSharp.Wpf;
然后,开始初始化ChromiumWebBrowser,如下:
public ChromiumWebBrowser chromeBrowser;
publicvoidInitializeChromium(){
CefSettings settings = new CefSettings();
// Initialize cef with the provided settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = new ChromiumWebBrowser("http://localhost:8080");
// Add it to the form and fill it to the form window.
// this.AddChild(chromeBrowser)
MainGrid.Children.Add(chromeBrowser);
}
创建一个ChromiumWebBrowser对象,在创建的时候,传入我们三维应用的地址;之后把该对象加入到Wpf的界面中即可。
启动项目,可以得到如下界面,三维应用妥妥的出来了:
0x07 加入调试功能
代码如果不能调试,那是很恐怖的事情。 CefSharp控件和chrome浏览器一样,可以打开控制台。具体而言是ChromiumWebBrowser对象上面有一个ShowDevTools函数,可以打开控制台。因此,我们加入键盘监听,当按下F12的时候,调用该函数打开控制台:
privatevoidMainWindows_Keydown(object sender, KeyEventArgs e)
{
//判断用户的按键是否为F12
if (e.KeyStates == Keyboard.GetKeyStates(Key.F12))
{
chromeBrowser.ShowDevTools();
}
else if (e.KeyStates == Keyboard.GetKeyStates(Key.F11))
{
chromeBrowser.Reload();
}
}
在界面上按F12键的效果如下:
0x08 尾声
使用CefSharp基本可以解决客户的嵌入三维应用到WPF的需求。 虽然CefSharp控件相对于chrome浏览器还是有些差距,比如性能 效率,以及未来可能还会遇到的一些兼容性的问题。
但就目前来说,客户还是挺满意的。
这,就够了。
0x09 参考文献
相关推荐
DsoFramer接口文档 ,WPF 结合DsoFramer嵌入Office应用程序, 操作word文档, excel文档 ,
以定向钻孔为主要手段的煤矿断层探测分析过程中,针对计算工作量大、可视化程度低、...设计研发了基于WPF框架的断层仿真及三维可视化系统,重点阐述了基于Helix 3D Toolkit开源类库的断层仿真及三维可视化的实现方法。
C# WPF 中嵌入其它应用程序窗口,调用Win32API 将其它应用程序窗口嵌入当前程序内部
WPF三维立体动画源码 利用viewport3D来呈现
C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印C# wpf条形码打印
使用HelixToolkit能够十分方便的创建三维模型和添加鼠标坐标,不需要去实现鼠标旋转动画等等,以及封装了相机,能够方便快捷进行场景控制。 创建三维场景十分快捷,这里我踩了一个坑,就是如果在前台xaml定义了相机...
这是wpf嵌入浏览器开发的一个简单例子。里面用到的是谷歌浏览器开源内核。代码很简单,希望能帮助大家。
WPF开发教程.rar 目录 WPF基础入门 3 1. WPF基础之体系结构 3 2. WPF基础之XAML 9 3. WPF基础之基元素 23 ...4. WPF的三维图形应用 219 5. WPF的三维变换应用 229 6. WPF的动画开发 238 7. WPF的多媒体开发 250
WPF_嵌入字体_EmbeddedFont
C#WPF物联网工控大数据大屏看板,含全套源代码,支持modbustcp协议,数据可视化,架构源码,大屏可视化,数据可视化,
C# wpf 版计算器 ,仿造windows电自带计算器的标准模式下的所有功能.C# wpf 版计算器 ,仿造windows电自带计算器的标准模式下的所有功能.
该框架标题为交通建设项目管理信息化系统。 二、功能介绍 1.代码按照三层结构+MVC模式设计。 2.界面展现层采用WPF开发。 3.系统界面采用统一样式定义。 4.界面设计业务代码全面分离。 5.系统设置模块管理。 6...
使用wpf开发的的获取电脑音频,生成wav文件,并实时显示音频的波形图,包括时域图和频域图。
C# wpf 动态编译脚本C# wpf 动态编译脚本C# wpf 动态编译脚本C# wpf 动态编译脚本
50M-c#wpf最强案例,是学习C# WPF良好的参考资料。原生代码,学习利器。
C# WPF 在ListView 中 动态添加ProgressBar, 开发环境vs
C#wpf的多屏显示问题
C# WPF DataGrid控件实现三级联动 博客原文:http://blog.csdn.net/weixinhum/article/details/49449973
C#WPF面试题整理2021年.rar
名称: “C# WPF - 音频视频播放器” 说明: WOF技术实现的音频视频播放器 ^_^