`
flyfox1982
  • 浏览: 80869 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

C# WPF 嵌入网页版WebGL油田三维可视化监控

阅读更多

<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

点击“管理解决方案的NuGet程序包”,在出来的界面的搜索框输入CefSharp,可以找到CefSharp相关的包,因为我们使用WPF,所以选择CefSharp.Wpf进行下载安装:CefSharp.Wpf

0x05 配置CefSharp

安装了CefSharp.Wpf之后,在项目中使用using 语句引入Cefsharp,发现报错,如下图所示:引入Cefsharp报错,

因为还需要对项目进行相关的配置。

A. CefSharp version 51 及以上版本

CefSharp version 51之后的版本支持AnyCPU,仍然需要做简单的配置。

首先,开启 “首选32位”这个选项,右键项目名称,选择属性,在打开的界面勾选:首选32位

然后,找到项目的“.csproj”文件,在的末尾加入如下文本:

<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>

你的“.csproj”文件应该是如下这个样子:.csproj

最后修改你的app.config文件,其在解决方案下:app.config

在该文件中加入如下的文本:

<runtime>
    <assemblyBindingxmlns="urn:schemas-microsoft-com:asm.v1">
        <probingprivatePath="x86"/>
    </assemblyBinding>
</runtime>

然后,你的app.config文件应该是这样: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的界面中即可。

启动项目,可以得到如下界面,三维应用妥妥的出来了:

油田三维可视化监控嵌入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 参考文献

https://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application

 

0
1
分享到:
评论

相关推荐

    C# WPF 嵌入Office, 操作word, excel API接口文档说明

    在IT行业中,尤其是在Windows应用程序开发领域,C# WPF(Windows Presentation Foundation)是一种常见的用于构建用户界面的技术。而与Office应用程序如Word和Excel的集成,是许多开发者在创建业务应用时需要面对的...

    wpf嵌入网页

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 应用程序中嵌入网页,主要基于CefSharp库,这是一个使用Google Chrome的Chromium内核的.NET实现。CefSharp允许开发者在WPF应用程序中无缝集成...

    基于WPF的断层三维可视化关键技术研究及实现

    以定向钻孔为主要手段的煤矿断层探测分析过程中,针对计算工作量大、可视化程度低、...设计研发了基于WPF框架的断层仿真及三维可视化系统,重点阐述了基于Helix 3D Toolkit开源类库的断层仿真及三维可视化的实现方法。

    C# WPF,物联网工控大数据大屏看板,源代码,支持MODBUSTCP协议

    在本文中,我们将深入探讨如何使用C# WPF技术结合物联网(IoT)和工控设备,实现大数据的可视化大屏看板,并且重点关注MODBUSTCP协议的应用。C# WPF(Windows Presentation Foundation)是一种强大的.NET框架,用于...

    WPF 中嵌入其它应用程序窗口

    在C#的Windows Presentation Foundation(WPF)框架中,开发者经常需要实现将其他应用程序的窗口集成到自己的应用界面中,这种技术通常被称为“嵌入应用程序”或者“窗口嵌入”。这个过程涉及到对操作系统级别的交互...

    wpf 3d c#实现三维场景

    使用HelixToolkit能够十分方便的创建三维模型和添加鼠标坐标,不需要去实现鼠标旋转动画等等,以及封装了相机,能够方便快捷进行场景控制。 创建三维场景十分快捷,这里我踩了一个坑,就是如果在前台xaml定义了相机...

    50M-c#wpf最强案例

    《50M-c#wpf最强案例》是一个包含丰富C# WPF开发实践的资源集合,对于想要深入理解和提升C# WPF编程技能的开发者来说,这是一个不可多得的学习宝库。WPF(Windows Presentation Foundation)是.NET Framework的重要...

    WPF程序中嵌入Unity3D程序并通讯

    当我们需要在WPF程序中嵌入Unity3D场景,并实现两者之间的通信时,这是一个常见的技术挑战,也是提升用户体验的有效方式。本文将详细探讨如何实现这一目标。 首先,我们需要了解WPF中的嵌入机制。WPF提供了HwndHost...

    WPF三维立体动画(一个WPF项目,利用viewport3D呈现)

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中创建三维立体动画,主要基于给定的项目“WPF三维立体动画”。WPF,作为.NET Framework的一部分,提供了强大的图形渲染能力,其中包括对3D...

    用C#搓一个地球(WPF 3D)

    在本文中,我们将深入探讨如何使用C#和WPF(Windows Presentation Foundation)技术来创建一个三维旋转的地球模型。WPF是.NET Framework的一部分,提供了一种强大的方式来构建丰富的、交互式的用户界面,包括3D图形...

    WPF 3D点云显示

    点云是由大量三维坐标点组成的集合,常用于3D扫描、无人机测绘、医学图像分析等场景。在WPF中实现3D点云显示,主要涉及到以下几个关键知识点: 1. **3D图形渲染**:WPF提供了System.Windows.Media.Media3D命名空间...

    【WPF_TeeChart曲线绘制三维图形】

    **WPF TeeChart曲线绘制三维图形** 在Windows Presentation Foundation(WPF)开发中,有时候我们需要在应用程序中展示数据,这通常涉及到数据可视化。TeeChart是一个强大的图表库,支持多种平台,包括WPF,它提供...

    WPF中嵌入Exe程序

    在Windows Presentation Foundation (WPF) 中,嵌入Exe程序是指将一个可执行文件(.exe)集成到WPF应用程序中,以便在运行时能够调用或执行该外部程序的功能。这种技术通常用于实现特定的功能扩展,或者在主应用中...

    C# wpf 实时显示麦克风音频波形图

    它提供了丰富的图形渲染能力,支持矢量图形、2D/3D渲染和数据绑定,非常适合创建复杂的可视化应用程序。 3. **麦克风音频捕获**: 使用C#可以利用NAudio库来访问系统音频设备,如麦克风。`WaveIn.cs`可能是实现这一...

    C# ECHART WPF 开发,非常漂亮的demo

    在本文中,我们将深入探讨如何在C# WPF应用程序中集成ECharts库,创建出美观且功能丰富的数据可视化界面。ECharts是一个由百度开源的、基于JavaScript的图表库,提供了丰富的图表类型,如折线图、柱状图、饼图、散点...

    C#结合wpf实现3D图形绘制和导出实例

    在C#的WinForms中嵌入WPF显示3D图形并导出为STL格式: 1.创建项目: 在Visual Studio中创建一个新的WinForms项目。 2.添加WPF支持: 向解决方案中添加一个新的WPF用户控件库项目。 3.WPF控件嵌入WinForms: 使用...

    利用c# wpf实现各种图形绘制

    在C# WPF环境中,图形绘制是一个常见的需求,特别是在数据可视化和用户界面设计中。WPF(Windows Presentation Foundation)提供了一套强大的图形渲染机制,使得开发者可以创建出丰富多彩且交互性强的用户界面。本...

    C# wpf条形码打印

    在C# WPF应用中实现条形码打印是一项常见的任务,尤其在物流、零售和库存管理等领域。WPF(Windows Presentation Foundation)是.NET框架的一部分,它提供了强大的UI设计能力,而条形码打印则需要利用特定的库或者...

    WPF嵌入谷歌浏览器例子

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 应用程序中嵌入谷歌浏览器(Chrome),以及如何实现WPF窗体与网页之间的JavaScript(Js)双向调用功能,同时解决网页中下拉列表错位的问题。...

    WPF自定义exe进程嵌入控件

    在Windows Presentation Foundation(WPF)中,开发人员有时需要实现一个独特的需求,即在应用程序中嵌入外部的exe进程作为控件。这种技术通常用于创建沙盒环境、展示第三方软件或者实现某些特定功能。本篇将详细...

Global site tag (gtag.js) - Google Analytics