php拓扑控件技巧_能快速构建和定制收集拓扑图的 WPF 开源项目 NodeNetwork

文章目录 [+]

一、序言

在当代软件开拓中，数据可视化和可交互性越来越受到关注。
为了实现这一点，常日须要利用各种图表、表格、网络拓扑图等控件。
然而，对付某些分外的场景，这些控件可能无法知足需求，此时我们须要一种自定义的办法来展示和处理数据。
NodeNetwork便是一种这样的自定义办法，它是一个基于C# WPF的开源项目，可以帮助我们快速构建和定制网络拓扑图。

NodeNetwork的代码托管在GitHub上，是由荷兰的一位开拓者Wouterdek所创建和掩护的。
在本文中，我们将对NodeNetwork进行先容和剖析，希望读者能够通过本文理解到NodeNetwork的核心观点、运用处景和利用方法，同时也能够节制一些开拓NodeNetwork的技巧和履历。

php拓扑控件技巧_能快速构建和定制收集拓扑图的 WPF 开源项目 NodeNetwork

仓库地址：https://github.com/Wouterdek/NodeNetwork

（图片来自网络侵删）

仓库截图：

仓库源码构造：

二、示例1. 打算器示例

此示例许可用户利用节点编辑器创建数学表达式。
修正节点时，将自动打算和更新结果值。
此运用程序包含节点验证，自定义节点子类，值输入/输出，自定义输入编辑器，节点列表，...

下面是打算器示例[1]运用程序的演示：

打算器示例运用程序的演示

2. 代码天生器示例

在此示例中，用户可以创建 LUA 代码。
与虚幻引擎中的蓝图类似，编辑用具有实行流程和数据流。
自定义输入/输出端口、节点编辑器供应了更直不雅观的体验。

下面是代码天生器[2]运用程序的截图：

3. 着色器编辑器示例

此库更实用的示例可能是着色器编辑器。

下面是利用 NodeNetwork 制作的着色器编辑器[3]示例的演示：

着色器编辑器示例的演示

这些示例运用程序可在此处下载[4]，其源代码包含在存储库中，库的二进制版本在 NuGet 上可用。

三、特色专为 .NET Framework 4.7.2 和 .NET Core 3.1 或更高版本构建。
开放、宽松的容许证-Apache-2.0 license[5]。
利用当代反应式 MVVM 代码构建的交互式、可靠的控件。
顺滑的平移、缩放控件。
自动布局系统。
高度可定制，但默认情形下易于利用。
强大的节点和连接验证支持。
大量的单元测试供应支持。
...

四、NodeNetwork的核心观点

以下内容可参考仓库组件解释[6]页。

1. 节点（Node）

节点是NodeNetwork中的最基本元素，可以表示任何一个数据源或处理单元。
每个节点可以包含一个或多个输入端口和输出端口，分别表示节点吸收和输出的数据。
NodeNetwork中内置了几种常用的节点类型，如常量节点、打算节点、输入输出节点等，同时也支持自定义节点类型。

2. 连接（Connection）

连接是NodeNetwork中的一个核心观点，用于表示节点之间的数据传输关系。
每个连接都有一个源端口和目标端口，源端口表示数据的来源，目标端口表示数据的目标。
连接还可以携带一些元数据（metadata），用于描述连接的一些附加信息，如颜色、线宽等。

3. 端口（Port）

端口是节点的输入或输出端点，用于与其他节点进行连接。
每个端口都有一个类型，表示该端口所能吸收或输出的数据类型。
端口还可以有一些其他属性，如标签、描述等，用于描述端口的功能和浸染。

4. 图形界面（GUI）

NodeNetwork是基于WPF框架实现的，因此它具有一套强大的图形界面（GUI）系统。
在NodeNetwork中，每个节点和连接都可以显示为一个图形化的元素，用户可以通过拖拽、缩放等办法对这些元素进行操作。

5. 布局（Layout）

布局是NodeNetwork的另一个主要观点，用于掌握节点和连接的位置和大小。
NodeNetwork中供应了多种不同的布局办法，如自由布局、栅格布局、力导向布局等。
用户可以根据详细的需求选择不同的布局办法，并且可以通过代码或图形界面进行布局的定制和调度。

