当前位置：首页 > news >正文

C#使用开源框架NetronLight绘制流程图

news 2025/7/6 13:42:55

之前使用MindFusion.Diagramming绘制流程图确认很方便，只能试用版，如果长期使用，需要收费。

C#使用MindFusion.Diagramming框架绘制流程图(2):流程图示例_c# 画流程图控件-CSDN博客

这里找一个简易开源框架NetronLight，GIT下载地址

GitCode - 全球开发者的开源社区,开源代码托管平台

NetronLight

NetronLight框架-图控件【GraphControl】是由多个形状节点【ShapeBase】和多个连线【Connection】组成。
* SimpleRectangle由矩形Rect和四个连接端点【Connector】组成
* Entity抽象类表示图diagram中某一个对象，是所有图的组成对象的基类
* ①Connector 连接端点或【可以附着连接的形状的位置点】：
* 主要属性：string Name、Connector AttachedTo、Point Point
* ②ShapeBase 形状基类
* 主要属性：ConnectorCollection Connectors【一般来说固定Bottom, Left, Right, Top四个端点】、Rectangle rectangle、string Text、Point Location、Color ShapeColor
* 派生三个子类 SimpleRectangle【矩形节点】、OvalShape【椭圆节点】、TextLabel【文本标签】
* ③Connection 连线【节点之间的连线：只能通过 Connector Bottom, Left, Right, Top 这四个点进行连线】
* 主要属性：Connector From、Connector To

新建窗体应用程序NetronLightDemo，添加对NetronLight项目【或NetronLight.dll】的引用

将默认的Form1重命名为FormNetronLightDemo，

窗体FormNetronLightDemo设计器程序如下：

FormNetronLightDemo.Designer.cs文件


namespace NetronLightDemo
{partial class FormNetronLightDemo{/// <summary>/// 必需的设计器变量。/// </summary>private System.ComponentModel.IContainer components = null;/// <summary>/// 清理所有正在使用的资源。/// </summary>/// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>protected override void Dispose(bool disposing){if (disposing && (components != null)){components.Dispose();}base.Dispose(disposing);}#region Windows 窗体设计器生成的代码/// <summary>/// 设计器支持所需的方法 - 不要修改/// 使用代码编辑器修改此方法的内容。/// </summary>private void InitializeComponent(){this.graphControl1 = new NetronLight.GraphControl();this.SuspendLayout();// // graphControl1// this.graphControl1.Location = new System.Drawing.Point(12, 4);this.graphControl1.Name = "graphControl1";this.graphControl1.ShowGrid = true;this.graphControl1.Size = new System.Drawing.Size(1093, 592);this.graphControl1.TabIndex = 0;this.graphControl1.Text = "graphControl1";// // FormNetronLightDemo// this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F);this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;this.ClientSize = new System.Drawing.Size(1117, 608);this.Controls.Add(this.graphControl1);this.Name = "FormNetronLightDemo";this.Text = "NetronLight框架-图控件【GraphControl】是由多个形状节点【ShapeBase】和多个连线【Connection】组成。Shape由矩形Rec" +"t和四个连接端点【Connector】组成";this.ResumeLayout(false);}#endregionprivate NetronLight.GraphControl graphControl1;}
}

窗体FormNetronLightDemo测试程序如下：

FormNetronLightDemo.cs文件

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using NetronLight;namespace NetronLightDemo
{public partial class FormNetronLightDemo : Form{public FormNetronLightDemo(){InitializeComponent();InitDiagram();}/// <summary>/// 初始化一个图/// </summary>private void InitDiagram() {//纯文本标签，无端点TextLabel textLabel = new TextLabel(graphControl1);textLabel.Text = "开源图表框架：NetronLight演示";textLabel.Width = 350;textLabel.Height = 33;textLabel.Location = new Point(100,33);graphControl1.Shapes.Add(textLabel);SimpleRectangle ent = this.graphControl1.AddShape(ShapeTypes.Rectangular, new Point(400, 100)) as SimpleRectangle;ent.Text = "Entity抽象类:所有图的组成对象的基类";ent.Height = 33;ent.Width = 300;ent.ShapeColor = Color.SteelBlue;SimpleRectangle conn = this.graphControl1.AddShape(ShapeTypes.Rectangular, new Point(10, 220)) as SimpleRectangle;conn.Text = "Connection连线：只能通过 Connector Bottom, Left, Right, Top 这四个端点进行连线";conn.Height = 33;conn.Width = 600;conn.ShapeColor = Color.LightSteelBlue;SimpleRectangle shbase = this.graphControl1.AddShape(ShapeTypes.Rectangular, new Point(600, 285)) as SimpleRectangle;shbase.Text = "ShapeBase：形状基类，由四个端口和含有文本的矩形组成";shbase.Height = 33;shbase.Width = 420;shbase.ShapeColor = Color.LightSteelBlue;SimpleRectangle con = this.graphControl1.AddShape(ShapeTypes.Rectangular, new Point(700, 170)) as SimpleRectangle;con.Text = "Connector端口：可以附着连接的形状的位置点";con.Height = 33;con.Width = 350;con.ShapeColor = Color.LightSteelBlue;OvalShape oval = this.graphControl1.AddShape(ShapeTypes.Oval, new Point(450, 360)) as OvalShape;oval.Text = "Oval：椭圆节点";oval.Height = 43;oval.Width = 130;oval.ShapeColor = Color.AliceBlue;OvalShape rec = this.graphControl1.AddShape(ShapeTypes.Oval, new Point(620, 460)) as OvalShape;rec.Text = "SimpleRectangle:矩形节点";rec.Height = 43;rec.Width = 250;rec.ShapeColor = Color.AliceBlue;OvalShape tl = this.graphControl1.AddShape(ShapeTypes.Oval, new Point(850, 360)) as OvalShape;tl.Text = "TextLabel:纯文本节点";tl.Height = 43;tl.Width = 200;tl.ShapeColor = Color.AliceBlue;//创建连线：形状节点 由固定的四个端点Connector组成【Bottom:索引0, Left:索引1, Right:索引2, Top:索引3】graphControl1.AddConnection(ent.Connectors[0], conn.Connectors[3]);graphControl1.AddConnection(ent.Connectors[0], con.Connectors[3]);graphControl1.AddConnection(ent.Connectors[0], shbase.Connectors[3]);graphControl1.AddConnection(shbase.Connectors[0], oval.Connectors[3]);graphControl1.AddConnection(shbase.Connectors[0], rec.Connectors[3]);graphControl1.AddConnection(shbase.Connectors[0], tl.Connectors[3]);}}
}
/** NetronLight框架-图控件【GraphControl】是由多个形状节点【ShapeBase】和多个连线【Connection】组成。* SimpleRectangle由矩形Rect和四个连接端点【Connector】组成* Entity抽象类 表示 图diagram中某一个对象，是所有图的组成对象的基类* ①Connector 连接端点 或 【可以附着连接的形状的位置点】： *    主要属性：string Name、Connector AttachedTo、Point Point* ②ShapeBase 形状基类*    主要属性：ConnectorCollection Connectors【一般来说固定Bottom, Left, Right, Top四个端点】、Rectangle rectangle、string Text、Point Location、Color ShapeColor*    派生三个子类   SimpleRectangle【矩形节点】、OvalShape【椭圆节点】、TextLabel【文本标签】* ③Connection 连线【节点之间的连线：只能通过 Connector Bottom, Left, Right, Top 这四个点进行连线】*    主要属性：Connector From、Connector To
*/