简介这份资源面向具备一定 C# 基础的 .NET 桌面开发者提供一套基于 WinForm 与 GDI 的流程图绘制示例代码可用于搭建自定义工作流设计器或流程编辑工具。代码围绕 Graphics、Pen、SolidBrush 等绘图类展开涵盖形状定义与绘制、鼠标拖动交互、Invalidate 即时刷新以及形状与连接线的数据结构管理并配有较详细注释便于理解与二次扩展。压缩包共 39 个文件以 cs 源码、resx 与 resources 资源文件、config 配置、sln 与 csproj 工程文件为主另含可执行程序与效果图整体约 176KB结构紧凑、开箱即可运行调试。该资源已有 3214 人学习下载适合想深入掌握 GDI 绘图机制、鼠标事件驱动重绘与图形界面交互实现的开发者参考也可作为流程图类工具原型的基础框架按需扩展节点类型与连线逻辑。1. 一个 WinForm 流程图控件为什么值得单独拆一遍接手一个内部工单系统时需求方只提了一句话让用户自己拖节点、连线、保存成流程。听起来简单真动手才发现坑在细节——拖动节点时连线要跟着走、不能闪烁画布要能缩放平移保存下来的数据还得能还原成同样的图。市面上不少流程图库要么绑死 Web 端要么依赖一堆第三方 DLL塞进一个纯 WinForm 老项目里水土不服。这份 .NET 工作流程图 WinForm 资源用的是 GDI 直接绘制C# 实现拖动即时刷新属于那种“良心资源”级别的轻量方案不引外部图形库一个画布控件加一套图元模型就能跑。适合两类人——一类是手里有 WinForm 项目、需要内嵌流程编辑能力的开发者另一类是想搞懂 GDI 双缓冲绘图、命中测试、序列化这套组合拳怎么落地的人。下面按“能干什么 → 怎么跑 → 怎么改”的顺序拆。2. 技术选型与整体架构GDI 画布怎么撑起一个流程编辑器2.1 为什么是 GDI 而不是第三方图形库WinForm 里画图有三条路一是引第三方图表/图形库功能全但体积大、授权和版本兼容都是隐患二是用 WPF 的 Canvas 重写可老项目是 .NET Framework WinForm混编成本高三是直接用System.Drawing下的 GDI 接口自绘。这个项目走的是第三条。GDI 的好处是零额外依赖、随 .NET Framework 自带、对像素级控制足够细代价是所有交互逻辑——命中测试、选中态、拖动、连线、重绘——都得自己写。对流程图这种图元数量有限几十到几百个节点、刷新频率不高的场景GDI 完全扛得住而且代码透明出问题能一行行查不用猜黑匣子里发生了什么。核心绘制入口就是控件的OnPaint所有图元在一个Graphics对象上依次画出来。这里有个血泪经验如果不做双缓冲拖动节点时整个画布会疯狂闪烁看起来像坏了。项目里通过设置控件样式开启双缓冲这是 WinForm 自绘的第一道门槛。// 在画布控件的构造函数里开启双缓冲消除拖动闪烁 public FlowCanvas() { // 关键让 WinForm 先把内容画到后台缓冲区再一次性贴到屏幕 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true); this.UpdateStyles(); }AllPaintingInWmPaint表示所有绘制都走OnPaint屏蔽WM_ERASEBKGND的背景擦除UserPaint表示由控件自己负责绘制OptimizedDoubleBuffer是双缓冲的核心开关ResizeRedraw保证窗口尺寸变化时整幅重绘。四个样式缺一个都可能出现残影或闪烁这是自绘控件最常见的翻车点。2.2 图元模型节点、连线、画布三层结构整个项目的数据结构可以拆成三层FlowNode节点、FlowLink连线、FlowCanvas画布容器。节点持有位置、尺寸、标题、端口信息连线持有起点节点、终点节点以及可选的折点画布持有节点集合、连线集合、当前选中项、缩放比例和平移偏移。这种分层的好处是绘制和交互都围绕集合遍历展开序列化时也只需把三层对象转成 JSON 或 XML。// 节点模型位置、尺寸、文本、端口 public class FlowNode { public string Id { get; set; } public Rectangle Bounds { get; set; } // 节点在画布坐标系中的矩形 public string Title { get; set; } public ListPoint Ports { get; set; } // 相对 Bounds 的端口偏移 public bool IsSelected { get; set; } } // 连线模型用节点 Id 关联避免直接持有对象引用导致序列化循环 public class FlowLink { public string FromNodeId { get; set; } public string ToNodeId { get; set; } public ListPoint Waypoints { get; set; } // 折线拐点直线时为空 }连线用节点 Id 而不是对象引用是为了序列化时不出现循环引用也方便反序列化后重新建立关联。端口用相对坐标存节点移动时端口跟着走不用逐个更新。这套模型不复杂但决定了后面拖动、连线、保存能不能写干净。2.3 绘制管线一次 OnPaint 里发生了什么OnPaint里的顺序很讲究先画背景网格再画所有连线最后画所有节点选中的图元额外画高亮边框。连线先画是因为节点要盖在连线上面否则线头会穿过节点文字。绘制时用Graphics.TranslateTransform和ScaleTransform应用画布的平移与缩放这样图元坐标始终用逻辑坐标不用在每处手动换算。protected override void OnPaint(PaintEventArgs e) { var g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 抗锯齿线条更顺 g.TranslateTransform(_offsetX, _offsetY); // 应用画布平移 g.ScaleTransform(_zoom, _zoom); // 应用缩放 DrawGrid(g); // 背景网格 foreach (var link in _links) DrawLink(g, link); // 先画线 foreach (var node in _nodes) DrawNode(g, node); // 后画节点 }SmoothingMode.AntiAlias让斜线和圆角不出现锯齿平移和缩放放在最前面后续所有绘制自动继承变换。注意缩放后线宽也会被放大如果希望线宽恒定需要在画笔上按1/_zoom反向补偿这是缩放功能里容易被忽略的细节。3. 从零跑起来环境、入口与第一次拖动3.1 环境准备与项目打开这是标准的 .NET Framework WinForm 工程用 Visual Studio 打开解决方案即可不需要额外装 NuGet 包。目标框架一般是 .NET Framework 4.x操作系统 Windows 7 及以上都能跑。打开后先编译一次确认没有缺引用如果提示找不到System.Drawing在项目引用里补上即可它属于框架自带程序集。运行后主窗体里应该能看到一块带网格的画布以及工具栏上的“添加节点”“删除”“保存”之类按钮。3.2 主窗体与画布控件的挂接主窗体负责工具栏和文件操作画布控件负责所有图形交互。挂接方式有两种一是把画布控件直接拖到窗体上二是代码里动态创建并Dock Fill。项目里通常是后者方便控制层级。窗体加载时初始化画布、绑定事件把默认示例流程灌进去用户一打开就能看到效果而不是面对一块空白画布发呆。private void MainForm_Load(object sender, EventArgs e) { _canvas new FlowCanvas { Dock DockStyle.Fill }; _canvas.NodeDoubleClick OnNodeDoubleClick; // 双击节点改标题 _canvas.SelectionChanged OnSelectionChanged; // 选中态同步到属性面板 this.Controls.Add(_canvas); _canvas.LoadDemo(); // 载入示例流程便于第一次运行就能看到效果 }Dock Fill让画布占满剩余区域两个事件把画布的交互结果抛给窗体窗体再更新属性面板或弹窗。这种“控件管画、窗体管业务”的分工后面加功能时不会互相纠缠。3.3 拖动即时刷新的完整链路拖动是这套代码的核心卖点。鼠标按下时做命中测试找到点中的节点并记录偏移鼠标移动时更新节点位置并调用Invalidate()触发重绘鼠标抬起时结束拖动。关键在于移动过程中只重绘、不重建对象且双缓冲保证不闪。protected override void OnMouseDown(MouseEventArgs e) { var pt ToLogical(e.Location); // 屏幕坐标转逻辑坐标 _dragNode HitTestNode(pt); // 命中测试返回最上层节点 if (_dragNode ! null) { _dragOffset new Point(pt.X - _dragNode.Bounds.X, pt.Y - _dragNode.Bounds.Y); this.Capture true; // 捕获鼠标拖出控件也不丢事件 } } protected override void OnMouseMove(MouseEventArgs e) { if (_dragNode null) return; var pt ToLogical(e.Location); _dragNode.Bounds new Rectangle(pt.X - _dragOffset.X, pt.Y - _dragOffset.Y, _dragNode.Bounds.Width, _dragNode.Bounds.Height); this.Invalidate(); // 只请求重绘不阻塞 }ToLogical把屏幕坐标按平移和缩放反算回逻辑坐标否则缩放后拖动会“跑偏”Capture true保证鼠标快速移动拖出控件边界时仍能收到移动事件Invalidate()只是标记区域无效真正的绘制在消息循环空闲时由OnPaint完成所以连续移动不会卡死。命中测试要从后往前遍历节点集合保证点中的是最上层那个。4. 核心模块拆解命中测试、连线绘制与序列化4.1 命中测试与选中态管理命中测试决定“点到了谁”。节点用矩形包含判断连线用点到线段的距离判断阈值一般取 5 像素左右太严点不中、太松误选。选中态用集合维护支持 Ctrl 多选时把新节点加入集合普通点击则清空后只留一个。private FlowNode HitTestNode(Point pt) { // 倒序遍历后画的节点在上层优先命中 for (int i _nodes.Count - 1; i 0; i--) { if (_nodes[i].Bounds.Contains(pt)) return _nodes[i]; } return null; } private double DistanceToSegment(Point p, Point a, Point b) { // 点到线段最短距离用于连线命中 double dx b.X - a.X, dy b.Y - a.Y; if (dx 0 dy 0) return Math.Sqrt((p.X - a.X) * (p.X - a.X) (p.Y - a.Y) * (p.Y - a.Y)); double t ((p.X - a.X) * dx (p.Y - a.Y) * dy) / (dx * dx dy * dy); t Math.Max(0, Math.Min(1, t)); // 投影点限制在线段内 double px a.X t * dx, py a.Y t * dy; return Math.Sqrt((p.X - px) * (p.X - px) (p.Y - py) * (p.Y - py)); }t是投影参数限制在 0 到 1 之间保证算的是线段而不是无限长直线距离小于阈值就判定命中连线。多选时选中集合变化要触发SelectionChanged让属性面板同步显示否则用户改了属性却不知道改的是哪个。4.2 连线绘制从端口到端口的路径计算连线不是简单两点一线而是从起点节点的某个端口出发、到终点节点的某个端口结束中间可能带折点。项目里常见做法是先算两个端口的中心点再根据相对方位决定走水平还是垂直的折线最后用GraphicsPath一次性画出来箭头用填充三角形收尾。private void DrawLink(Graphics g, FlowLink link) { var from FindNode(link.FromNodeId); var to FindNode(link.ToNodeId); if (from null || to null) return; Point start GetPortCenter(from, link.FromPortIndex); Point end GetPortCenter(to, link.ToPortIndex); using (var path new GraphicsPath()) { path.AddLine(start, end); // 直线有折点时逐段 AddLine using (var pen new Pen(Color.SteelBlue, 1.5f)) g.DrawPath(pen, path); DrawArrow(g, start, end); // 终点画箭头 } }GetPortCenter把端口的相对偏移换算成画布逻辑坐标GraphicsPath的好处是后续要加贝塞尔曲线或圆角折线时只需换AddBezier绘制代码不用大改箭头方向由起点指向终点计算用Math.Atan2求角度再旋转三角形顶点。线宽 1.5f 在缩放时会跟着变需要恒定线宽就除以当前_zoom。4.3 序列化把画布存成可还原的数据保存功能把节点和连线转成 JSON加载时反序列化再重建关联。用DataContractJsonSerializer或Newtonsoft.Json都行前者框架自带、后者更灵活。关键是连线只存节点 Id加载后通过 Id 找回节点对象避免对象图循环。[DataContract] public class FlowDocument { [DataMember] public ListFlowNode Nodes { get; set; } new(); [DataMember] public ListFlowLink Links { get; set; } new(); } public void Save(string path) { var doc new FlowDocument { Nodes _nodes, Links _links }; using var fs File.Create(path); var serializer new DataContractJsonSerializer(typeof(FlowDocument)); serializer.WriteObject(fs, doc); }DataContract和DataMember标记决定哪些字段参与序列化Bounds是结构体可直接序列化加载后要遍历连线、用FindNode把 Id 还原成引用找不到就丢弃该连线并记日志防止脏数据让整个画布加载失败。保存前建议先做一次校验比如悬空连线、重复 Id这些在二次开发时很容易踩。5. 避坑与排查自绘控件最容易翻车的几处5.1 拖动时画面闪烁或残影现象是拖动节点时整块画布忽明忽暗松手后还留着一层旧位置的影子。原因基本是没开双缓冲或者开了但OnPaintBackground还在擦背景。解决是把第 2 章那四个ControlStyles全部打开并重写OnPaintBackground为空实现让背景只由OnPaint里的网格绘制负责。改完再拖画面应该干净利落。5.2 缩放后拖动位置对不上现象是放大到 150% 后鼠标明明点在节点上节点却往反方向跳。原因是鼠标事件给的是屏幕坐标而节点存的是逻辑坐标中间少了反变换。解决是在OnMouseDown和OnMouseMove里统一走ToLogical按(screen - offset) / zoom反算。所有涉及坐标的地方都要过这一层漏一处就偏。5.3 连线端点不跟随节点移动现象是拖动节点后连线还停在旧位置。原因是连线绘制时缓存了端点坐标而不是每次从节点实时计算。解决是DrawLink里每次都通过FindNode取当前Bounds再算端口中心不缓存。代价是每帧多几次查找节点量不大时完全无感。5.4 保存后重新加载连线丢失现象是保存的 JSON 里连线都在加载后画布上一条线都没有。原因是反序列化后连线里的节点 Id 对不上或者FindNode用了区分大小写的比较而 Id 生成时大小写不一致。解决是 Id 统一用小写 GUID加载时用StringComparer.OrdinalIgnoreCase查找找不到的连线记日志而不是静默丢弃方便定位脏数据。5.5 大量节点时拖动卡顿现象是节点超过一两百个后拖动明显掉帧。原因是每次Invalidate()都重绘全部图元。解决是只失效受影响区域拖动时用Invalidate(unionOfOldAndNewBounds)限定重绘范围或者对静态图元做离屏缓存。流程图场景节点通常不多但工单系统里流程一复杂就容易撞上提前留好这个优化口子。6. 二次开发把示例控件改成能进生产的编辑器拿到这份代码后最值钱的改造不是加花哨样式而是把“能演示”变成“能存住、能校验、能扩展”。我一般按三步走。第一步是补数据校验保存前遍历连线检查两端节点是否存在、Id 是否重复、是否有自环校验不过就弹提示并定位到问题图元别让脏数据进库。第二步是把图元模型抽象出基类FlowElement节点、连线、将来的注释框、分组框都继承它绘制和命中测试走统一接口新增图元类型时只写自己的Draw和HitTest画布代码不用动。第三步是把交互状态机化用枚举表示Idle / Dragging / Linking / Selecting每个状态只处理自己关心的鼠标事件避免现在这种一堆if堆在OnMouseMove里、加个连线功能就互相打架。验证改造是否成功我习惯用一组固定用例拖三个节点连两条线、缩放 50% 和 200% 各拖一次、保存后重启加载、故意删掉一个节点再保存看校验是否拦住。这组用例跑通基本能确认没把原有能力改坏。还有一个具体技巧给画布加一个UndoStack每次结构性变更增删节点、移动结束、连线变更压一个快照快照只存FlowDocument的深拷贝撤销时整体替换再重绘。比逐操作写反向命令简单得多代价是内存但流程图数据量小完全划算。说个自己的教训早些年我在一个类似控件上直接改OnMouseMove加连线预览结果拖动和连线两种状态互相触发鼠标一快就画出乱七八糟的线查了大半天才发现是状态没隔离。从那以后我每次给自绘控件加交互都强制先把状态机画出来再写代码宁可多一个枚举也不让if嵌套超过两层。这份资源的结构已经算清爽照着上面的路子改进生产不算难。希望帮到你。本文还有配套的精品资源点击获取