简介：在MFC数据采集类软件开发中，常需将实时数据绘制为曲线，而MFC自带控件难以胜任。本示例基于第三方ChartCtrl控件封装了一套高速二维曲线显示方案，使用VC2017编译通过，适合有MFC基础的开发者直接借鉴。工程内共77个文件，以38个h头文件与27个cpp实现文件为主体，另有少量inl模板、工程配置及界面资源，压缩包仅245KB，便于快速下载分析与复用。资源完整包含ChartCtrlDemo示例工程，演示控件自适应填满绘图区、静止状态下拉框放大局部曲线等核心交互；同时针对旧版stdafx.h在VC2017下的兼容问题，给出取消预编译头、配置Custom Control样式为0x52010000等关键处理，帮助读者规避常见编译与显示坑点；工程附带解决方案文件，可一键编译运行，方便对照调试。已有1656人学习下载，适合需要快速接入曲线展示功能的MFC开发者作为参考模板。

1. 这到底是怎样一个曲线控件：面向实时数据流的高速绘制方案

写MFC上位机程序时，最绕不开的需求就是把串口、网络或传感器数据实时画成曲线。很多人直接在OnDraw里画折线，数据一多就开始闪屏、CPU飙升，最后曲线糊成一团。这套MFC高速二维曲线控件示例程序，就是为这个场景准备的：一个自绘曲线控件，VC2017编译通过，工程结构干净，打开就能跑。核心亮点是把双缓冲、脏标记刷新、环形缓冲和坐标变换整合在一起，让曲线刷新又快又稳。正在写调试工具、仪表盘、数据采集上位机的人，或者刚学MFC自定义控件绘制的朋友，都能拿它当起点。

2. 项目结构与架构设计：一个控件类如何撑起整套实时绘制

整套程序不是个臃肿系统，而是“一个自绘控件 + 一个演示宿主”的小而完整组合。控件本身不依赖演示界面，任何对话框或者CWnd窗口里都能复用。下面先把文件构成和两个关键设计决定讲清楚。

2.1 文件构成与职责划分

工程里的文件不多，核心就两对：控件类和对话框类。

这种分层的价值在于：曲线控件的所有逻辑都封装在CCurveCtrl类里，演示对话框只是调用方。以后换项目，把CurveCtrl.h和CurveCtrl.cpp两个文件复制过去，再在目标窗口里创建控件实例就行，不用带着对话框一起搬。这也是MFC自定义控件比直接把绘制代码写进对话框要舒服的地方，业务界面和绘图逻辑彻底分开。

2.2 双缓冲：用内存DC换掉可见闪烁

如果直接在窗口DC上画曲线，数据一多就会闪。原因是每次重绘时，系统先在背景上擦一块白，再画网格和折线，人眼看到的就是“先白后线”的闪烁。这套控件把绘制分成了两步：先在内存DC上完整画出整帧画面，再一次性BitBlt到窗口。内存DC就是一块虚拟画布，画的过程不显示在屏幕上，所以屏幕只看到最终结果。

这里有个很多人忽略的小细节：如果OnEraseBkgnd不处理，系统默认会在重绘前擦除背景，双缓冲的效果直接打对折。控件里的做法是让系统跳过擦背景这步：

