简介这是一份面向WPF开发者与界面设计学习者的流程图绘制实战资源聚焦如何在.NET框架下用WPF实现类似Visio的图形编辑功能。内容围绕图形元素、可缩放绘图板、带箭头的连接线、拖放交互、数据模型绑定、自动布局算法、撤销重做、样式模板以及序列化等核心模块展开适合具备一定C#与XAML基础、希望深入图形化编辑器开发的中高级开发者参考。资源包共142个文件以cs源码、xaml与baml界面文件为主辅以dll、pdb、exe等编译产物及少量图片、配置与文档文件压缩包约4.68MB结构完整便于直接运行与二次开发。目前已有3114人学习下载。通过研读源码读者可掌握流程图编辑器的整体架构、交互事件处理与数据持久化思路并借鉴布局与命令模式等实现方式快速搭建可扩展的图形编辑工具。1. 用 WPF 画流程图从拖拽节点到连线吸附的完整实现很多做桌面端工控、医疗或内部管理系统的开发者都遇到过这个需求客户想要一个能自己拖拽节点、连线、保存布局的流程图编辑器类似 Visio 那种体验但又不希望引入庞大的第三方控件库。WPF 实现流程图绘制这个方向恰好卡在“功能要够用”和“技术栈要可控”之间。它适合已经熟悉 C# 和 XAML、想自己掌控渲染与交互逻辑的开发者也适合需要把流程图能力嵌入现有 WPF 业务系统的团队。整个项目围绕画布、节点、连线、交互四块展开核心难点不在画而在拖拽时的坐标换算、连线端点的吸附判定以及撤销重做这类编辑器的“后悔药”机制。下面按能跑起来、能看懂、能改动的顺序拆一遍。2. 项目结构与技术选型为什么用 Canvas 而不是 Grid2.1 整体分层与目录组织这个项目没有走 MVVM 重型框架的路子而是用轻量级的分层方式把渲染、交互、数据模型拆开。常见做法是分成四个目录Models 放节点和连线的数据定义Views 放主窗口和画布容器Controls 放自定义的节点控件和连线控件Services 放命中测试、序列化、撤销栈这些逻辑。这样拆的好处是后面要把流程图导出成图片或者 JSON 时不用去动界面代码。主窗口的 XAML 里核心是一个Canvas作为绘图表面外面套ScrollViewer支持大画布滚动再外层用Grid做工具栏和状态栏的布局。节点不是直接画在 Canvas 上的矩形而是自定义的UserControl里面包含边框、标题文本和四个方向的连接点。连线用Path加BezierSegment或者Polyline实现具体选哪种取决于要不要曲线效果。!-- MainWindow.xaml 核心结构 -- Grid Grid.RowDefinitions RowDefinition HeightAuto/ RowDefinition Height*/ /Grid.RowDefinitions !-- 工具栏添加节点、删除、保存、加载 -- ToolBar Grid.Row0 Button Content添加节点 ClickAddNode_Click/ Button Content删除选中 ClickDeleteSelected_Click/ Button Content保存布局 ClickSaveLayout_Click/ /ToolBar !-- 画布区域支持滚动 -- ScrollViewer Grid.Row1 HorizontalScrollBarVisibilityAuto VerticalScrollBarVisibilityAuto Canvas x:NameFlowCanvas Width3000 Height2000 BackgroundWhite MouseMoveFlowCanvas_MouseMove MouseLeftButtonUpFlowCanvas_MouseLeftButtonUp/ /ScrollViewer /Grid这里Canvas的Width和Height给了一个较大的固定值是为了让ScrollViewer有滚动空间。如果想让画布无限扩展可以在节点拖到边缘时动态增大这两个值但那样会引入额外的坐标重算新手阶段先固定尺寸更稳。2.2 节点数据模型与依赖属性节点模型用普通的INotifyPropertyChanged类就够了不需要上ObservableCollection的复杂嵌套。每个节点记录唯一 Id、显示文本、X/Y 坐标、宽高以及一个连接点集合。连接点本身也是一个简单对象记录方向上、下、左、右和相对于节点左上角的偏移量。public class FlowNode : INotifyPropertyChanged { public string Id { get; set; } Guid.NewGuid().ToString(); public string Text { get; set; } 新节点; private double _x; public double X { get _x; set { _x value; OnPropertyChanged(); } } private double _y; public double Y { get _y; set { _y value; OnPropertyChanged(); } } public double Width { get; set; } 120; public double Height { get; set; } 60; // 四个连接点按方向索引 public ListConnector Connectors { get; set; } new(); public event PropertyChangedEventHandler? PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string? name null) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }X和Y做成依赖属性或者带通知的普通属性是为了在拖拽时界面能自动刷新。如果只是普通字段拖完松手界面才更新体验会很差。连接点的偏移量一般取节点宽高的一半比如上连接点是(Width/2, 0)右连接点是(Width, Height/2)这样连线端点能准确落在边框中点。2.3 连线控件的绘制方式连线用Path实现数据是PathGeometry里面放一段BezierSegment让线条有自然的弧度。起点和终点分别绑定到两个连接点的绝对坐标。绝对坐标的计算方式是节点在 Canvas 上的Canvas.Left加上连接点相对偏移。这里容易翻车的地方是如果直接绑定节点属性拖拽过程中连线不会实时跟随因为Canvas.Left是附加属性绑定路径要写对。// 根据两个连接点生成贝塞尔曲线路径 private PathGeometry BuildConnectionGeometry(Point start, Point end) { var geometry new PathGeometry(); var figure new PathFigure { StartPoint start }; // 控制点偏移量让曲线有弧度而不是直线 double offset Math.Abs(end.X - start.X) * 0.5; var segment new BezierSegment { Point1 new Point(start.X offset, start.Y), Point2 new Point(end.X - offset, end.Y), Point3 end }; figure.Segments.Add(segment); geometry.Figures.Add(figure); return geometry; }offset取水平距离的一半曲线会向中间鼓起。如果两个节点垂直距离很大可以把offset改成基于Math.Max的动态值避免曲线过于扁平。连线控件本身还要处理选中高亮和删除通常给Path加一个透明的粗描边作为命中区域不然细线很难点中。3. 拖拽与连线交互坐标换算和吸附判定怎么做3.1 节点拖拽的完整事件链拖拽看起来简单实际涉及三个事件MouseLeftButtonDown记录起始点MouseMove计算偏移并更新位置MouseLeftButtonUp结束拖拽。关键点是坐标要基于Canvas而不是窗口否则滚动条一动节点位置就飘了。用e.GetPosition(FlowCanvas)拿到的是相对于画布的坐标这个值可以直接赋给Canvas.SetLeft和Canvas.SetTop。private Point _dragStart; private FlowNode? _draggingNode; private void Node_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { var element sender as FrameworkElement; _draggingNode element?.DataContext as FlowNode; _dragStart e.GetPosition(FlowCanvas); element?.CaptureMouse(); // 捕获鼠标防止快速拖动时丢失事件 e.Handled true; } private void FlowCanvas_MouseMove(object sender, MouseEventArgs e) { if (_draggingNode null || e.LeftButton ! MouseButtonState.Pressed) return; var current e.GetPosition(FlowCanvas); double dx current.X - _dragStart.X; double dy current.Y - _dragStart.Y; _draggingNode.X dx; _draggingNode.Y dy; _dragStart current; // 更新起始点实现增量移动 UpdateConnectionsFor(_draggingNode); // 同步刷新相关连线 }CaptureMouse这行不能省否则鼠标移出节点范围后MouseMove就不再触发节点会卡在半路。增量移动的写法比记录绝对偏移更稳因为每次只加差值不会因为浮点累积误差导致节点跳变。UpdateConnectionsFor负责找到所有跟这个节点相连的连线重新计算端点坐标。3.2 连线端点的吸附判定吸附是流程图编辑器的体验分水岭。做法是当鼠标从某个连接点按下并拖动时进入“连线模式”画一条临时的虚线跟随鼠标。鼠标松开时遍历画布上所有节点的连接点计算鼠标位置与每个连接点的距离如果小于阈值常见取 15 到 20 像素就吸附到那个连接点并创建正式连线。private Connector? FindNearestConnector(Point mousePos, double threshold 18) { Connector? nearest null; double minDist threshold; foreach (var node in _nodes) { foreach (var conn in node.Connectors) { // 连接点绝对坐标 节点坐标 相对偏移 var abs new Point(node.X conn.OffsetX, node.Y conn.OffsetY); double dist (abs - mousePos).Length; if (dist minDist) { minDist dist; nearest conn; } } } return nearest; }阈值 18 是血泪经验值太小了用户要对得很准太大了容易吸到隔壁节点。如果画布缩放比例不是 1阈值还要除以缩放系数否则放大后吸附范围会显得特别小。找到最近连接点后还要做一次方向校验比如起点是右侧连接点终点最好也是左侧连接点这样连线不会绕一圈。3.3 临时连线的绘制与取消连线模式下鼠标移动时要实时更新一条临时Path的终点。这条临时线通常用虚线样式颜色浅一点跟正式连线区分开。如果用户中途按了 Esc 或者右键要能取消这次连线把临时线从 Canvas 上移除。private void StartConnection(Connector source, Point startPos) { _tempPath new Path { Stroke Brushes.Gray, StrokeThickness 2, StrokeDashArray new DoubleCollection { 4, 2 }, Data new PathGeometry() }; FlowCanvas.Children.Add(_tempPath); _connectionSource source; _tempStart startPos; } private void UpdateTempConnection(Point current) { if (_tempPath null) return; _tempPath.Data BuildConnectionGeometry(_tempStart, current); } private void CancelConnection() { if (_tempPath ! null) { FlowCanvas.Children.Remove(_tempPath); _tempPath null; } _connectionSource null; }StrokeDashArray里的{4, 2}表示画 4 个像素空 2 个像素视觉上就是虚线。临时线不要加命中测试否则会挡住下面节点的鼠标事件设置IsHitTestVisible false即可。取消逻辑要同时清理临时线和状态变量不然下次连线会带着旧状态。4. 避坑与常见问题拖拽、连线、序列化里的翻车点4.1 节点拖拽时连线不跟随现象是拖动节点节点动了但连线还停在原地松手后才跳过去。原因通常是连线端点绑定的是节点属性的单向绑定而Canvas.Left变化没有触发连线重算。解决方式是在MouseMove里主动调用连线刷新或者把连线端点做成依赖属性监听节点坐标变化。我一般选主动刷新逻辑更直白性能也可控。4.2 连线端点吸附到错误的连接点现象是明明想连右侧结果吸到了下方。原因是遍历连接点时没有做方向优先级排序距离最近的不一定是方向最合理的。解决方式是在FindNearestConnector里加一个方向权重比如起点是右侧那么左侧连接点的距离乘以 1.5 的惩罚系数让同向连接点优先被选中。4.3 保存后重新加载连线全部错位现象是 JSON 里存了节点坐标和连线关系加载后连线端点对不上。原因多半是保存时存的是相对坐标加载时没有还原节点宽高导致连接点偏移量算错。解决方式是序列化时把节点宽高一起存加载时先创建节点再根据宽高重建连接点最后才恢复连线。4.4 大量节点时拖拽卡顿现象是节点超过一百个后拖动一个节点整个界面发涩。原因是每次MouseMove都遍历所有连线做刷新。解决方式是给每个节点维护一个“关联连线列表”拖拽时只刷新这个列表里的连线而不是全量遍历。另外可以把MouseMove里的刷新用Dispatcher.BeginInvoke延迟到渲染帧避免过于频繁。4.5 删除节点后连线残留现象是删了节点连到它的线还在画布上。原因是删除逻辑只移除了节点控件没有清理关联连线。解决方式是在删除节点前先遍历连线集合把所有起点或终点指向该节点的连线一并删除并且从数据模型里移除保证界面和数据一致。5. 二次开发改造从能跑到好用序列化与撤销重做怎么加5.1 用 JSON 做布局序列化要让流程图能保存和加载最直接的方式是把节点和连线序列化成 JSON。节点存 Id、文本、坐标、宽高连线存起点节点 Id、起点连接点方向、终点节点 Id、终点连接点方向。加载时先重建所有节点再根据 Id 找到对应连接点重建连线。这样存出来的文件小也方便版本管理。public class FlowDocument { public ListNodeDto Nodes { get; set; } new(); public ListConnectionDto Connections { get; set; } new(); } public class NodeDto { public string Id { get; set; } ; public string Text { get; set; } ; public double X { get; set; } public double Y { get; set; } public double Width { get; set; } public double Height { get; set; } } public class ConnectionDto { public string FromNodeId { get; set; } ; public string FromDirection { get; set; } Right; public string ToNodeId { get; set; } ; public string ToDirection { get; set; } Left; }序列化用System.Text.Json就够了不需要引入第三方库。保存时把FlowDocument转成字符串写入文件加载时反序列化后按顺序重建。注意加载前要清空当前画布否则会叠加。5.2 撤销重做的命令栈设计撤销重做是编辑器类项目的标配但也是最容易写乱的部分。常见做法是定义一个ICommand接口每个可撤销操作实现Execute和Undo。用一个StackICommand存已执行命令另一个存已撤销命令。新操作执行时清空重做栈撤销时从执行栈弹出并调用Undo再压入重做栈。public interface IUndoableCommand { void Execute(); void Undo(); } public class MoveNodeCommand : IUndoableCommand { private readonly FlowNode _node; private readonly Point _oldPos; private readonly Point _newPos; public MoveNodeCommand(FlowNode node, Point oldPos, Point newPos) { _node node; _oldPos oldPos; _newPos newPos; } public void Execute() { _node.X _newPos.X; _node.Y _newPos.Y; } public void Undo() { _node.X _oldPos.X; _node.Y _oldPos.Y; } }拖拽结束时才把移动命令压栈不要在MouseMove里压否则一次拖拽会产生几百条命令。删除节点、添加连线、修改文本都各自实现一个命令类统一走命令栈管理。5.3 改造时的验证习惯加完序列化和撤销重做后我一般会强制走一遍固定流程添加三个节点、连两条线、拖动其中一个、删除一条线、撤销三次、重做两次、保存、关闭、重新打开加载。这套流程能覆盖坐标、连线、命令栈、序列化四个模块的联动问题。从那以后我每次改完交互逻辑都强制走一遍这个流程比单元测试还管用。希望帮到你。本文还有配套的精品资源点击获取