简介面向 VC6.0 MFC 开发者的动态曲线绘图示例工程重点演示坐标系映射与双缓冲绘图机制。代码使用 SetMapMode、SetWindowOrg、SetViewportOrg、SetWindowExt、SetViewportExt 等接口完成坐标变换并配有详细注释便于理解 MFC 视图坐标系设置。双缓冲用于减轻界面闪烁不过作者采用全局刷新仍存在轻微闪烁可作为后续优化练习。压缩包共 36 个文件含 .h/.cpp 源码、工程文件、资源脚本、图标、可执行程序及调试中间文件等整体约 2.3MB。源码主体为 6 个头文件和 5 个 C 文件并附带 ReadMe.txt 说明可直接打开 PerformanceGraph.dsw 在 VC6.0 中编译运行。目前已有 465 人学习使用适合刚接触 MFC 绘图、GDI 映射模式或双缓冲的初学者参考借鉴。 做MFC开发的朋友尤其是还在维护老项目的应该都接到过这样的需求在VC6.0环境下做一个实时变化的动态曲线窗口数据进来曲线就跟着滚动像心电图一样。功能听着简单实际动手却很容易翻车——直接用MFC的GDI函数一帧一帧画画面闪到怀疑人生不设置SetMapModeY轴方向和数值对应关系又总对不上。这两个问题凑在一起就逼出了这套组合动态曲线、SetMapMode、双缓冲绘图。哪个顺序乱来都要吃亏。我把这几个技术点的原理和实现串起来讲清楚适合正在用VC6.0写工控上位机、做课程设计或者接手老项目的C开发者参考。1. 这套需求到底在解决什么问题1.1 动态曲线的典型场景动态曲线会出现在哪里最常见的是工控上位机串口、USB或者以太网采集到传感器数据需要在界面上实时画成波形比如温度、压力、电流还有实验室数据采集、设备标定工具、医疗仪器的一些显示界面。共同点有两个一是数据点持续追加二是界面不能因为刷新频繁而闪烁。我最早做这类功能是在一个串口调试工具里加实时波形显示每秒从设备收几十个点要求画一条滚动的曲线。第一个版本很天真直接在OnTimer里清屏、重画结果画面抖动非常严重满屏横纹用户看了直摇头。后来才明白动态曲线不是单纯“画线”的问题而是一个“显示管道”问题数据缓冲、坐标映射、无闪烁刷新每一步都得做对。这个需求适合谁看一类是MFC初学者做完了对话框、按钮、编辑框这些基础控件想进阶做自定义绘图另一类是接手老项目的工程师工程可能还是vc6.0时代的代码里到处是老的MFC类没法立刻迁移到Qt或者新版Visual Studio只能在原有框架内把动态曲线模块补上去。1.2 为什么偏偏是VC6.0 MFCVC6.0说新不新说老又没完全老。MFC从90年代末至今对话框、视图、文档这套体系变化并不大很多工控设备厂商提供的SDK示例仍然是VC6的工程文件。所以还选VC6.0不是因为技术先进是因为“兼容”两个字值钱。你和第三方设备通信厂商给个动态库示例是VC6写的用新版本VS去跑往往也能编译过但改起来就是别扭。与其折腾移植不如在老IDE里继续加功能。另外VC6.0下的调试习惯和现在不太一样内存检查、资源管理都必须靠自觉。这一点在双缓冲绘图里尤其明显VC6.0中的GDI对象比如位图、DC、画笔如果不及时释放进程的GDI句柄会一条一条涨上去最终整个界面都画不出来。这个坑我后文会反复提因为它太容易踩了。2. SetMapMode先学会摆正坐标系2.1 默认坐标系和需求之间的矛盾Windows默认映射模式是MM_TEXT原点在客户区左上角X轴向右Y轴向下。对普通文本、按钮、列表控件来说这不违和但画曲线时就不对劲了——我们习惯数值大的在上面数值小的在下面也就是Y轴向上。有人直接在MM_TEXT下用客户区高度减去数据值来算Y比如y clientHeight - (value - min) * scale也能出效果。可一旦窗口尺寸变化、数据范围变化这堆手写换算代码会越堆越多bug就藏不住了。SetMapMode就是用来做这层换算的。你告诉GDI你的逻辑坐标系长什么样它负责把逻辑坐标映射到设备坐标。这样写代码时直接面对数据坐标不用关心窗口拉伸、缩放、分辨率这些事情。2.2 MM_ANISOTROPIC的正确打开方式映射模式有好几种MM_ISOTROPIC强调X和Y等比例缩放适合圆形、地图这类要保持形状的场景MM_ANISOTROPIC允许X和Y独立缩放正好适合动态曲线——横轴是采样点数或时间纵轴是数值两者单位不同没必要强求等比例。核心是三个函数SetMapMode、SetWindowExt、SetViewportExt再加原点调整。我的写法如下CRect rcClient; GetClientRect(rcClient); // 逻辑坐标范围X:0~1000Y:0~200这就是你想要的曲线标尺 pDC-SetMapMode(MM_ANISOTROPIC); pDC-SetWindowExt(1000, -200); // 负号让Y轴向上 pDC-SetViewportExt(rcClient.Width(), rcClient.Height()); pDC-SetWindowOrg(0, 0); pDC-SetViewportOrg(0, rcClient.Height()); // 把逻辑原点放到左下角理解这段代码要抓住一个关键点SetWindowExt定义逻辑坐标范围SetViewportExt定义这个范围映射到多少设备像素。设备坐标原点默认在左上角所以想让逻辑原点(0,0)落在客户区左下角就把视口原点移动到(0, Height)。这样得到的坐标系就是x从左到右逐渐增大y从下到上逐渐增大和常规数学坐标一致。至于为什么用1000×200这不是固定的而是根据显示的数据范围设计。比如X方向要显示最近800个采样点可以把窗口X范围设成800Y方向要显示0到200摄氏度的温度范围就把窗口Y范围设成200。画点时直接按数据值给坐标缩放交给GDI这能省掉大量手动换算代码。2.3 关于原点设置的几个坑有朋友试过之后发现只设置SetWindowExt和SetViewportExt、不设置ViewportOrg曲线坐标系在左上角甚至一部分跑到屏幕外面。原因在于窗口原点和视口原点都默认为(0,0)逻辑(0,0)正好对齐设备(0,0)也就是左上角。如果再把Y方向取负逻辑Y0在顶部逻辑Y200却在底部整个坐标轴反的数据越大越往下。所以关键一步是把视口原点设到底部。但注意SetViewportOrg的参数是设备坐标不是逻辑坐标这里写(0, Height)就是客户区左下角。如果窗口尺寸在运行中变了GetClientRect要在OnPaint或自定义绘制函数里重新获取否则坐标映射会错位。我踩过这个坑把GetClientRect放在初始化代码里后来窗口被分割条拉大曲线只画在左上角一小块查了半天才发现是客户区尺寸没更新。还有如果在双缓冲的内存DC里也设置了同样的映射模式内存DC和屏幕DC的窗口范围、视口范围必须保持一致否则最后BitBlt时画面错位或比例不对。我后来把坐标设置封装成一个函数两处都调用省去很多麻烦。3. 双缓冲绘图根治闪烁的正路3.1 闪烁是怎么来的Windows窗口刷新过程可以简化成系统先发WM_ERASEBKGND让你擦背景再发WM_PAINT让你画前景。如果你在OnPaint里做简单绘制又在OnTimer里每隔50ms调用Invalidate窗口就会经历无数次“擦掉背景、重画曲线、再擦掉、再重画”的循环。人眼看到的就是整块区域不断在背景色和曲线之间跳变这就是闪烁。资料里常建议用Invalidate(FALSE)或者把WM_ERASEBKGND屏蔽掉这能减少背景闪烁但治标不治本。真正稳妥的方案是双缓冲先在内存里把整幅图画好再一次性地拷贝到屏幕上。这样屏幕上永远不出现半成品画面。3.2 标准双缓冲套路双缓冲核心是三个对象内存DC(CDC)、兼容位图(CBitmap)、贴图函数(BitBlt)。流程创建内存DC → 创建和客户区等大的位图 → 把位图选入内存DC → 在内存DC上绘制 → 用BitBlt把内存DC一次性拷到窗口DC → 清理位图和DC。代码骨架如下VC6.0的MFC工程里可以直接放到OnPaint里调用void CMyDialog::DrawWave(CDC* pDC) { CRect rc; GetClientRect(rc); CDC memDC; memDC.CreateCompatibleDC(pDC); CBitmap bmp; bmp.CreateCompatibleBitmap(pDC, rc.Width(), rc.Height()); CBitmap* pOldBmp memDC.SelectObject(bmp); // 在memDC上设置坐标系并绘制... DrawWaveToDC(memDC); pDC-BitBlt(0, 0, rc.Width(), rc.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); bmp.DeleteObject(); memDC.DeleteDC(); }注意CreateCompatibleDC和CreateCompatibleBitmap的兼容对象是当前窗口DC。如果你在OnPaint里用的是CPaintDC直接把CPaintDC指针传进来即可。整个绘制过程发生在memDC上屏幕DC只在最后BitBlt那一刻被触碰。另外双缓冲绘制时还要在OnEraseBkgnd里返回TRUE不然系统在WM_PAINT前仍会擦一遍背景哪怕有内存DC背景白闪依然存在。消息映射里加一句ON_WM_ERASEBKGND()函数实现直接return TRUE就行。3.3 VC6.0下容易忽略的细节第一个坑位图没选回去就DeleteObject。MFC的CBitmap对象析构时会删除它持有的GDI位图但如果位图还选中在内存DC里就调用DeleteObject虽然不一定立刻崩但会产生GDI对象泄漏。正确做法是先SelectObject(pOldBmp)把旧位图选回去再DeleteObject。第二个坑内存DC创建失败没有判断。平时写代码容易顺手忽略返回值但在工控机上显卡驱动比较杂CreateCompatibleDC偶尔会失败后续绘制全部白费甚至崩溃。稳妥做法是每次创建后判断一下失败就直接return。第三个坑窗口尺寸变化时双缓冲位图大小要跟着变。如果在每次绘制时都CreateCompatibleBitmap那没这个问题但如果你把位图缓存成成员变量尺寸变化时必须DeleteObject重新创建否则拉大窗口后超过旧位图尺寸的区域不会刷新出现残影。4. 动态曲线完整实现流程4.1 数据缓冲与定时刷新动态曲线的数据源有两种常见模式一是外部事件驱动比如串口收到数据后调用接口塞进一个新点二是通过定时器轮询。这里用定时器轮询演示数据源用模拟函数代替方便再现在VC6.0里跑通。数据缓冲最简单的做法是“固定大小浮点数组 位移操作”#define MAX_POINTS 800 float g_fData[MAX_POINTS]; int g_nDataCount 0; void AppendData(float fValue) { if (g_nDataCount MAX_POINTS) { memmove(g_fData, g_fData 1, (MAX_POINTS - 1) * sizeof(float)); g_nDataCount MAX_POINTS - 1; } g_fData[g_nDataCount] fValue; }为什么要用固定数组VC6.0下vector完全能用但曲线这种固定容量、只显示最近N个点、先进先出的场景定长数组更直观内存管理也更省心。800个float的memmove成本几乎可以忽略完全撑得住50ms刷新。定时器在对话框初始化里设置SetTimer(1, 50, NULL); void CMyDialog::OnTimer(UINT_PTR nIDEvent) { if (nIDEvent 1) { static float fVal 0.0f; fVal 0.5f; // 模拟数据正弦波基础上偏移保证值落在20~180之间 AppendData((float)(sin(fVal / 10.0) * 80.0 100.0)); Invalidate(FALSE); // 关键FALSE不擦背景 } CDialog::OnTimer(nIDEvent); }Invalidate(FALSE)在这里很重要。虽然双缓冲能兜底但用默认TRUE的话每次刷新会触发WM_ERASEBKGND多出无效调用。直接用FALSE最清爽。4.2 内存DC里的完整绘图序列下面给DrawWaveToDC的完整实现。做的事是设置逻辑坐标、画背景和网格、画曲线再贴到屏幕。因为前面已经解决了映射和闪烁问题剩下的就是把数据点连接起来。void CMyDialog::DrawWaveToDC(CDC* pDC) { CRect rc; GetClientRect(rc); pDC-SetMapMode(MM_ANISOTROPIC); pDC-SetWindowExt(1000, -200); pDC-SetViewportExt(rc.Width(), rc.Height()); pDC-SetWindowOrg(0, 0); pDC-SetViewportOrg(0, rc.Height()); // 背景 pDC-FillSolidRect(0, 0, 1000, 200, RGB(15, 20, 30)); // 网格线 CPen penGrid(PS_SOLID, 1, RGB(50, 60, 70)); CPen* pOldPen pDC-SelectObject(penGrid); for (int y 0; y 200; y 20) { pDC-MoveTo(0, y); pDC-LineTo(1000, y); } for (int x 0; x 1000; x 100) { pDC-MoveTo(x, 0); pDC-LineTo(x, 200); } // 曲线 if (g_nDataCount 1) { CPen penWave(PS_SOLID, 2, RGB(0, 230, 180)); pDC-SelectObject(penWave); float fStepX 1000.0f / MAX_POINTS; pDC-MoveTo(0, (int)g_fData[0]); for (int i 1; i g_nDataCount; i) { int x (int)(i * fStepX); int y (int)g_fData[i]; if (y 0) y 0; if (y 200) y 200; pDC-LineTo(x, y); } pDC-SelectObject(pOldPen); } // 文字标注见4.3 }这里把窗口逻辑范围固定成X[0,1000]、Y[0,200]意思是只显示横轴最近1000个单位、纵轴0到200的数据值。AppendData里模拟的数据经过sin偏移基本落在20到180之间视觉上稳居中。如果实际数据范围超过0~200就需要动态调整SetWindowExt里的Y范围或者先对数据做归一化否则曲线会被截断。填背景时要注意FillSolidRect的四个参数是逻辑坐标不是设备坐标所以背景用(0,0,1000,200)刚好覆盖整个逻辑范围。这里千万别因为坐标原点在左下角就把Y起始写成负数这是新手最容易搞混的地方。4.3 文字倒置问题的土办法使用Y轴向上的逻辑坐标有一个副作用在这个坐标系里TextOut的文字是上下颠倒的。因为GDI输出文字时也遵循映射模式它把逻辑坐标的“上”当成设备坐标的“上”结果逻辑上的“上”在屏幕上实际是“下”。我采用的土办法是在双缓冲的memDC上画完曲线和网格以后先保存DC状态再临时切回MM_TEXT在设备坐标下输出文字最后恢复原映射模式。// 确定文字要放的位置设备坐标 CString strTitle _T(实时温度曲线); CString strUnit _T(单位: C); CPoint ptTitle(20, 12); // 左上角 CPoint ptUnit(20, 32); UINT nSaved pDC-SaveDC(); pDC-SetMapMode(MM_TEXT); pDC-SetBkMode(TRANSPARENT); pDC-SetTextColor(RGB(240, 240, 240)); CFont font; font.CreatePointFont(120, _T(Arial)); CFont* pOldFont pDC-SelectObject(font); pDC-TextOut(ptTitle.x, ptTitle.y, strTitle); pDC-TextOut(ptUnit.x, ptUnit.y, strUnit); pDC-SelectObject(pOldFont); font.DeleteObject(); pDC-RestoreDC(nSaved);为什么要提前算好设备坐标因为在MM_ANISOTROPIC模式下没法随便指定几个逻辑坐标让GDI去画文字而不翻转切回MM_TEXT后坐标系回到“左上为原点、Y向下”只能用设备坐标定位。既然已经想清楚文字放在哪直接按设备坐标写就行。SaveDC/RestoreDC会把映射模式、字体、画刷、文本颜色全部保存并恢复不影响下一帧曲线的绘制。这个办法不优雅但在VC6.0老工程里很稳定实测没有坑。也可以创建lfEscapement1800的字体来抵消翻转但字体一多维护成本就高不推荐。5. 常见问题与调试经验速查5.1 问题现象与原因对照下面这份速查表基本覆盖了动态曲线里能遇到的常见问题。现象可能原因处理办法曲线区域闪得厉害没做双缓冲或OnEraseBkgnd没有返回TRUE内存DC BitBlt消息映射加ON_WM_ERASEBKGND并return TRUE曲线上下颠倒数值大反而画在下边窗口范围/视口原点设置不对SetWindowExt第二个参数用负值并把ViewportOrg设置到(0,Height)文字上下颠倒逻辑Y轴向上导致文本翻转文字绘制临时切回MM_TEXT按设备坐标输出再RestoreDCBitBlt贴出来是空白位图创建失败或尺寸不匹配判断CreateCompatibleBitmap返回值确认宽度高度等于客户区改变窗口大小时出现残影双缓冲位图尺寸没跟着窗口变化每次绘制按当前GetClientRect创建位图不要缓存固定大小GDI对象持续上涨位图或DC没释放选中状态未还原先SelectObject旧位图再DeleteObject最后DeleteDC刷新速度一高CPU占用爆表Invalidate太频繁降低定时器频率到50~100ms或只重绘曲线变化区域5.2 几个值得记住的调试技巧第一坐标映射一定封装成函数不要在OnTimer、OnPaint各写一遍否则排查问题要改两处。我甚至会在程序里加一个临时开关按空格键时把SetMapMode换成MM_TEXT用来快速判断是坐标系问题还是绘图逻辑问题这个土招非常管用。第二调试闪烁时先把定时器频率降低到200ms一帧。如果200ms还闪那一定是背景擦除或双缓冲没生效如果200ms不闪、50ms闪那就是绘制时间太长要检查OnPaint里有没有耗时操作比如每帧创建字体、加载资源、循环里做浮点转字符串。第三VC6.0调试工具虽然简陋但任务管理器里的GDI对象计数可以直观看到句柄泄漏。画完曲线后盯着这个数字如果每秒涨几个就是位图或DC没释放。这类问题往往发生在自定义控件的WM_PAINT路径里比如每次都CreateFont却忘了DeleteObject改成成员变量或静态字体句柄数立刻就稳了。第四如果以后想把曲线窗口扩展成自定义控件可以做成继承CStatic或CWnd的子类把SetTimer、AppendData、绘制全部封装进去。热词里常提到的MFC自定义按钮、MFC列表控件增强、MFC项目打包其实都建立在同一个基础上理解消息循环、设备上下文和GDI生命周期。曲线窗口只是这个基础上稍微进阶的一小块。根据我个人的实际操作体会动态曲线、SetMapMode、双缓冲这三样拆开看都不难但组合在一起时坑是一个挨着一个。每次踩坑之后我都从坐标映射、设备上下文状态、GDI资源生命周期三个角度去排查基本都能很快定位。现在我再写这类界面哪怕换到新一点的开发环境也保持同样的习惯先画内存DC再贴屏幕先定坐标系再写绘制先检查资源释放再谈性能优化。这套思路远比记住某一段代码更重要。本文还有配套的精品资源点击获取