简介在MFC框架下一份动态绘制圆弧实例代码包面向具备C基础的Windows开发者重点演示如何通过自定义CView派生类实现交互式圆弧绘制。代码包总大小81KB共19个文件包括6个.h头文件与4个.cpp源文件以及.vcxproj、.sln工程配置.rc、.ico等界面资源基本覆盖了MFC工程的核心组成轻量且便于单独打开调试。实例着重演示了自定义CView派生类的写法通过重写OnDraw调用GDI的ArcTo函数精确绘制圆弧并配合OnLButtonDown、OnLButtonUp、OnMouseMove等消息处理函数把鼠标拖拽动作实时转换为圆弧的中心点、半径、起始角与结束角参数修改后调用Invalidate触发重绘完整呈现了MFC事件驱动与图形设备接口的配合方式。包内还附带说明文档与必要的调试工程文件学习时可直接对照代码理解每一步接口与逻辑再自行扩展为更复杂的矢量绘图程序。目前已有924人学习浏览适合作为MFC进阶或GDI绘图入门的实践参考资料。 给 MFC 项目加动态圆弧功能这件事说难不难但坑是真不少。我最早做的时候也以为跟画直线差不多鼠标按下、移动、抬起三条消息一接就完事。可真写起来才发现圆弧涉及圆心、半径、起始角、扫过角一整套参数换算而且 MFC 自带的Arc函数方向和数学上还不完全一致稍不注意画出来的就是反的。这篇文章就把我实际跑通的这套动态绘制圆弧实例完整讲一遍包括实现思路、鼠标交互流程、核心代码、以及我踩过的几个典型问题。正在做绘图功能、或者准备实现类似“鼠标拖动预览圆弧”效果的读者可以直接参考这套方案。1. 先说思路动态绘制圆弧到底难在哪1.1 画直线和画圆弧的本质区别画直线只需要两个点起点和终点鼠标按下记一个点移动时实时更新终点MoveTo加LineTo就完事。圆弧就不一样了。一条圆弧至少由四个参数决定圆心坐标、半径、起始角度、终止角度或者扫过角度。动态绘制场景下鼠标每移动一下当前点都可能代表不同的含义——有时候当前点是弧的终点有时候当前点决定半径大小还有时候当前点是弧上第三个约束点。这就意味着每一次鼠标移动都要重新计算这一组参数再重新生成弧线。这也是很多初学者一做圆弧就懵的根本原因不是不会调用画弧函数而是不知道把鼠标位置映射成哪几个几何参数。1.2 动态绘制的基础架构选择MFC 里画动态弧线常见路线有三条直接用CDC::Arc/AngleArc画真弧靠鼠标消息更新边界矩形和角度参数用参数方程逐点计算弧线上的一系列坐标点再用Polyline连成折线上 OpenGL 或 GDI 做硬件加速绘制。我这次选的是第二条路参数方程逐点生成点集然后Polyline一次性画出来。原因很简单——最可控。你可以精确控制弧线的采样密度想画 30 度的弧还是 300 度的弧都自由方向也可以自己定义。相比之下直接用Arc函数虽然代码短但起点终点怎么排序、逆时针顺时针怎么约定MFC 的默认行为跟直觉经常对不上调试起来反而更费劲。而且逐点生成的方式后续做填充、做透明度、做轨迹规划都能复用同一套点集数据。窗口重绘使用Invalidate()触发WM_PAINT配合双缓冲避免闪烁。这是一个非常标准的 GDI 绘图架构可扩展性也比较好。2. 核心原理从鼠标坐标到圆弧参数2.1 坐标系与角度换算这一步是整套实例的灵魂也是大多数人栽跟头的地方。MFC 默认的映射模式是MM_TEXT坐标系原点在窗口左上角X 轴向右Y 轴向下。而我们数学里常用的直角坐标系是 Y 轴向上。问题就出在这个 Y 轴方向反了。C 的atan2(y, x)返回的是从 X 轴正方向逆时针到点 (x, y) 的角度这是基于“Y 轴向上”的常规数学坐标系。如果直接把屏幕上的鼠标坐标差值丢进去double dx pt.x - center.x; double dy pt.y - center.y; double angle atan2(dy, dx); // 这里的角度方向是反的因为屏幕 Y 轴向下这样算出来的角度在视觉上会跟鼠标实际位置“镜像翻转”。例如鼠标移动到圆心的右上方你期望起始角大约在 -45 度或 315 度但直接算出来的结果却指向 45 度方向画出来弧线就跑偏了。解决办法很简单在使用atan2之前先把屏幕坐标系里的 Y 方向反转也就是计算角度时用-dy代替dydouble angle atan2(-(pt.y - center.y), pt.x - center.x);这样得到的就是“视觉上正确”的角度——0 度在圆心正右方角度增大时方向在屏幕上表现为顺时针符合大多数人对圆弧的直觉。也可以理解为把屏幕坐标“掰回”了数学坐标系。提示如果你后面改用CDC::Arc画弧要留意 MFC 对 Arc 起止点和方向有自己的约定。我的经验是尽量用逐点生成的方式把角度换算逻辑完全握在自己手里就不用跟 GDI 的方向约定死磕。2.2 三种动态交互方式与选型“动态绘制”听起来简单但仔细想一下鼠标操作圆弧至少有三种常见交互方式交互方式鼠标按下鼠标移动典型场景圆心半径角度记录圆心计算半径和当前角度绘制扇形、仪表盘、渐变弧三点定弧记录起点记录中间点并实时预览CAD 类绘图、测量工具起点终点圆心记录起点根据圆心生成弧线游戏技能范围、机器人路径每种交互对应的参数计算逻辑都不一样。我这篇文章选第一种“圆心半径角度”因为它是逻辑链条最清晰、最容易理解的一套方案按下鼠标的位置就是圆心拖动时鼠标到圆心的距离是半径鼠标相对圆心的角度就是弧的结束角起始角固定为 0 度。这样你随手一拖就能看到一段从 0 度到鼠标方向的圆弧非常直观。如果你将来要做三点定弧核心在于解圆方程求圆心那属于另外一套几何算法可以在这个基础上再扩展。2.3 步长选择与弧线平滑度算弧线点集时有一个细节步长取多少。如果步长过大比如 10 度取一个点那么半径稍大一些弧线立刻变成明显的多边形折线如果步长过小比如 0.1 度取一个点画一圈下来 3600 个点虽然效果很平滑但在性能敏感的场合完全没有必要。我实际使用的经验值有两个参考维度按角度步长常规 UI 绘制用 1 度一个点已经足够平滑按像素步长更科学的做法是让相邻点的弧长不超过 2 到 3 个像素可以动态计算步长。代码里可以用一个根据半径调整步长的逻辑double step 180.0 / (3.14159 * radius); // 约等于每 2 像素一个点单位是角度 if (step 0.1) step 0.1; if (step 5.0) step 5.0;这个公式就是让弧上每两个点之间的弧长大约限制在 2 像素左右小半径时自动取大步长大半径时自动逐步长兼顾平滑和性能。3. 完整实例MFC 对话框程序动态画弧3.1 工程准备与数据成员设计我用的是 VS2013 环境创建一个基于对话框的 MFC 程序工程名假设为ArcDemo。为了让弧线数据在窗口刷新后还能保留要把绘制参数保存成对话框类的成员变量而不是放在局部变量里。在CArcDemoDlg类中添加以下成员bool m_bDrawing; // 是否正在绘制 CPoint m_ptCenter; // 圆心 int m_nRadius; // 半径 double m_dStartAngle; // 起始角单位度 double m_dEndAngle; // 结束角单位度构造函数里做初始化m_bDrawing false; m_ptCenter CPoint(0, 0); m_nRadius 0; m_dStartAngle 0.0; m_dEndAngle 0.0;画弧只需要一个当前结束角起始角默认从 0 度开始。如果你想支持从任意角度开始只需要额外记录按下瞬间的角度作为起始角即可。注意成员变量的初始化千万别漏。MFC 对话框类成员默认是随机值不初始化的话程序运行时经常出现“第一次不画、第二次乱画”的诡异现象。3.2 鼠标消息处理按下、移动、抬起在对话框上点右键打开类向导给CArcDemoDlg添加三个鼠标消息的处理函数WM_LBUTTONDOWN、WM_MOUSEMOVE、WM_LBUTTONUP。按下鼠标时记录圆心并准备开始绘制void CArcDemoDlg::OnLButtonDown(UINT nFlags, CPoint point) { m_bDrawing true; m_ptCenter point; m_nRadius 0; m_dEndAngle 0.0; SetCapture(); // 捕获鼠标即使移出窗口也能收到消息 CDialogEx::OnLButtonDown(nFlags, point); }鼠标移动时实时计算半径和结束角然后刷新界面void CArcDemoDlg::OnMouseMove(UINT nFlags, CPoint point) { if (m_bDrawing) { int dx point.x - m_ptCenter.x; int dy point.y - m_ptCenter.y; // 计算半径保留最小值为 1避免除零 m_nRadius (int)sqrt((double)(dx*dx dy*dy)); if (m_nRadius 1) m_nRadius 1; // 计算当前点相对圆心的角度并转换成度 double angleRad atan2(-(double)dy, (double)dx); m_dEndAngle angleRad * 180.0 / 3.141592653589793; Invalidate(FALSE); // 触发重绘FALSE 表示不擦除背景 } CDialogEx::OnMouseMove(nFlags, point); }这里有几个细节值得说明。第一半径计算用了sqrt头文件记得加#include cmath或#include math.h。第二atan2的返回值范围是 [-π, π]转换成角度后是 [-180, 180]这个范围画弧线足够用。第三Invalidate(FALSE)比Invalidate(TRUE)更防闪烁后面在常见问题里还会展开讲。鼠标抬起时结束绘制并释放捕获void CArcDemoDlg::OnLButtonUp(UINT nFlags, CPoint point) { if (m_bDrawing) { m_bDrawing false; ReleaseCapture(); } CDialogEx::OnLButtonUp(nFlags, point); }SetCapture和ReleaseCapture一定要成对出现。不调用SetCapture的话鼠标拖出窗口范围后程序就收不到移动消息弧线会突然停在窗口边缘不调用ReleaseCapture的话后续会一直收不到其他窗口的消息。3.3 生成弧线点集写一个独立函数输入圆心、半径、起止角输出点集。这样绘制逻辑和几何计算分离后续扩展也方便。void CArcDemoDlg::BuildArcPoints(CPoint center, int radius, double startAngle, double endAngle, std::vectorCPoint points) { points.clear(); if (radius 0) return; // 根据半径动态决定步长保证弧线平滑 double step 180.0 / (3.141592653589793 * radius); if (step 0.1) step 0.1; if (step 5.0) step 5.0; double startRad startAngle * 3.141592653589793 / 180.0; double endRad endAngle * 3.141592653589793 / 180.0; // 保证从起始角扫到结束角支持正反两个方向 if (endRad startRad) endRad 2.0 * 3.141592653589793; for (double a startRad; a endRad; a step * 3.141592653589793 / 180.0) { int x center.x (int)(radius * cos(a)); int y center.y - (int)(radius * sin(a)); // Y 轴反转 points.push_back(CPoint(x, y)); } // 把最后一个结束角精确补上避免圆弧末端缺一块 int x center.x (int)(radius * cos(endRad)); int y center.y - (int)(radius * sin(endRad)); points.push_back(CPoint(x, y)); }y center.y - radius * sin(a)这行是整个函数里最关键的。数学坐标里角度增大是逆时针方向对应到屏幕坐标就是 Y 值反转所以这里取减号。这样生成出来的弧线在屏幕上看起来是角度增大时顺时针方向转动和鼠标拖动方向一致。如果生成后发现方向相反比如鼠标往右下角拖弧线却往右上角长那只要把最后的minus改成plus或者把结束角取负号就可以翻转方向。3.4 绘制与双缓冲重写OnPaint函数。为了防闪烁我用内存 DC 双缓冲先在内存里画再一次性贴到屏幕。void CArcDemoDlg::OnPaint() { CPaintDC dc(this); // 获取客户区尺寸创建内存 DC 和位图 CRect rcClient; GetClientRect(rcClient); CDC memDC; memDC.CreateCompatibleDC(dc); CBitmap bmp; bmp.CreateCompatibleBitmap(dc, rcClient.Width(), rcClient.Height()); CBitmap* pOldBmp memDC.SelectObject(bmp); // 先填充白色背景 CBrush bgBrush(RGB(255, 255, 255)); memDC.FillRect(rcClient, bgBrush); // 画圆弧 if (m_nRadius 0) { std::vectorCPoint points; BuildArcPoints(m_ptCenter, m_nRadius, m_dStartAngle, m_dEndAngle, points); if (points.size() 2) { CPen pen(PS_SOLID, 3, RGB(255, 0, 0)); CPen* pOldPen memDC.SelectObject(pen); memDC.Polyline(points.data(), (int)points.size()); memDC.SelectObject(pOldPen); } // 顺手把圆心也标出来方便观察 CBrush centerBrush(RGB(0, 128, 255)); memDC.FillRect(CRect(m_ptCenter.x - 3, m_ptCenter.y - 3, m_ptCenter.x 4, m_ptCenter.y 4), centerBrush); } // 一次性拷贝到屏幕 dc.BitBlt(0, 0, rcClient.Width(), rcClient.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); }这段代码里Polyline传的是std::vector的数据指针VS2013 支持C11可以直接用points.data()。如果你是 VS2008 或更老的版本改成points[0]就行。3.5 重新处理背景擦除双缓冲防闪烁还有一个关键配套动作重写OnEraseBkgnd并返回TRUE让系统不再擦除背景。否则窗口每次刷新都会先擦成灰白色再贴我们画的内容视觉上依然会闪。在类向导里添加WM_ERASEBKGND消息处理函数BOOL CArcDemoDlg::OnEraseBkgnd(CDC* pDC) { // 返回 TRUE禁止默认擦除背景避免闪烁 return TRUE; }这里不用调用CDialogEx::OnEraseBkgnd(pDC)因为我们已经自己在OnPaint里填充背景了系统再擦一遍纯属多余。4. 常见问题与排查技巧实录4.1 画出来的弧方向总是反的这是我被问过最多的问题也是自己最早犯过的错。现象鼠标在圆心的右下角期望弧线往右下方伸展结果弧线却跑到左上方。原因就是开头提到的屏幕坐标 Y 轴方向和数学坐标系相反导致atan2或sin的角度方向跟视觉直觉不一致。排查方法很简单在OnMouseMove里加一句TRACE(angle %f, radius %d\n, m_dEndAngle, m_nRadius);拖动鼠标时观察输出值。右下角dx0, dy0时正确的角度应该在 -90 到 0 度之间如果算出来是 0 到 90 度那就是 Y 方向没反转。修正方式就一句话atan2里 dy 取负点集计算里sin前的符号取负。两处必须配套只改一处会出现“角度对了但画出来位置不对”的怪问题。4.2 鼠标拖动时窗口闪烁严重闪烁的根因是窗口每次Invalidate后系统先擦除背景再执行OnPaint。擦除和绘制之间有个时间差肉眼就会看到白色闪烁。我实际采取的是三管齐下重写OnEraseBkgnd返回TRUE禁止默认擦背景使用Invalidate(FALSE)代替Invalidate(TRUE)告诉系统不清除客户区OnPaint内走内存 DC 双缓冲画完再BitBlt。这样基本能去掉 90% 的闪烁。如果还是很轻微地闪检查一下是不是OnPaint里又调用了CDialogEx::OnPaint()那会把默认背景画一遍相当于前面的功夫白做了。4.3 第一次鼠标按下后画不出弧线常见原因有两个。一个是数据没初始化。比如m_dStartAngle和m_dEndAngle在构造函数里没赋值它们可能是随机数导致点集计算里endRad永远小于startRad循环跑一次就退出了。另一个原因是点了按钮或窗口焦点变化鼠标消息没有传到位。如果你是在处理按钮点击事件之后才想画弧需要先调用SetFocus()让对话框获取焦点否则按下鼠标时可能触发的是按钮的点击逻辑而不是OnLButtonDown。按我上面的代码逻辑按下时圆心已经记下移动时半径和角度都更新弧线应该立刻出现。如果还是没反应就在OnMouseMove里打断点看看m_bDrawing是否为 true。4.4 窗口最小化再恢复后弧线丢失这是因为你只把弧线画在了窗口上没有把绘制参数保存下来。窗口最小化或缩放会让客户区失效系统会发送WM_PAINT要求重绘如果OnPaint里没有任何数据能恢复弧线画面当然就空了。解决方式就是我这篇文章从一开始就强调的把圆心、半径、起止角全部作为对话框类的成员变量而不是OnPaint里的局部变量。只要成员变量数据完好重绘时调用BuildArcPoints就能完整还原弧线。4.5 弧线末端总是缺一小块用角度循环生成点时由于浮点精度和步长累加误差最后一点不一定恰好落在结束角上。比如结束角是 90 度步长是 1.2 度累加到 88.8 度后下一次就到了 90 度以上循环条件a endRad判断失败末端就少了最后一段。解决办法是在循环结束后手动把结束角对应的点补进去我在BuildArcPoints里就加了这段代码。这是一个很容易忽略但非常实用的细节。5. 扩展玩法把动态圆弧用起来这套动态绘制圆弧的框架其实很通用稍微改一改就能衍生出不少实用功能结合相关领域的热门方向我列几个常见的扩展思路。5.1 自定义按钮的弧光高亮效果很多 MFC 自定义按钮会涉及圆弧绘制。比如鼠标悬停在按钮上时要求按钮边缘有一道弧形高光就可以用这套参数方程生成弧线点集再用渐变画刷填充而不是去死磕 GDI 的Arc函数。核心就是把“按钮区域”换算成“内切圆弧的圆心和半径”复用BuildArcPoints。5.2 OpenGL 场景下的圆弧轨迹预览MFC 里集成 OpenGL 渲染时也需要动态绘制圆弧通常用于显示机器人运动轨迹或数据可视化曲线。这种场景下 GL 的坐标系和 MFC 窗口坐标略有差异但点集生成思路完全一致只需要把BuildArcPoints出来的坐标转换到 GL 坐标系再用glBegin(GL_LINE_STRIP)画出来。由于点集本身就是一系列离散点OpenGL 直接连点即可连 GDI 的Polyline都省了。5.3 圆弧轨迹规划与数据持久化动态绘制的圆弧点集不只是用来显示的。在自动化设备调试中常常需要把鼠标模拟出来的圆弧轨迹导出成运动指令这时候一份点集数据可以直接用来计算速度插补、角度插补。甚至可以把圆心、半径、起止角存到 MySQL 数据库里下次启动程序时读取并重绘相当于给画图工具加了“存档”功能。这就体现出逐点生成方案的价值了你拿到的是一份可以用来计算的点集而不是 GDI 画出来的一堆无法访问的像素。5.4 控件自适应屏幕分辨率如果你把这份圆弧绘制逻辑放到 MFC 的控件里比如自定义的静态控件或 Picture 控件会面临缩放问题。最简单的处理方式是按控件客户区尺寸动态计算缩放比例圆心和半径都乘以这个比例。这也就是“MFC 控件自适应屏幕分辨率”的一种具体落地方式。弹窗最大化时圆弧能跟随控件一起变大而不是固定在原位置。我个人在实际项目里的习惯是写一个独立的几何工具类把所有圆弧计算、点集生成、坐标转换都放在里面MFC 界面只负责接收鼠标和调用绘制。这样不管是做动态预览、OpenGL 渲染还是导出轨迹数据都只需要调用同一个BuildArcPoints。就算以后界面从 MFC 换成 Qt算法部分也可以原封不动地搬过去。动态绘制圆弧这件事看起来很基础但真正把坐标换算、步长控制、双缓冲这些细节都理顺了做出来的东西会比随手调Arc函数稳定太多。本文还有配套的精品资源点击获取
