简介本资源为面向 Delphi 13 开发者的 TMS VCL Diagram Studio v4.32.0.0 组件包适合需要在 VCL 应用中实现流程图、组织结构图、网络拓扑图等专业图表的中高级开发者。组件集提供节点增删、连线、属性编辑及颜色、边框、字体等界面定制能力并支持图表动态更新与数据导入导出可显著减少绘图模块的编码量。压缩包共 272 个文件约 1.82MB以 56 个 pas 源码、40 个 dpk 与 38 个 dproj 工程文件、23 个 dfm 窗体及 60 个 res 资源为主另含 dcr、dgr、inc、cpp、h 等辅助文件并附 chm 帮助与 pdf 文档便于直接编译、查阅与二次开发。目前已有 120 人学习下载可作为 Delphi 13 图表设计功能的完整参考实现。1. Delphi 13 里把 TMS VCL Diagram Studio 跑起来它到底解决什么问题如果你在 Delphi 13 里要画流程图、拓扑图、组织架构图或者让用户自己拖拽节点连线第一反应可能是用 Canvas 手绘、用 FireMonkey 的 TShape 拼或者干脆嵌个 Web 控件。这些路我都走过最后都卡在同一个地方交互逻辑要自己写撤销重做要自己写序列化要自己写导出要自己写。TMS VCL Diagram Studio 就是把这些脏活打包好的那类控件v4.32.0.0 这个版本号说明它已经迭代了很多轮不是玩具。它面向的是 VCL 桌面应用不是 FMX所以 Delphi 13 的 VCL 项目可以直接用。这篇文章不讲虚的就讲怎么把它装进 Delphi 13、怎么画出第一个图、参数怎么调、以及我踩过的那些坑。适合已经会用 Delphi 写窗体程序、但没接触过图形编辑控件的开发者。2. 安装与工程接入从 7z 包到能编译的第一个窗体2.1 先搞清楚这个包的结构再动手拿到的是一个 7z 压缩包名字里带 v4.32.0.0。TMS 的 VCL 控件包通常不会只有一个 dpk它一般包含运行时代码包、设计时代码包、示例工程、帮助文档可能还有针对不同 Delphi 版本的编译产物目录。我的习惯是先解压到一个路径里没有中文、没有空格的目录比如D:\Components\TMSDiagram。路径带空格或中文是 Delphi 编译期报莫名其妙的 dcu 找不到的高频原因这个血泪经验在装任何第三方控件时都成立。解压后先别急着装用资源管理器看一眼目录层级。你要找的是.dpk文件通常运行时代码包叫类似DiagramStudio_R.dpk设计时包叫DiagramStudio_D.dpk具体命名以包内实际为准。同时确认有没有Source目录如果有源码后面调试和排查会方便很多。如果包里带了Demos或Samples先记下路径装完之后第一件事就是拿示例工程验证。2.2 在 Delphi 13 里编译并安装设计时包Delphi 13 的 IDE 里走File Open Project定位到那个设计时.dpk打开。打开后不要直接点 Install先做两件事一是确认Project Options Delphi Compiler Target里选的是 Win32 或 Win64VCL 桌面目标二是确认Search Path里已经包含了解压出来的Source目录。TMS 的包一般会在 dpk 里用相对路径引用源码但如果你移动过目录就得手动补。// 这不是要你写的代码是让你在 dpk 的 requires/contains 里核对 // requires 段通常长这样确认 rtl、vcl 这些在 requires rtl, vcl, vclx; // contains 段里应该能看到核心单元比如 contains DiagramStudio in Source\DiagramStudio.pas, DiagramStudioReg in Source\DiagramStudioReg.pas;上面这段是让你打开 dpk 后对照看的不是让你新建文件。requires里如果缺vclx编译会报找不到某个基类contains里的路径如果和你实际解压位置对不上IDE 会标红。确认无误后右键 dpk 节点选Compile编译通过再选Install。Install 成功后工具面板上会出现 TMS Diagram 相关的页签里面能看到控件图标。提示如果 Install 报「Cannot load package」八成是设计时包依赖的运行时代码包没先编译。先把运行时代码包编译一遍再回来装设计时包。2.3 建一个最小工程验证控件真的可用装完之后别急着上业务先建一个 VCL Application 做最小验证。在窗体上放一个TDiagram或者对应的画布控件具体类名以你工具面板里看到的为准再放一个按钮。按钮里写一句创建节点的代码跑起来能看见一个矩形就说明环境通了。procedure TForm1.Button1Click(Sender: TObject); var Node: TDiagramNode; // 类名以实际控件为准这里用通用叫法 begin // 在画布上创建一个节点坐标和尺寸先给死值 Node : Diagram1.CreateNode(100, 100, 160, 60); Node.Text : 第一个节点; // 刷新画布否则新节点可能不立即显示 Diagram1.Invalidate; end;这段代码的逻辑很直白CreateNode在指定坐标和尺寸上建一个节点对象Text是节点上显示的文字最后Invalidate触发重绘。参数上前两个是左上角 X、Y后两个是宽和高单位是像素。如果你跑起来没看到节点先检查Diagram1这个变量名是不是和你窗体上控件名一致再检查是不是忘了Invalidate。有些版本创建节点后会自动刷新有些不会这个差异在不同小版本里存在别在这上面纠结太久。3. 画布、节点与连线把交互逻辑落到具体属性上3.1 画布坐标系和缩放参数怎么设Diagram Studio 的画布默认坐标系原点在左上角X 向右、Y 向下和 VCL 常规一致。真正影响体验的是缩放和滚动。画布控件一般有Zoom之类的属性单位是百分比100 就是原始大小。我一般会把它和ScrollBars配合用让用户能放大看细节、缩小看全局。// 设置缩放为 150%并允许滚动 Diagram1.Zoom : 150; Diagram1.ScrollBars : ssBoth; // 具体枚举名以实际为准Zoom设太大节点文字会糊因为它是整体缩放不是矢量重绘设太小连线上的箭头几乎看不见。我的经验是给用户一个缩放滑块范围卡在 25 到 400 之间超过这个范围体验急剧下降。另外缩放之后鼠标点击的坐标要换算回画布逻辑坐标否则你拖节点会拖不准。换算公式是「鼠标屏幕坐标除以缩放比例」这个在控件的鼠标事件里通常有现成的转换方法优先用控件自带的别自己算。3.2 节点样式和连线锚点的关键属性节点不只是个矩形。它有一堆外观属性填充色、边框色、边框宽度、圆角、字体、文字对齐。这些属性名在不同版本里可能有细微差别但套路一致。连线这块重点是锚点Anchor和路由Routing。锚点决定线从节点的哪条边出来路由决定线是直线、折线还是曲线。// 创建一个节点并设置外观 var N: TDiagramNode; begin N : Diagram1.CreateNode(200, 150, 140, 50); N.Text : 处理步骤; N.FillColor : clWhite; N.BorderColor : clGray; N.BorderWidth : 2; N.Font.Size : 10; // 连线从节点右侧出来 N.OutputAnchor : akRight; // 枚举名以实际为准 end;FillColor和BorderColor用 VCL 的 TColorBorderWidth是整数像素。OutputAnchor这种属性是连线逻辑的入口你把它设成右侧后面创建的连线就会从右边出发。如果找不到这个属性说明你的版本用的是另一种连线模型去示例工程里翻一个连线例子照着抄比猜快。连线创建一般用CreateLink(源节点, 目标节点)这类方法创建完同样要刷新。3.3 用示例工程反推正确用法TMS 的包如果带了 Demos那是最好的老师。打开一个画流程图的示例看它窗体上放了什么控件、代码里怎么建节点、怎么处理鼠标事件。我一般会做一件事把示例工程另存一份然后删掉一半代码看它还能不能跑以此判断哪些是核心、哪些是锦上添花。这个方法比读帮助文档快因为帮助文档经常滞后于实际版本。注意示例工程里的路径可能是相对路径你另存之后要检查Search Path和Output Path否则编译报找不到 dcu。4. 避坑与排查装控件时最容易翻车的几件事4.1 编译报「找不到 xxx.dcu」现象编译 dpk 或你的工程时报某个单元找不到比如DiagramStudio.dcu not found。原因搜索路径没配对或者运行时代码包没编译。解决先编译运行时代码包再把它的输出目录加到工程的Search Path里。如果包里有源码直接把源码目录加进去让 IDE 从源码编译比用预编译 dcu 更稳。4.2 装完之后工具面板没有控件现象Install 显示成功但工具面板找不到控件页签。原因设计时包没真正注册或者 IDE 需要重启。解决先关掉 Delphi 再重开很多时候重开就出来了。如果还没有回到 dpk确认Register过程里确实调用了注册控件的函数并且这个单元在contains里。有些包需要手动在Register里加一行这种情况在第三方控件里不罕见。4.3 运行时创建节点报「Abstract Error」现象调用CreateNode时抛抽象方法错误。原因你用的控件实例是基类不是具体实现类或者控件没被正确初始化。解决确认窗体上放的是具体控件而不是某个抽象基类确认控件在FormCreate之前就已经存在。如果是在FormCreate里创建节点把代码挪到FormShow里试试有时候控件句柄还没建好。4.4 缩放后鼠标坐标对不上现象放大到 200% 后点节点点不中或者拖拽偏移。原因鼠标事件给的是屏幕坐标没换算成画布逻辑坐标。解决用控件自带的坐标转换方法别自己拿屏幕坐标直接当画布坐标用。如果控件没提供就手动除以缩放比例但要注意滚动偏移也要一起减掉。4.5 保存的文件在新版本里打不开现象用旧版本存的图升级到 v4.32 后加载报错。原因序列化格式在不同大版本间可能有变化。解决先备份旧文件用新版本的示例工程试着加载看能不能自动迁移。如果不能就得写转换代码把旧格式读出来重新建节点。这个坑在跨版本升级时几乎必踩提前留好数据迁移的时间。5. 进阶把图导出成图片和 PDF 的实用技巧图画完了用户要导出。Diagram Studio 一般自带导出图片的能力但导出 PDF 往往要绕一下。我的做法是先把图导出成高分辨率位图再用 Delphi 里成熟的 PDF 库把位图塞进 PDF 页面。这样虽然多一步但可控性强不会因为控件自带的 PDF 导出功能缺失而卡住。// 导出为 PNG 的思路具体方法名以控件为准 var Bmp: TBitmap; begin Bmp : TBitmap.Create; try // 让画布按内容大小渲染到位图 Diagram1.ExportToBitmap(Bmp, 2); // 2 表示 2 倍分辨率 Bmp.SaveToFile(D:\output\diagram.png); finally Bmp.Free; end; end;ExportToBitmap的第二个参数是缩放倍数给 2 就是两倍分辨率导出图更清晰。如果控件没有这个方法就用PaintTo把画布画到位图 Canvas 上效果一样只是要自己处理背景色。导出 PDF 时把这张位图按页面大小缩放后画到 PDF 的 Canvas 上注意 DPI 换算否则打出来会偏小或偏大。验证导出是否正常我有个笨办法但很管用导出后把图片放大到 400% 看节点文字边缘有没有锯齿有锯齿说明分辨率不够把倍数调到 3 或 4。PDF 则用阅读器打开看页面尺寸是不是 A4内容有没有被裁掉。这些检查花不了两分钟但能避免交付后被退回。我自己的习惯是任何图形控件在正式用之前先花半天把「建节点、连线、缩放、导出」这条链路走通一遍走不通就不往业务里塞。Diagram Studio 这条链路在 Delphi 13 上是通的前提是路径别带中文、包别装错顺序、坐标换算别偷懒。希望帮到你。本文还有配套的精品资源点击获取