6. 序列化和反序列化（Serialization and Deserialization）

在实际的运用中，我们须要将节点和连接保存到文件或数据库中，或者从文件或数据库中读取节点和连接。
为了实现这一点，NodeNetwork供应了序列化和反序列化功能。
序列化是将节点和连接转换成一个数据流的过程，反序列化则是将数据流转换成节点和连接的过程。
NodeNetwork支持多种不同的序列化格式，如XML、JSON、二进制等，用户可以根据详细需求选择不同的格式。

五、NodeNetwork的运用处景

NodeNetwork具有广泛的运用处景，下面先容个中的几个：

1. 数据处理和剖析

NodeNetwork可以帮助我们快速构建数据处理和剖析的工具。
例如，我们可以创建一个图形化的事情流，将不同的数据处理节点连接起来，从而实现数据的预处理、转换和剖析。

2. 图形化编辑器

NodeNetwork可以帮助我们快速构建图形化的编辑器。
例如，我们可以创建一个图形化的界面，用于编辑和配置某些参数或选项，这些参数或选项可以通过节点和连接的办法进行交互和通报。

3. 可视化和交互式展示

NodeNetwork可以帮助我们快速构建可视化和交互式的展示工具。
例如，我们可以创建一个图形化的网络拓扑图，用于展示某些设备或系统的连接关系和状态。
用户可以通过节点和连接的办法进行交互和掌握，例如添加、删除、修正节点和连接等。

六、NodeNetwork的利用方法

NodeNetwork的利用方法非常大略，下面先容个中的几个步骤(参考不到30行代码的Hello world[7])。

首先，利用 Dotnet 8[8]创建WPF项目，项目命名为NodeNetworkTest，您可以利用 .NET Framework 4.7.2 以上或 .NET CORE 3.x 以上，站长利用 .NET 8只是8预览版2刚出来试试而已。

1. 安装NodeNetwork

NodeNetwork可以通过NuGet包管理器进行安装。
在Visual Studio中，打开“包管理器掌握台”，输入以下命令即可安装NodeNetwork：

Install-Package NodeNetwork

2. 注册NodeNetwork视图

MVVM在全体NodeNetwork库中都在贯彻利用。
有关MVVM的先容请点击这里[9]查看。
利用库中的元素，您须要创建得当的视图，并为其供应相应的ViewModel实例。

在利用库之前，请在App.xaml.cs文件的OnStartup方法内利用NNViewRegistrar.RegisterSplat方法将NodeNetwork的视图和相应的ViewModel进行注册关联。

using System.Windows;using NodeNetwork;namespace NodeNetworkTest;public partial class App : Application{protected override void OnStartup(StartupEventArgs e){base.OnStartup(e);NNViewRegistrar.RegisterSplat;}}

3. 创建视图

打开MainWindow.xaml，添加NodeNetwork命名空间xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"，并添加NetworkView视图<nodenetwork:NetworkView x:Name="networkView" />，NetworkView表示全体网络拓扑图：

<Window x:Class="NodeNetworkTest.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><nodenetwork:NetworkView x:Name="networkView" /></Grid></Window>

4. 创建节点和连接

在NodeNetwork中，创建节点和连接非常大略。
首先，我们须要创建NetworkViewModel，它是NetworkView视图的ViewModel，可以通过以下代码创建：

var network = new NetworkViewModel;networkView.ViewModel = network;

然后通过以下代码创建第一个节点：

var node1 = new NodeViewModel;node1.Name = "节点1";network.Nodes.Add(node1);

并给第一个节点创建一个输入端口：

var node1Input = new NodeInputViewModel;node1Input.Name = "节点1输入";node1.Inputs.Add(node1Input);

创建第二个节点，并以同样的办法给此节点创建一个输出端口：

var node2 = new NodeViewModel;node2.Name = "节点2";network.Nodes.Add(node2);var node2Output = new NodeOutputViewModel;node2Output.Name = "节点2输出";node2.Outputs.Add(node2Output);