BOOL CCurveCtrl::OnEraseBkgnd(CDC* /*pDC*/) { return TRUE; // 禁止系统擦除背景，配合双缓冲防止闪白 }

这个函数返回TRUE后，WM_ERASEBKGND消息就不会去刷客户区。配合OnPaint里的内存DC，重绘过程就完全由控件自己控制，不会出现中间态的空白。通常把Invalidate(FALSE)和OnEraseBkgnd返回TRUE配对使用，两个条件缺一个，闪烁问题都压不住。

2.3 数据流与刷新模型：生产者加脏标记

这套控件的数据流是一条清晰的单向链路：外部程序调用AppendData追加数据，写入环形缓冲后只置一个脏标记；控件内部的定时器检查脏标记和刷新间隔，到点才触发窗口重绘；OnPaint从环形缓冲取出可见区数据，做坐标变换，画折线，最后BitBlt输出。核心代码如下：

void CCurveCtrl::AppendData(double value) { // 写入环形缓冲的代码在此省略 m_dirty = true; // 只做标记，不立即重绘 }

很多初学MFC的开发者会把AppendData和Invalidate直接绑在一起，加一个数据重绘一次。这在数据量小的时候没问题，一旦数据源以每秒几千点的速度推送，消息队列里全是重绘消息，CPU占用率直接拉满，画面反而更卡。这套控件用脏标记把“数据到达”和“窗口刷新”解耦，无论数据进来多快，界面都按照固定节拍重绘。

3. 核心代码拆解：从AppendData到窗口重绘的完整链路

理解了这个控件，关键是看四条代码链：数据怎么存、数据怎么转成屏幕坐标、绘制函数怎么画、定时器怎么控制刷新节奏。这一章按这个顺序逐个拆。

3.1 环形缓冲：固定内存下的数据管理

实时采集的数据会无限增长，如果用一个不断变长的数组存，内存占用会一直涨，取数时还要从头遍历一遍。控件里的做法是预分配一块固定容量的缓冲区，写满后新数据覆盖最旧数据，永远只保留最近N个点。这样内存占用恒定，绘制时也只用扫描这一个固定窗口。

void CCurveCtrl::AppendData(double value) { if (m_count < m_capacity) { // 缓冲未满：写入当前尾部的位置，头指针不动 m_data[(m_head + m_count) % m_capacity] = value; m_count++; } else { // 缓冲已满：覆盖最旧数据，头指针后移 m_data[m_head] = value; m_head = (m_head + 1) % m_capacity; } m_dirty = true; }

参数说明：m_data是std::vector ，构造时resize成m_capacity大小；m_capacity一般设为可见点数的2到4倍，给历史数据留余量；m_head指向当前最旧数据的物理下标；m_count是有效数据个数。取模运算保证下标始终落在[0, m_capacity)之间循环移动。缓冲未满时是尾部追加，写满后是覆盖头部并把head向后推一位，形成环形结构。读者注意一个细节：m_data[(m_head + m_count) % m_capacity]在未满时定位的是“第一个空位”，而不是被覆盖的数据。

取数时同样用取模定位：

int CCurveCtrl::GetVisibleData(double* outBuf, int startIndex, int count) const { count = min(count, m_count - startIndex); for (int i = 0; i < count; i++) { outBuf[i] = m_data[(m_head + startIndex + i) % m_capacity]; } return count; }

调用方传入目标数组、起始偏移和期望点数，函数返回实际取到的点数。startIndex是相对m_head的偏移量，这样做的好处是滚动窗口时只需要改startIndex，不用搬动缓冲区里的数据。

3.2 坐标变换：数据值到屏幕像素的映射

曲线控件的核心任务是把“第几个数据点、值是多少”映射成“屏幕上哪个像素”。这里有个Windows绘图的老坑：客户区坐标系Y轴向下，如果不做处理，值越大反而画得越靠下。

POINT CCurveCtrl::ValueToScreen(int index, double value) const { CRect rc; GetClientRect(&rc); double plotW = rc.Width() - m_marginLeft - m_marginRight; double plotH = rc.Height() - m_marginTop - m_marginBottom; double x = m_marginLeft + index * plotW / (m_visiblePoints - 1); double y = m_marginTop + (m_maxY - value) * plotH / (m_maxY - m_minY); POINT pt; pt.x = (LONG)(x + 0.5); pt.y = (LONG)(y + 0.5); return pt; }

x方向是线性插值，index从0到m_visiblePoints-1均匀分布在绘图区宽度上。y方向做了翻转：m_maxY对应顶部，m_minY对应底部。之所以用(m_maxY - value)而不是(value - m_minY)，正是因为要把数据坐标轴翻转成和屏幕坐标相反的方向。m_marginLeft、m_marginRight这几个边距次是给坐标轴刻度和文字标签留的位置，画网格时也用同一套边距，保证曲线和刻度对齐。浮点转整数时加上0.5做四舍五入，避免像素坐标在整数边界抖动。

3.3 OnPaint绘制：网格、坐标轴与折线一次成型

OnPaint是整条链路的出口，负责把缓冲里的数据画到屏幕上。绘制在内存DC完成，最后一次性提交：

void CCurveCtrl::OnPaint() { CPaintDC dc(this); CRect rc; GetClientRect(&rc); CDC memDC; memDC.CreateCompatibleDC(&dc); CBitmap bmp; bmp.CreateCompatibleBitmap(&dc, rc.Width(), rc.Height()); CBitmap* pOldBmp = memDC.SelectObject(&bmp); DrawBackground(&memDC, rc); // 填充背景色 DrawGrid(&memDC, rc); // 画水平和垂直网格线 DrawAxis(&memDC, rc); // 画坐标轴刻度和标签 std::vector<double> values(m_visiblePoints); int n = GetVisibleData(values.data(), m_startIndex, m_visiblePoints); std::vector<POINT> pts(m_visiblePoints); for (int i = 0; i < n; i++) { pts[i] = ValueToScreen(i, values[i]); } CPen pen(PS_SOLID, 1, m_lineColor); CPen* pOldPen = memDC.SelectObject(&pen); if (n > 1) { memDC.Polyline(pts.data(), n); } memDC.SelectObject(pOldPen); dc.BitBlt(0, 0, rc.Width(), rc.Height(), &memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); }

逻辑说明：DrawBackground、DrawGrid、DrawAxis是三个私有辅助函数，分别负责背景填充、网格线和坐标轴，拆开写是为了在二次开发时能单独改某一块，比如把网格改成虚线，或者把坐标轴标签换成时间字符串。曲线部分先把可见区数据取出来转成POINT数组，再调用一次Polyline完成整条折线绘制。

这个Polyline是整个控件“高速”的关键之一。新手常见写法是for循环里反复调用LineTo画折线，每个顶点都是一次GDI调用，几千个点就是几千次调用；Polyline一次把所有顶点交给GDI批量处理，调用开销直接降一个数量级。另外，CPen用栈对象声明而不是new，函数退出时自动析构，避免GDI句柄泄漏。

3.4 定时刷新：脏标记与最小间隔缺一不可

刷新节拍由一个定时器驱动，但定时器不是每跳都重绘，而是两个条件同时满足才画：有数据、且距离上一次绘制超过设定的最小间隔。

void CCurveCtrl::OnTimer(UINT_PTR nIDEvent) { if (nIDEvent == kRefreshTimerId) { DWORD now = GetTickCount(); if (m_dirty && (now - m_lastPaintTime >= (DWORD)m_refreshIntervalMs)) { m_dirty = false; m_lastPaintTime = now; Invalidate(FALSE); // FALSE不擦背景，配合双缓冲避免闪烁 } } CWnd::OnTimer(nIDEvent); }

参数说明：m_refreshIntervalMs默认33毫秒，对应约30FPS的刷新率，人眼看起来已经足够平滑，CPU占用也压得住。m_dirty保证没有新数据时不触发无意义重绘；时间戳保证即使数据每秒进来一万次，界面刷新频率依然稳定。Invalidate(FALSE)配上前文OnEraseBkgnd返回TRUE，才算完整的无闪烁重绘链路。

4. 编译与运行：在VC2017下从打开工程到看到曲线

拿到压缩包后，按下面步骤操作，几分钟内就能看到滚动曲线。

4.1 环境检查：MFC组件与平台工具集

工程默认用VS2017的v141工具集编译。安装VS2017时，需要勾选“使用C++的桌面开发”工作负载，并确认MFC相关组件已经装上。如果机器上装的是VS2019或VS2022，打开工程时如果提示升级工程，选择保持当前工具集，或者允许它使用v141工具集，都能编译通过。工程默认使用Unicode字符集，这个设置不要改成多字节，否则字符串相关的资源加载容易出问题。

4.2 从打开工程到看到曲线

接下来按顺序走五步：

1. 解压后找到CurveCtrlDemo.sln，双击用VS2017打开。
2. 在解决方案配置里选择Release和x64，也可以选Win32，控件代码不依赖平台位数，两种都能跑。
3. 按Ctrl+Shift+B生成解决方案，编译产物在x64或Win32目录下的Release文件夹里。
4. 按Ctrl+F5直接运行，不调试启动。
5. 对话框出现后，点击“开始模拟数据”按钮，正弦波曲线开始滚动；拖动窗口边缘改变大小，曲线会跟着重排。

注意第1步如果源代码目录带中文路径，偶尔会遇到资源编译问题，建议把工程放到纯英文目录下。

4.3 常用参数调整：把曲线调成你想要的样子

控件对外暴露的接口不多，但覆盖了最常用的调节项：

这些接口都在对话框OnInitDialog里调用。调整SetRefreshInterval时有个经验：设到16毫秒以下是浪费。WM_TIMER本来就不是高精度定时器，消息循环的调度开销在毫秒级，再短的间隔只会让消息堆积，CPU占用升高，画面帧率却提不上去。

4.4 接入真实数据源：串口、网络或采集卡

演示程序里模拟数据是在对话框定时器里调AppendData。接入真实设备时，数据通常来自后台线程，比如串口接收线程、网络回调或者采集卡中断。最稳妥的方式是把数据投递到UI线程：

// 后台线程：串口/网络读到一帧数据后投递到UI线程 PostMessage(WM_APPEND_DATA, 0, (LPARAM)valueBits);

然后在对话框的WM_APPEND_DATA消息处理函数里调用AppendData。为什么不建议后台线程直接调AppendData？因为控件内部的m_data、m_head、m_count没有加锁，UI线程的OnPaint可能正在读这些数据，后台线程同时写，就会读到撕裂的数据，曲线上出现莫名其妙的毛刺。PostMessage把数据放进UI线程的消息队列，写入和绘制串行执行，天然避免竞争。如果追求极致性能，也可以在AppendData里加临界区，但绘制线程在锁等待上会消耗时间，通常不优先考虑。

5. 避坑与排查：GDI泄漏、闪烁、坐标翻转与控件灰块

这些坑是MFC自绘控件里最常遇到的，按现象对号入座就行。

5.1 GDI对象只增不减，画面越跑越花

现象：程序跑几分钟后，任务管理器里GDI对象数量一直往上爬，画面开始缺线、变色，最后整块区域变灰。原因：OnPaint里用new创建了画笔、画刷或字体，但没有调用DeleteObject。MFC的CPen、CBrush等GDI包装类，用new创建的实例必须显式删除，否则句柄泄漏。解决：全部改用栈对象，函数退出自动析构：

CPen pen(PS_SOLID, 1, m_lineColor); CPen* pOldPen = memDC.SelectObject(&pen); // 绘制代码 memDC.SelectObject(pOldPen); // 恢复旧画笔后，pen析构时自动删除GDI对象

排查方法：任务管理器里打开“详细信息”页，右键列头勾选“GDI对象”，运行前记一个基数，跑几分钟再对比。曲线工程的GDI对象数量应该稳定不动，如果持续上涨，基本可以断定绘制路径上有对象没释放。

5.2 一刷新就闪白，双缓冲形同虚设

现象：曲线每次重绘都先闪一下白，拖动窗口时闪烁更明显。原因：Invalidate默认参数是TRUE，会触发WM_ERASEBKGND擦除背景；或者OnPaint里直接画在了窗口DC上，没有经过内存DC。解决：双缓冲只是基础，还必须关掉系统擦背景：

BOOL CCurveCtrl::OnEraseBkgnd(CDC* /*pDC*/) { return TRUE; // 跳过背景擦除 } // 刷新时统一用 FALSE Invalidate(FALSE);

两个条件缺一不可：不返回TRUE，系统会抢在OnPaint之前把背景刷成白色；不用FALSE重绘，消息循环里还是会有一轮背景擦除。这个组合是MFC无闪烁绘制的标准解法。

5.3 波形上下颠倒，Y轴方向搞反

现象：值越大画得越靠下，正弦波看起来是镜像的。原因：Windows客户区坐标Y轴向下，直接把数据值当作y坐标，等于把数学坐标的Y轴翻转了。解决：映射时做一次翻转：

double y = m_marginTop + (m_maxY - value) * plotH / (m_maxY - m_minY);

这里的思路是：value越接近m_maxY，y越接近m_marginTop，也就是屏幕上方。还有个连带问题：坐标轴刻度文字也得跟着翻转，最大值标在顶部、最小值标在底部，否则波形方向和数字对不上，看起来会很别扭。

5.4 自定义控件区域是一块灰块

现象：对话框里放了一个Custom Control，运行时这个区域是纯灰矩形，曲线完全不出来。原因：对话框资源里Custom Control的Class名填成了CurveCtrl，但程序里没有注册这个窗口类，对话框创建子窗口时找不到类，就留下一个默认灰块。解决：在控件类里注册窗口类，然后在对话框初始化里子类化关联：

// 控件类初始化时注册窗口类 GetRuntimeClass()->m_wndClass = AfxRegisterWndClass( CS_HREDRAW | CS_VREDRAW, ::LoadCursor(nullptr, IDC_ARROW)); // 对话框 OnInitDialog 里关联 m_curveCtrl.SubclassDlgItem(IDC_CURVE_CTRL, this);

注意AfxRegisterWndClass不要注册两次，注册前先判断类名是否已存在。如果不想用Custom Control，也可以动态Create生成控件，但Custom Control加SubclassDlgItem更贴近MFC控件复用的习惯。

6. 二次开发：给曲线加游标读数，再叠加一条曲线

拿到控件后，最容易上手的第一步是加鼠标交互。以下代码实现鼠标悬停时把屏幕坐标反算成数据坐标，为后续加游标、加选中框打基础。

6.1 鼠标悬停显示读数：屏幕像素反算数据值

void CCurveCtrl::OnMouseMove(UINT nFlags, CPoint point) { if (m_bShowCursor) { CRect rc; GetClientRect(&rc); double plotW = rc.Width() - m_marginLeft - m_marginRight; double plotH = rc.Height() - m_marginTop - m_marginBottom; double ratioX = (double)(point.x - m_marginLeft) / plotW; double ratioY = (double)(point.y - m_marginTop) / plotH; m_cursorIndex = (int)(ratioX * (m_visiblePoints - 1) + 0.5); m_cursorValue = m_maxY - ratioY * (m_maxY - m_minY); m_cursorIndex = max(0, min(m_visiblePoints - 1, m_cursorIndex)); Invalidate(FALSE); } CWnd::OnMouseMove(nFlags, point); }

这段代码是ValueToScreen的逆运算：先把鼠标位置换算成在绘图区内的比例，再分别映射到数据序号和数据值。m_cursorIndex和m_cursorValue两个成员准备好后，在OnPaint里加一段DrawCursor就能画出十字线和悬浮文本框。注意最后的钳制处理，鼠标滑出绘图区时，读数不会飞到范围之外。

6.2 多曲线叠加与下一步改造

数据结构和绘制函数这个设计可以直接扩展。比如改成维护两组数据缓冲，在OnPaint里循环调用一个统一的DrawSeries方法，每条曲线各自带颜色和Y轴范围。再往后可以加游标差值、把显示窗口改成可拖动的历史回看、或者把刷新循环从WM_TIMER换成专用绘制线程。每一处改造都从数据存取和坐标变换这两个基座出发，控件骨架不用动。

做这套改造时我有个习惯：每次动完绘制代码，先挂任务管理器看一轮GDI对象数量，再拖动窗口检查一遍闪烁，然后挂一晚上长时运行确认内存不涨。从那以后每次给控件加功能，我都强制走完这三步再交出去。希望帮到你。

本文还有配套的精品资源，点击获取