syncfusion-winforms-diagram

实现 Syncfusion Windows Forms Diagram

Essential Diagram 是一个可扩展、高性能的 .NET 图表框架，适用于 Windows Forms 应用程序。它支持矢量和栅格图形，可帮助你开发类似 Microsoft Visio 的交互式图形和图表应用程序。

何时使用此技能

在以下情况下使用此技能：

• 创建交互式图表 - 构建流程图、组织结构图、网络图或任何基于节点的可视化内容
• 实现图表编辑器 - 开发类似 Visio 的应用程序，支持拖放、符号面板和绘图工具
• 以可视化方式连接形状 - 使用各种连接线类型（正交、贝塞尔、定向线）连接节点
• 设计自定义图表工具 - 创建包含自定义形状和符号的特定领域图表应用程序
• 构建可视化建模软件 - 实现 UML 图、ER 图、思维导图或工作流设计器
• 添加图表功能 - 将图表控件集成到现有 Windows Forms 应用程序中
• 管理复杂布局 - 使用自动布局算法实现分层、放射状或组织结构布局

组件概览

Essential Diagram 提供了全面的模型-视图-控制器架构，包含以下组件：

核心控件：

• Diagram - 用于呈现和操作二维形状、文本、图像及控件的主画布
• Overview - 带有动态平移和缩放视口的透视视图
• PaletteGroupBar/PaletteGroupView - 用于拖放的符号面板管理
• PropertyEditor - 检查和编辑图表对象的属性
• DocumentExplorer - 图表对象和图层的树形视图

主要功能：

• 15+ 种交互式绘图工具（Rectangle、Line、Bezier、Polygon、Text 等）
• 7+ 种连接线类型，支持自动路由和跨线桥接
• 矩阵变换（平移、旋转、缩放）
• 图层、分组和 Z 顺序管理
• 撤销/重做、标尺、网格线、网格吸附
• 事件处理、数据绑定、上下文菜单
• 序列化、打印和导出功能
• Symbol Designer 和 Diagram Builder 实用工具

文档和导航指南

入门

📄 阅读： references/getting-started.md

适用于以下需求：

• 安装和配置 Diagram 控件
• 了解模型-视图-控制器架构
• 创建你的第一个图表（通过设计器或代码）
• 添加基本节点并连接它们
• 设置完整可用的图表

节点和形状

📄 阅读： references/nodes-and-shapes.md

适用于以下操作：

• 创建矩形、椭圆、多边形和其他形状
• 定位节点并设置样式（填充、边框、阴影）
• 创建自定义形状并使用 Symbol Designer
• 设置节点属性并进行操作
• 使用位图节点和复合形状

连接线和链接

📄 阅读： references/connectors.md

适用于以下实现：

• Line、Orthogonal、DirectedLine、PolyLine 连接线
• Bezier、Spline、Curve 和 Arc 连接线
• 首端和尾端装饰（箭头、菱形、圆形）
• 自动线路由和跨线桥接
• 连接点和端口管理
• 连接线样式和自定义

绘图工具

📄 阅读： references/drawing-tools.md

适用于启用以下工具：

• 交互式绘图工具（SelectTool、RectangleTool、LineTool 等）
• 形状工具（Ellipse、Polygon、RoundRect、Arc）
• 线条绘制工具（PolyLine、Curve、Bezier、Spline、Pencil）
• Text 和 RichText 工具
• 连接工具（LineLinkTool、OrthogonalLinkTool 等）
• 工具激活和配置

图表控件

📄 阅读： references/diagram-controls.md

添加以下内容时：

• 用于平移／缩放视口的概览控件
• 用于管理符号调色板的 PaletteGroupBar
• 用于显示调色板的 PaletteGroupView
• 用于检查属性的 PropertyEditor
• 用于可视化对象树的 DocumentExplorer
• 通过设计器和代码创建控件

布局与组织

📄 阅读： references/layout-organization.md

组织内容时：

• 图层（创建、管理、可见性）
• 对节点进行分组和取消分组
• 对齐工具（左对齐、居中、右对齐、顶端对齐、垂直居中、底端对齐）
• Z 顺序操作（前移、后移）
• 间距和大小工具
• 微移操作

标签与端口

📄 阅读： references/labels-ports.md

配置以下内容时：

• 在节点上添加和设置标签格式
• 文本样式（字体、颜色、对齐、旋转）
• 节点上的连接端口
• 端口约束和连接规则
• 自定义端口位置
• 标签和端口的可见性

