简介这是一个名为GraphExample2的C#画图示例项目面向Windows Forms初学者和需要快速实现图形编辑功能的开发者覆盖矩形、圆形、菱形等矢量图形的绘制、鼠标拖动、缩放与旋转操作。压缩包共50个文件主体为21个cs源代码文件涵盖主窗体、图形基类与派生类、图形集合管理、用户数据持久化等模块同时附带项目配置、资源文件、类图设计文件以及可直接运行的exe和dll整个包只有100KB结构清晰紧凑。目前已有4753人学习下载工程采用Shape抽象基类配合多个派生类描述不同图形利用PictureBox承载绘图并响应MouseDown、MouseMove等事件实现交互还支持将图形序列化保存到文件。读者对照源码可以学到GDI基础绘图、面向对象继承多态应用、控件事件编程与序列化方案也能直接运行exe查看效果适合课程设计、毕业设计或日常工具开发时作为参考框架稍加扩展即可添加更多图形类型。 前阵子群里有朋友问“用C#做画图功能难不难”底下有人说“这不就是个控件加几个鼠标事件嘛”。我当时没接话因为凡是做过类似东西的人心里都清楚——能画出来只是第一步画完还能用鼠标拖着走、用滚轮放大缩小这背后的坐标换算、命中测试、重绘机制才是真正考验基本功的地方。这篇文章我就把这个过程完整走一遍从零实现一个基于WinForms的简易画布支持矩形、圆形、菱形三种图形并且支持图形的随意拖动和放大缩小。代码基于C# GDI不需要第三方控件所有逻辑都可以直接抄走改到自己项目里。适合正在学C#、准备做上位机或桌面小工具的开发者参考。1. 需求拆解与整体方案1.1 三个核心需求难就难在“编辑”这一层先把需求列清楚避免做着做着跑偏绘制鼠标按下、拖动、松开画出一个新的图形过程中要有实时预览。拖动已经画好的图形用鼠标按住后能随意移动位置。放大缩小图形在选中状态下能够按一定比例放大或缩小。“画出来”这个动作本身不复杂难点在于后面两个。因为一旦图形可以拖动、缩放就意味着你不能把图形画完就扔在那儿不管而是必须有一个“图形对象”的概念——每个图形都得知道自己是什么形状、在什么位置、有多大还要能回答“鼠标点我了吗”这个问题。1.2 为什么选WinForms GDI而不是别的方案技术选型这件事我是基于项目场景定的。这种画图工具最常见的落地场景是上位机界面、工控组态软件、设备布局图编辑器、流程图设计器。这类应用的特点是图形数量不会上千交互逻辑并不复杂但要求启动快、交付简单、运行稳定。WinForms在这个场景下是最合适的选择没有之一。GDI画几百个图形做交互性能完全够毫秒级重绘毫无压力。WPF虽然动画效果更好但学习曲线和工程复杂度都更高OpenGL、SkiaSharp这些图形库在这种场景下属于杀鸡用牛刀反而增加了部署和调试成本。有一点我要说明如果你以后要做的图形编辑器特别复杂比如CAD级应用、上万节点的连线图那GDI可能顶不住需要换SkiaSharp或者直接上OpenGL。但就“矩形、圆形、菱形随便画能拖能缩放”这个规模GDI是投入产出比最高的方案。2. 图形模型设计2.1 抽象基类把“共同能力”抽出来既然是多种图形第一反应就应该是用面向对象来组织。不同图形都有自己的绘制方式和命中判定但它们在“拖拽、缩放”这件事上是完全相同的。所以先定义一个抽象基类把公共能力和接口约定好。public abstract class Shape { // 图形的外接矩形决定位置和尺寸 public Rectangle D { get; set; } // 是否处于选中状态 public bool Selected { get; set; } // 绘制自身 public abstract void Draw(Graphics g); // 命中测试判断点是否落在图形内部 public abstract bool HitTest(PointF p); // 平移 public void Move(float dx, float dy) { D new Rectangle( (int)(D.X dx), (int)(D.Y dy), D.Width, D.Height); } }所有图形都用一个外接矩形Rectangle来记录位置和大小。这样做的好处太明显了拖动只需要改矩形的X和Y缩放只需要改Width和Height具体的绘制和命中判定丢给子类去实现就行。2.2 三种图形的绘制细节矩形最简单直接DrawRectangle圆形用DrawEllipse画在同一个外接矩形里就是椭圆正方形外接矩形就是正圆菱形稍微需要想一下——它其实是外接矩形的四个边的中点连起来的四边形。public class RectShape : Shape { public override void Draw(Graphics g) { g.DrawRectangle(Pens.Black, D); } public override bool HitTest(PointF p) { return D.Contains((int)p.X, (int)p.Y); } } public class EllipseShape : Shape { public override void Draw(Graphics g) { g.DrawEllipse(Pens.Black, D); } public override bool HitTest(PointF p) { // 圆/椭圆的命中判定椭圆中心到点的“归一化距离”是否小于1 float cx D.X D.Width / 2f; float cy D.Y D.Height / 2f; float dx (p.X - cx) / (D.Width / 2f); float dy (p.Y - cy) / (D.Height / 2f); return dx * dx dy * dy 1f; } } public class DiamondShape : Shape { public override void Draw(Graphics g) { PointF[] pts GetPoints(); g.DrawPolygon(Pens.Black, pts); } private PointF[] GetPoints() { return new PointF[] { new PointF(D.X D.Width / 2f, D.Y), // 上 new PointF(D.Right, D.Y D.Height / 2f), // 右 new PointF(D.X D.Width / 2f, D.Bottom), // 下 new PointF(D.X, D.Y D.Height / 2f) // 左 }; } public override bool HitTest(PointF p) { // 用GraphicsPath构造区域直接判断点是否在区域内简单可靠 using (var path new GraphicsPath()) { path.AddPolygon(GetPoints()); using (var region new Region(path)) { return region.IsVisible(p); } } } }注意菱形的命中测试我直接用了GraphicsPath加Region。为什么不手写数学判断因为凸多边形的点在内部判断虽然不难但要处理菱形这种斜边图形手写很容易出错而Region.IsVisible是GDI内部封装好的性能上几十个图形调用完全无所谓代码还不会出边界条件的bug。2.3 命中测试判断“鼠标点到哪个图形了”命中测试是拖拽和缩放的基石。没有它鼠标点下去的时候你根本不知道用户想操作哪个图形。实现原则有两个图形重叠时应该选中“最上层”的那个也就是列表里最后画的那个。所以遍历图形列表时要从后往前查。每个图形只查自己是否包含点具体规则由子类实现调用方不需要关心它到底是圆还是多边形。public Shape HitTest(PointF p) { for (int i shapes.Count - 1; i 0; i--) { if (shapes[i].HitTest(p)) return shapes[i]; } return null; }这个思路要记牢命中测试是“最后一个命中的”为选中对象这也符合画图软件的用户直觉——后画的图形覆盖先画的图形。3. 绘制功能的实操实现3.1 画布事件的完整流程画布我用一个自定义PaintBox : Control来做双击或新建类都行。核心事件就是三个MouseDown、MouseMove、MouseUp。绘制模式下三个事件的职责分别是MouseDown记录起点。MouseMove实时更新终点把预览图形画出来。MouseUp用起点终点构造一个真正的图形加入列表。public class PaintBox : Control { private ListShape shapes new ListShape(); private bool isDrawing; private PointF startPoint, endPoint; private string currentShapeType rect; public PaintBox() { DoubleBuffered true; BackColor Color.White; } protected override void OnMouseDown(MouseEventArgs e) { base.OnMouseDown(e); if (e.Button ! MouseButtons.Left) return; // 先判断是否点中已有图形点中了就进入拖拽逻辑 // 本文先展示绘制流程拖拽逻辑放在下一部分 startPoint e.Location; endPoint e.Location; isDrawing true; } protected override void OnMouseMove(MouseEventArgs e) { base.OnMouseMove(e); if (isDrawing) { endPoint e.Location; Invalidate(); // 触发重绘 } } protected override void OnMouseUp(MouseEventArgs e) { base.OnMouseUp(e); if (!isDrawing) return; isDrawing false; Rectangle rect NormalizeRect(startPoint, endPoint); Shape shape null; switch (currentShapeType) { case rect: shape new RectShape { D rect }; break; case ellipse: shape new EllipseShape { D rect }; break; case diamond: shape new DiamondShape { D rect }; break; } if (shape ! null) shapes.Add(shape); Invalidate(); } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); e.Graphics.SmoothingMode System.Drawing.Drawing2D.SmoothingMode.AntiAlias; foreach (var shape in shapes) shape.Draw(e.Graphics); // 画预览虚线框 if (isDrawing) { Rectangle previewRect NormalizeRect(startPoint, endPoint); using (Pen pen new Pen(Color.Gray)) { pen.DashStyle System.Drawing.Drawing2D.DashStyle.Dash; e.Graphics.DrawRectangle(pen, previewRect); } } } }3.2 重绘机制和双缓冲整个画图的运行逻辑是“改数据 触发重绘”。千万别在事件里直接调Graphics.DrawRectangle那样画出来的东西一旦窗口遮挡、最小化就会消失。正确做法是事件里只修改数据状态然后调用Invalidate()通知控件“我需要重画了”系统随后触发Paint事件在OnPaint里把当前所有的图形数据统一画出来。这种“数据与绘制分离”的模型是WinForms图形应用的通用套路。闪烁问题的根源是每次重绘时系统先擦背景再画图形这个过程肉眼可见就成了闪烁。解决办法有两个我建议都做把DoubleBuffered设置为true让控件内部双缓冲。不要在OnPaint里调用base.OnPaint之外的Graphics.Clear除非确实需要。3.3 绘制阶段容易踩的坑最大的坑就是从右往左、从下往上拖出来的矩形宽高变成负数。比如鼠标按下点在(200, 200)拖动到(100, 150)Rectangle构造出来宽高就是-100、-50画出来直接异常或凭空消失。必须把起点和终点“标准化”成一个正常的矩形左上角坐标取最小值宽高取差值绝对值。private Rectangle NormalizeRect(PointF a, PointF b) { int x (int)Math.Min(a.X, b.X); int y (int)Math.Min(a.Y, b.Y); int w (int)Math.Abs(a.X - b.X); int h (int)Math.Abs(a.Y - b.Y); if (w 0) w 1; if (h 0) h 1; return new Rectangle(x, y, w, h); }这个函数后续拖拽、缩放里也会用到属于基础设施。另外预览图形用虚线画和最终实线图形区分开交互清晰很多。4. 拖拽功能偏移量计算与重绘时机4.1 拖拽的核心逻辑拖拽的本质是什么是记录鼠标按下时图形的位置和鼠标起点然后在鼠标移动时计算偏移量把图形位置偏移相同的量。这里容易犯一个错直接在MouseMove里把图形位置设成鼠标当前坐标。这样图形会“跳”到鼠标按下点上而不是保持鼠标和图形之间的相对位置不变。正确逻辑分三步MouseDown时做命中测试如果点中了某个图形记录该图形当前位置shape.D.X/Y再记录鼠标按下点mouseDownPoint。MouseMove时计算偏移量dx 当前鼠标X - mouseDownPoint.X; dy 当前鼠标Y - mouseDownPoint.Y然后把图形位置更新为“按下时的位置 偏移量”。MouseUp时结束拖拽。private bool isDragging; private Shape dragTarget; private PointF dragStartPoint; private Rectangle dragStartRect; protected override void OnMouseDown(MouseEventArgs e) { base.OnMouseDown(e); if (e.Button ! MouseButtons.Left) return; Shape hit HitTest(e.Location); if (hit ! null) { // 进入拖拽模式 isDragging true; dragTarget hit; dragStartPoint e.Location; dragStartRect hit.D; } else { // 进入绘制模式 startPoint e.Location; endPoint e.Location; isDrawing true; } } protected override void OnMouseMove(MouseEventArgs e) { base.OnMouseMove(e); if (isDragging dragTarget ! null) { float dx e.X - dragStartPoint.X; float dy e.Y - dragStartPoint.Y; dragTarget.D new Rectangle( dragStartRect.X (int)dx, dragStartRect.Y (int)dy, dragStartRect.Width, dragStartRect.Height); Invalidate(); } else if (isDrawing) { endPoint e.Location; Invalidate(); } }拖动的时候每帧都Invalidate有些人担心性能。实测下来几十个图形的重绘耗时在1毫秒以内完全感觉不到卡顿。因为GDI本身就是CPU光栅化简单几何图形本身也没多少计算量。4.2 拖拽交互的人性化细节拖拽如果只是“能拖”用起来还是会别扭。我在实际测试过程中发现三个细节值得处理最小拖拽距离鼠标按下如果只是轻轻点了一下不应该立刻进入拖拽否则用户想选中图形时图形会被轻微移动。可以在MouseMove里判断只有鼠标移动超过3像素后才设置isDragging true。鼠标光标反馈鼠标悬停在图形上时改成Cursors.Hand明显提示用户“这个可以拖”。这个功能只要在MouseMove里做一次命中测试并设置Cursor即可。选中态视觉反馈图形被选中后可以画一圈虚线外框或者把手柄画出来让用户知道当前在操作谁。这个通过Selected属性配合Draw方法实现非常简单。public override void Draw(Graphics g) { g.DrawRectangle(Pens.Black, D); if (Selected) { using (Pen pen new Pen(Color.DodgerBlue, 1f)) { pen.DashStyle DashStyle.Dash; g.DrawRectangle(pen, Rectangle.Inflate(D, 3, 3)); } } }这个“选中框稍微外扩3像素”的细节能让选中状态被看得清清楚楚视觉上也很专业。5. 放大缩小的两种实现路径放大缩小这个需求行业内一般有两种理解。一种是对选中的单个图形缩放另一种是整个画布视图的缩放像CAD那样整体视野放大缩小。两种做法差异很大我把它们都讲一遍实际做哪种取决于你的需求。5.1 单个图形的滚轮缩放如果只要求“画好的图形能放大缩小”最简单的方式是鼠标滚轮直接对当前命中的图形进行缩放。缩放的核心是保持图形的“视觉支点”不变。最简单的方案是保持图形的中心点固定直接修改宽高private void ZoomShape(Shape shape, PointF mousePos, float factor) { Rectangle r shape.D; float newW r.Width * factor; float newH r.Height * factor; // 限制最小尺寸避免缩没了 if (newW 10 || newH 10) return; if (newW 2000 || newH 2000) return; // 保持中心点不变 float cx r.X r.Width / 2f; float cy r.Y r.Height / 2f; shape.D new Rectangle( (int)(cx - newW / 2f), (int)(cy - newH / 2f), (int)newW, (int)newH); Invalidate(); }但如果希望在缩放时鼠标指向的位置保持不动更像工具软件的手感计算要稍微复杂一点。基本原理是先算出鼠标在图形内部的“相对比例”缩放后让这个相对位置还是跟鼠标对齐。private void ZoomShapeAtMouse(Shape shape, PointF mousePos, float factor) { Rectangle r shape.D; // 鼠标在图形内的归一化比例 float ratioX (mousePos.X - r.X) / r.Width; float ratioY (mousePos.Y - r.Y) / r.Height; float newW r.Width * factor; float newH r.Height * factor; if (newW 10 || newH 10) return; int newX (int)(mousePos.X - newW * ratioX); int newY (int)(mousePos.Y - newH * ratioY); shape.D new Rectangle(newX, newY, (int)newW, (int)newH); Invalidate(); }这个写法我建议优先用第二种。为什么因为用户缩放图形时眼睛盯着鼠标位置如果鼠标指向的地方被内容“顶走了”操作体验很糟糕。让鼠标点对应的内容保持在鼠标下方是所有图形编辑器的通用做法。5.2 画布整体缩放的视图变换如果你的需求不只是缩放某个图形而是“整个画布所有内容一起放大缩小并且用滚动条或鼠标拖拽来观察”那就需要用视图变换的思路了。核心思想图形本身的世界坐标永远不变只在绘制时应用一个“全局变换矩阵”把世界坐标映射到屏幕坐标。这正好呼应了相关热词里的“仿射变换”。在GDI里最简单的实现方式是Graphics的两个方法private float viewScale 1f; private float viewOffsetX 0f, viewOffsetY 0f; protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g e.Graphics; g.SmoothingMode SmoothingMode.AntiAlias; // 应用视图变换 g.TranslateTransform(viewOffsetX, viewOffsetY); g.ScaleTransform(viewScale, viewScale); foreach (var shape in shapes) shape.Draw(g); }TranslateTransform先把坐标系平移到视图偏移位置ScaleTransform再把坐标系放大。之后所有绘制都在“世界坐标系”下进行图形本身的坐标一个都不用改。滚轮缩放整个画布时需要修改viewScale同时让鼠标所在的位置成为视觉缩放中心。做法是滚轮前后鼠标对应的“世界坐标”点必须保持一致。protected override void OnMouseWheel(MouseEventArgs e) { base.OnMouseWheel(e); float oldScale viewScale; float newScale oldScale * (e.Delta 0 ? 1.1f : 0.9f); if (newScale 0.1f || newScale 20f) return; // 计算鼠标位置在世界坐标中对应的点 float worldX (e.X - viewOffsetX) / oldScale; float worldY (e.Y - viewOffsetY) / oldScale; viewScale newScale; // 调整偏移量让鼠标下方的世界点保持不动 viewOffsetX e.X - worldX * viewScale; viewOffsetY e.Y - worldY * viewScale; Invalidate(); }5.3 缩放后的坐标换算全文最关键的部分如果用了画布整体缩放有一个绕不开的问题鼠标事件里的坐标是屏幕坐标而图形的坐标是世界坐标两者在不缩放时相等缩放后就必须换算。这也是大量新手被困住的地方——图形明明放大了命中测试却永远点不中。原因就是拿屏幕坐标直接去跟世界坐标比中间差了viewScale倍。换算公式很简单绘制时的变换是“先平移再缩放”所以反向换算就是“先除缩放再减平移”private PointF ScreenToWorld(PointF screenPoint) { return new PointF( (screenPoint.X - viewOffsetX) / viewScale, (screenPoint.Y - viewOffsetY) / viewScale); }然后在所有鼠标事件命中测试、拖拽、绘制里第一步先把鼠标坐标转成世界坐标后面全部用世界坐标参与逻辑。protected override void OnMouseDown(MouseEventArgs e) { base.OnMouseDown(e); PointF world ScreenToWorld(e.Location); Shape hit HitTest(world); if (hit ! null) { // 拖拽逻辑 } // ... }这个转换只要统一处理一次后面所有逻辑都不会出问题。我见过太多人在这上面翻车记住这个规律绘制时用矩阵放大了多少倍鼠标事件就必须除以多少倍。另外还有一个容易被忽视的细节缩放后如果直接绘图线的宽度也会跟着放大比如原本1像素的线在放大10倍后会变成10像素视觉上非常奇怪。解决办法是画线时把Pen.Width除以viewScaleusing (Pen pen new Pen(Color.Black, 1f / viewScale)) { g.DrawRectangle(pen, D); }6. 常见问题与排查技巧实录6.1 典型问题速查表我在调试这套代码时整理了遇到频率最高的几个问题整理成速查表值得先收藏。现象根本原因解决方案图形拖动时闪烁严重默认重绘时先擦背景再画图设置DoubleBuffered true从右下往左上拖图形消失或炸裂矩形宽高变负数所有矩形都用NormalizeRect标准化缩放后鼠标点不中图形屏幕坐标和世界坐标混用鼠标事件统一调用ScreenToWorld转换画布放大后线条太粗Pen.Width被ScaleTransform放大了线宽除以viewScale鼠标按住图形再点一下图形轻微移动了按下事件立刻进入拖拽状态加3像素最小拖动距离判断绘制预览时旧图形被拖拽造成“重影”手动擦了局部区域但没重绘全部只用Invalidate()触发整体重绘菱形点选不准确点边上也算命中自己写多边形判定有边界问题改用Region.IsVisible6.2 几个调试过程中意外发现的小细节第一个细节是关于Invalidate的。刚开始我为了“优化”性能只刷新图形旧的边界和新的边界拼起来的小矩形结果图形边缘经常有残影排查了半天最后发现Invalidate(Rectangle)传的区域稍微小了一点导致一两条边没被重绘。与其精确计算脏矩形不如直接整幅Invalidate()——在图形数量不大的情况下GDI的重绘开销非常低整幅刷新最省心。第二个细节是缩放限制。如果不限制最小尺寸用户疯狂缩小滚轮图形缩小到1像素以下甚至宽高变成0DrawEllipse直接不画了看起来就像图形“消失”。要么在缩放代码里判断newW 10就return要么在Draw时跳过宽高小于等于0的图形。两个都要做双保险。第三个细节是命中的下层图形判空。图形列表里如果删除了某个图形但拖拽状态里还保留着它的引用下一次MouseMove就会空引用崩溃。在复杂项目里如果涉及删除图形记得在MouseUp或删除操作时把dragTarget置空或者用“图形ID 字典查找”替代直接引用。写在后面这套代码我实际跑过单位里某个小工具就是从它扩展来的。做了几年WinForms相关的东西最大的感受是图形编辑类功能的难点从来不在“画”上而在于交互——命中测试、坐标换算、拖拽偏移、缩放中心这些基本功是通用的。今天把它们讲透你以后做流程图工具、拓扑图编辑器、设备布局软件思路都是一通百通的。最后再分享一个扩展方向目前图形数据都存在ListShape里程序关了就没了。你可以随手找一个JSON序列化库把Shape列表序列化保存成文件再写一个加载功能一个最简单的本地版画图工具就闭环了。这一步做完再往撤销重做、多选、对齐吸附方向发展就是一个接近商用的编辑器雏形了。本文还有配套的精品资源点击获取