末了，我们可以通过以下代码将节点1的输入端口和节点2的输出端口连接到一起：

var connection = new ConnectionViewModel(network, node1Input, node2Output);network.Connections.Add(connection);

完全代码如下：

using DynamicData;using NodeNetwork.ViewModels;using System.Windows;namespace NodeNetworkTest;public partial class MainWindow : Window{public MainWindow{InitializeComponent;// 创建NetworkView视图的ViewModel实例var network = new NetworkViewModel;// 给视图(networkView)赋值viewmodel(network)networkView.ViewModel = network;// 创建第一个节点ViewModel，设置它的名称并将此节点加入到networkvar node1 = new NodeViewModel;node1.Name = "节点1";network.Nodes.Add(node1);// 创建第一个节点的输入端口ViewModel，设置它的名称并加入第一个节点var node1Input = new NodeInputViewModel;node1Input.Name = "节点1输入";node1.Inputs.Add(node1Input);// 创建第二个节点ViewModel，设置它的名称并将此节点加入到network, 并以同样的办法给此节点添加一个输出Create the second node viewmodel, set its name, add it to the network and add an output in a similar fashion.var node2 = new NodeViewModel;node2.Name = "节点2";network.Nodes.Add(node2);var node2Output = new NodeOutputViewModel;node2Output.Name = "节点2输出";node2.Outputs.Add(node2Output);// 将节点1的输入端口和节点2的输出端口连接到一起var connection = new ConnectionViewModel(network, node1Input, node2Output);network.Connections.Add(connection);}}

运行程序看效果：

示例代码已经全部给了，你也可以戳这[10]克隆。

5. 布局

在NodeNetwork中，布局非常灵巧和自由。
我们可以通过代码或图形界面进行布局。
例如，我们可以通过以下代码将节点放置在指定的位置：

node.Position = new Point(100, 100);

通过以下代码调度全体网络拓扑图的布局(参考布局文档[11])：

ForceDirectedLayouter layouter = new ForceDirectedLayouter;var config = new Configuration{Network = yourNetwork,};layouter.Layout(config, 10000);

6. 序列化和反序列化

在NodeNetwork中，序列化和反序列化非常大略。
我们可以通过以下代码将节点和连接序列化为XML格式：

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));var writer = new StringWriter;serializer.Serialize(writer, nodeNetwork);

然后，我们可以将XML字符串保存到文件或数据库中。
反序列化也非常大略。
我们可以通过以下代码从XML字符串中反序列化节点和连接：

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));var reader = new StringReader(xmlString);var nodeNetwork = (NodeNetworkViewModel)serializer.Deserialize(reader);

七、总结

NodeNetwork是一个非常实用和灵巧的C# WPF开源项目，它可以帮助我们快速构建图形化的网络拓扑图，实现节点和连接的交互和通报。
NodeNetwork供应了丰富的功能和特性，例如节点和连接的自定义、布局和调度、序列化和反序列化等，可以知足各种不同的运用需求。
NodeNetwork的运用处景非常广泛，例如数据处理和剖析、图形化编辑器、可视化和交互式展示等。
NodeNetwork的利用方法非常大略，我们只须要安装NodeNetwork、创建节点和连接、布局和调度、序列化和反序列化即可。

入门指南

有关利用此库的大略快速入门指南，请参阅此页面[12]上的解释书章节。
该文档包括设置信息、解释书章节、示例和 API 参考。

容许证

该库在 Apache 容许证 2.0 下得到容许。
（见 choosealicense.com/licenses/apache-2.0[13]简要先容）此容许证的副本包含在 LICENSE 下的存储库中。

文档

文档可在此处[14]得到。
如果要对文档进行变动，可以通过向 gh-pages 分支[15]发出拉取要求来实现。

贡献

这些操作在 GitHub 页面上非常受欢迎：缺点报告、补丁、功能要求、拉取要求...

微信技能互换群：添加微信（dotnet9com）备注“入群”QQ技能互换群：771992300。

参考资料

[1]

打算器示例: https://github.com/Wouterdek/NodeNetwork/tree/master/ExampleCalculatorApp