图表功能

📄 阅读： references/features.md

实现以下功能时：

• 运行时动态属性
• 事件处理程序（节点、连接、模型事件）
• 将数据绑定到图表对象
• 自定义上下文菜单
• 为支持触控的设备提供触控支持
• 测量单位（像素、英寸、毫米）

用户交互

📄 阅读： references/user-interaction.md

处理以下功能时：

• 撤销／重做功能
• 平移和缩放工具
• 放大倍率控制
• 选择模式和多选
• 复制、剪切、粘贴操作
• 旋转和翻转工具

视图控件

📄 阅读： references/view-controls.md

配置以下内容时：

• 标尺（水平和垂直）
• 网格线和对齐网格
• 用于对齐的辅助线
• 滚动行为
• 缩放和平移设置
• 页面边框和背景

布局管理

📄 阅读： references/layout-management.md

应用以下内容时：

• 自动布局算法
• 层次布局
• 组织结构图布局
• 径向布局和树形布局
• 自定义布局管理器
• 布局配置和优化

高级功能

📄 阅读： references/advanced-features.md

使用以下功能时：

• 图表序列化（保存／加载）
• 打印（页面设置、打印预览、页眉／页脚）
• 导出为图像格式
• 用于创建自定义符号的 Symbol Designer 工具
• 用于创建图表的 Diagram Builder 工具
• 自定义工具开发
• 性能优化

故障排除

📄 阅读： references/troubleshooting.md

遇到以下情况时：

• 常见问题和解决方案
• 程序集依赖项和版本控制
• 性能优化提示
• 最佳实践和常见问题解答

快速入门示例

带有连接节点的基本图表

using Syncfusion.Windows.Forms.Diagram;
using Syncfusion.Windows.Forms.Diagram.Controls;

// Create diagram control
Diagram diagram = new Diagram();
diagram.Size = new Size(800, 600);
diagram.HScroll = true;
diagram.VScroll = true;
diagram.ShowRulers = true;

// Create and attach model
Model model = new Model();
diagram.Model = model;

// Create a start node (ellipse)
Ellipse startNode = new Ellipse(100, 100, 120, 80);
startNode.FillStyle.Color = Color.LightGreen;
startNode.FillStyle.ForeColor = Color.Green;
startNode.LineStyle.LineColor = Color.DarkGreen;
startNode.LineStyle.LineWidth = 2;

Label startLabel = new Label();
startLabel.Text = "Start";
startLabel.FontColorStyle.Color = Color.Black;
startNode.Labels.Add(startLabel);

model.AppendChild(startNode);

// Create a process node (rectangle)
Syncfusion.Windows.Forms.Diagram.Rectangle processNode = 
    new Syncfusion.Windows.Forms.Diagram.Rectangle(300, 100, 120, 80);
processNode.FillStyle.Color = Color.LightBlue;
processNode.LineStyle.LineColor = Color.DarkBlue;
processNode.LineStyle.LineWidth = 2;

Label processLabel = new Label();
processLabel.Text = "Process";
processLabel.FontColorStyle.Color = Color.Black;
processNode.Labels.Add(processLabel);

model.AppendChild(processNode);

// Connect nodes with an orthogonal connector
OrthogonalConnector connector = 
    new OrthogonalConnector(startNode.PinPoint, processNode.PinPoint);
connector.LineStyle.LineColor = Color.Gray;
connector.LineStyle.LineWidth = 2;
connector.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

startNode.CentralPort.TryConnect(connector.TailEndPoint);
processNode.CentralPort.TryConnect(connector.HeadEndPoint);

model.AppendChild(connector);

// Add diagram to form
this.Controls.Add(diagram);

常见模式

创建完整的图表编辑器

// Setup diagram with all helper controls
Diagram diagram = new Diagram();
diagram.Dock = DockStyle.Fill;
Model model = new Model();
diagram.Model = model;

// Add Overview control
OverviewControl overview = new OverviewControl();
overview.Dock = DockStyle.Left;
overview.Diagram = diagram;

// Add PaletteGroupBar for symbols
PaletteGroupBar paletteBar = new PaletteGroupBar();
paletteBar.Dock = DockStyle.Left;
paletteBar.LoadPalette("BasicShapes.edp");
paletteBar.LoadPalette("FlowchartSymbols.edp");

// Add PropertyEditor
PropertyEditor propertyEditor = new PropertyEditor();
propertyEditor.Dock = DockStyle.Right;
propertyEditor.Diagram = diagram;

// Add DocumentExplorer
DocumentExplorer docExplorer = new DocumentExplorer();
docExplorer.Dock = DockStyle.Right;
docExplorer.AttachModel(model);

// Add all to form
this.Controls.Add(diagram);
this.Controls.Add(overview);
this.Controls.Add(paletteBar);
this.Controls.Add(propertyEditor);
this.Controls.Add(docExplorer);

激活绘图工具

// Activate rectangle tool for drawing rectangles
diagram.Controller.ActivateTool("RectangleTool");

// Activate line connector tool
diagram.Controller.ActivateTool("LineLinkTool");

// Activate selection tool (default)
diagram.Controller.ActivateTool("SelectTool");

// Configure tool settings
Tool tool = diagram.Controller.ActiveTool;
if (tool is LineConnectorTool lineConnector)
{
    lineConnector.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;
    lineConnector.TailDecorator.DecoratorShape = DecoratorShape.Circle;
}

使用图层

// Create a new layer
Layer backgroundLayer = new Layer();
backgroundLayer.Name = "Background";
backgroundLayer.Visible = true;
backgroundLayer.Enabled = true;
model.Layers.Add(backgroundLayer);

// Add nodes to specific layer
Rectangle node = new Rectangle(50, 50, 100, 60);
backgroundLayer.AppendChild(node);

// Set active layer
model.ActiveLayer = backgroundLayer;

// Toggle layer visibility
backgroundLayer.Visible = false;
diagram.Refresh();

应用自动布局

// Create nodes
List<Node> nodes = new List<Node>();
for (int i = 0; i < 10; i++)
{
    Rectangle node = new Rectangle(0, 0, 80, 50);
    node.Name = "Node" + i;
    model.AppendChild(node);
    nodes.Add(node);
}

// Apply hierarchical layout
HierarchicalLayout layout = new HierarchicalLayout(model, model.Bounds);
layout.HorizontalSpacing = 50;
layout.VerticalSpacing = 50;
layout.Orientation = LayoutOrientation.TopToBottom;
layout.Layout();

diagram.UpdateView();

保存和加载图表

// Save diagram to file
diagram.SaveBinary("MyDiagram.edd");

// Load diagram from file
diagram.LoadBinary("MyDiagram.edd");
diagram.Refresh();

// Save model only
model.Save("MyModel.xml");

// Load model
Model loadedModel = Model.Load("MyModel.xml");
diagram.Model = loadedModel;

关键类和方法

核心类

• Diagram - 继承自 ScrollControl 的主图表控件
• Model - 包含图表节点、连接器和图层
• View - 渲染模型并管理显示属性
• Controller - 处理用户输入并激活工具

节点类

• Node - 所有图表节点的基类
• Rectangle、Ellipse、Polygon、RoundRect - 基本形状节点
• Line、PolyLine、Curve、Bezier、Spline - 基于线条的节点
• TextNode、RichTextNode - 文本节点
• BitmapNode - 图像节点
• Group - 用于容纳分组节点的容器

连接器类

• OrthogonalConnector - 90 度角连接器
• DirectedLinesConnector - 智能路由连接器
• LineConnector - 直线连接器

常用方法

• Model.AppendChild(node) - 向模型添加节点
• Controller.ActivateTool(toolName) - 激活绘图工具
• Diagram.UpdateView() - 刷新图表显示
• Node.Labels.Add(label) - 向节点添加标签
• Port.TryConnect(endpoint) - 通过端口连接节点
• Controller.Group() - 对选中的节点进行分组
• Model.HistoryManager.Undo() - 撤销上一个操作

常见用例

1. 流程图设计器 - 使用决策节点、起止符号和方向连接器创建流程
2. 组织结构图 - 使用自动布局和员工节点构建层级结构
3. 网络图 - 使用服务器、路由器和连接线可视化网络拓扑
4. UML 编辑器 - 设计类图、时序图和用例图
5. 思维导图 - 创建以中心思想为核心、概念向外分支的辐射式思维导图
6. 工作流设计器 - 使用 BPMN 表示法设计业务流程工作流
7. ER 图 - 使用实体、属性和关系对数据库架构建模
8. 电路设计器 - 使用元件和导线连接设计电路

相关技能

• 实现 Syncfusion Windows Forms 组件 - 主库导航
• 主库技能中提供的组件类别

---

需要帮助？ 请查看故障排除参考，了解常见问题和解决方案。