简介面向数据采集与工业监控场景的MFC开发者这份资源提供了一套可直接编译运行的二维曲线控件示例工程用于解决MFC原生缺乏易用曲线显示控件的问题。工程基于ChartCtrl控件封装支持曲线自适应填满绘图区、静止状态下拉框放大局部曲线等实用交互并演示了以Custom Control为载体、设置style属性0x52010000的接入方式对理解WS_CLIPCHILDREN等窗口样式也有参考价值。压缩包共77个文件以38个h头文件、27个cpp源文件为主辅以inl内联实现、vcxproj工程文件、rc资源脚本与sln解决方案整体约245KB结构完整便于逐模块研读。该示例已有1659人学习下载VC2017下编译仅有少量历史遗留警告不影响使用适合需要快速回忆控件用法或搭建曲线显示原型的中级开发者参考。1. 一个能跑起来的 MFC 二维曲线控件解决工控界面里最烦的那块屏做过上位机的人都懂数据采集卡一开串口一收界面上最难看的就是那条曲线——用Polyline硬画几千个点下去直接卡成幻灯片想加个缩放、游标、网格代码量翻三倍。这个示例程序就是冲着这个场景来的一个基于 MFC 的高速二维曲线控件VC2017 编译通过拿到手就能往自己的对话框工程里塞。它适合两类人一类是刚接手工控上位机、需要快速把实时数据画出来的新手另一类是嫌现有图表库太重、想自己掌控绘制链路的熟手。下面按「能干什么、怎么跑、怎么改」的顺序拆。2. 工程结构与绘制链路从对话框到像素的完整路径2.1 目录里都有什么拿到压缩包解压后工程是标准的 MFC 对话框应用骨架没有引入任何第三方图表库所有绘制逻辑都收在控件类里。常见做法是这样一个结构CurveDemo/ ├── CurveDemo.sln // VC2017 解决方案 ├── CurveDemo/ │ ├── CurveDemo.vcxproj // 工程文件字符集/平台工具集在这里 │ ├── CurveDemo.cpp/.h // CWinApp 派生类程序入口 │ ├── CurveDemoDlg.cpp/.h // 主对话框控件宿主 │ ├── CurveCtrl.cpp/.h // 曲线控件核心绘制与数据管理 │ ├── CurveDemo.rc // 资源脚本对话框布局 │ └── resource.h // 控件 ID 定义 └── res/ // 图标等资源关键就两个文件CurveDemoDlg负责把控件摆到对话框上、喂数据CurveCtrl负责坐标变换、双缓冲绘制、鼠标交互。这种拆法好处是控件可以整块拷到别的工程只依赖 MFC 基础库不拖泥带水。2.2 控件是怎么嵌进对话框的MFC 里自绘控件有两种常见挂法一是从CStatic派生在对话框上放一个 Static 控件、改它的类二是从CWnd派生运行时Create出来。这个示例走的是前者因为资源编辑器里能直接拖位置、调大小改布局不用动代码。// CurveDemoDlg.cpp 中 OnInitDialog 的典型写法 BOOL CCurveDemoDlg::OnInitDialog() { CDialogEx::OnInitDialog(); // 把资源里的占位 Static 控件替换成曲线控件 m_curve.SubclassDlgItem(IDC_CURVE_PLACEHOLDER, this); // 初始化坐标轴范围X 轴 0~1000 点Y 轴 -50~50 m_curve.SetAxisRange(0, 1000, -50, 50); // 设置网格密度10 条竖线、8 条横线 m_curve.SetGrid(10, 8); // 开启双缓冲避免闪烁 m_curve.EnableDoubleBuffer(TRUE); SetTimer(1, 20, nullptr); // 20ms 刷新一次约 50fps return TRUE; }SubclassDlgItem的作用是把已经创建好的窗口句柄绑定到 C 对象上这样资源里的控件 ID 和类实例就对上了。SetAxisRange的四个参数分别是 X 最小值、X 最大值、Y 最小值、Y 最大值后面所有数据点都按这个范围映射到客户区像素。SetTimer的 20ms 是刷新节奏实际项目里要按数据源频率调太快会白耗 CPU太慢曲线会跳。2.3 双缓冲绘制的核心链路曲线控件卡顿的根源是直接在屏幕 DC 上逐点画每次重绘都闪。这个示例用的是内存 DC 双缓冲流程是建兼容位图 → 画到内存 DC → 一次性BitBlt到屏幕。核心代码大致长这样void CCurveCtrl::OnPaint() { CPaintDC dc(this); CRect rc; GetClientRect(rc); // 1. 建内存 DC 和兼容位图 CDC memDC; memDC.CreateCompatibleDC(dc); CBitmap bmp; bmp.CreateCompatibleBitmap(dc, rc.Width(), rc.Height()); CBitmap* pOld memDC.SelectObject(bmp); // 2. 背景填充 memDC.FillSolidRect(rc, RGB(255, 255, 255)); // 3. 画网格、坐标轴、曲线 DrawGrid(memDC, rc); DrawAxis(memDC, rc); DrawCurve(memDC, rc); // 4. 一次性贴到屏幕 dc.BitBlt(0, 0, rc.Width(), rc.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOld); }CreateCompatibleBitmap用的是屏幕 DC 的格式保证贴图时不失真。SelectObject之后一定要在退出前选回旧对象否则位图句柄泄漏跑久了内存一直涨——这是 MFC 绘图最常见的翻车点。DrawCurve里做的是数据点到像素的线性映射X 方向按点数均分Y 方向按(value - yMin) / (yMax - yMin) * height换算再MoveTo/LineTo连成折线。2.4 数据怎么喂进来控件对外暴露的接口一般是一个追加点的方法内部用std::vectorCPoint或环形缓冲存数据。示例里用的是固定长度数组加写指针避免频繁扩容// 追加一个数据点超出容量时覆盖最旧的点 void CCurveCtrl::AppendPoint(double x, double y) { m_points[m_writeIndex].x x; m_points[m_writeIndex].y y; m_writeIndex (m_writeIndex 1) % MAX_POINTS; if (m_count MAX_POINTS) m_count; // 只请求重绘不在这里直接画交给 OnPaint 统一处理 Invalidate(FALSE); }Invalidate(FALSE)的FALSE表示不擦背景配合双缓冲才不会闪。如果写成TRUE每帧先刷白再画肉眼能看到抖动。MAX_POINTS决定曲线能保留多少个历史点工控场景一般几千到一万再多就得考虑抽稀或者分段渲染。3. 编译运行与参数调优让示例变成你自己的曲线3.1 用 VC2017 打开并编译工程是 VC2017 建的平台工具集对应v141。用更高版本 VS 打开时VS 会提示升级工具集直接点确定一般能编过但要注意两点字符集和 MFC 库。工程属性里「字符集」通常是 Unicode「MFC 的使用」要选「在共享 DLL 中使用 MFC」或「在静态库中使用 MFC」选错会报一堆LNK2019找不到CWnd符号。# 命令行编译在 VS 开发者命令提示符下 msbuild CurveDemo.sln /p:ConfigurationRelease /p:Platformx64ConfigurationRelease比 Debug 快很多曲线刷新率差别明显Platformx64要和你的数据源位数一致串口库如果是 32 位的就得编 Win32。编译产物在x64/Release/下双击 exe 就能看到对话框和一条静态曲线。3.2 关键参数对照表调曲线效果基本就是调这几个参数改之前先看清楚含义参数位置作用常用取值X/Y 轴范围SetAxisRange数据映射的基准区间按传感器量程定网格密度SetGrid横竖参考线数量8~12刷新周期SetTimer重绘频率20~50ms缓冲点数MAX_POINTS历史数据保留量2000~10000线宽/颜色CPen构造曲线视觉样式1~2px深色刷新周期和缓冲点数是联动的周期 20ms、缓冲 10000 点意味着屏幕上最多显示 200 秒的数据超出后旧点被覆盖曲线看起来像在左移。如果想让曲线「滚动」而不是「覆盖」就得在DrawCurve里按写指针做偏移映射这是二次开发里最常改的一处。3.3 接真实数据源示例里通常用一个定时器造模拟数据实际项目要把AppendPoint挂到串口回调或采集线程里。注意 MFC 控件不是线程安全的采集线程不能直接调Invalidate常见做法是线程里只往缓冲区写用PostMessage通知 UI 线程重绘// 采集线程中只写数据不碰界面 void CCollectThread::Run() { while (m_running) { double val ReadSensor(); m_pCtrl-PushData(val); // 加锁写缓冲 ::PostMessage(m_pCtrl-GetSafeHwnd(), WM_APP 1, 0, 0); } } // UI 线程消息处理收到通知再重绘 LRESULT CCurveCtrl::OnDataReady(WPARAM, LPARAM) { Invalidate(FALSE); return 0; }PushData内部要加临界区或互斥量因为 UI 线程的DrawCurve同时在读缓冲。WM_APP 1是自定义消息的惯用起点避免和系统消息冲突。这套「写缓冲 消息通知」的模式在工控上位机里几乎是标配比在采集线程里直接Invalidate稳得多。4. 避坑与排查曲线控件的几个血泪经验4.1 曲线闪烁或残影现象拖动窗口或者数据刷新时曲线后面拖着一条灰影。原因多半是OnEraseBkgnd没处理系统默认擦背景和你的双缓冲打架。解决重写OnEraseBkgnd直接返回TRUE告诉系统「背景我自己管」所有填充都在内存 DC 里做。4.2 跑几分钟后内存持续上涨现象任务管理器里进程内存一路涨。原因通常是OnPaint里创建的CBitmap、CPen没释放或者SelectObject后没选回旧对象。解决位图用局部对象让它自动析构画笔用SelectObject保存旧指针、退出前还原更稳的做法是把内存 DC 和位图做成成员变量只在尺寸变化时重建。4.3 高 DPI 屏上曲线糊成一片现象在 4K 屏或缩放 150% 的笔记本上线条发虚、坐标文字重叠。原因是 MFC 默认按 96 DPI 布局像素坐标没做缩放。解决在OnInitDialog里调SetProcessDpiAwareness或在清单文件里声明 DPI 感知绘制时用GetDpiForWindow换算线宽和字号别写死像素值。4.4 数据点一多就卡现象超过五千点后刷新明显变慢。原因是每帧都全量重绘所有点。解决一是抽稀屏幕宽度只有几百像素横向每像素保留最大最小值即可二是分段只重绘变化区域。示例代码为了可读性没做这层优化二次开发时这是第一个该动的地方。5. 二次开发把示例控件改造成能上项目的曲线组件拿到这个示例直接用的场景其实不多多数人要改三处数据模型、交互、渲染策略。先说数据模型示例用的是定长数组覆盖写如果你的场景需要回放历史就得换成环形缓冲加时间戳AppendPoint改成AppendSample(timestamp, value)绘制时按时间轴映射而不是按点序号这样采样频率变化时曲线不会变形。交互方面示例一般只做了静态显示实际项目至少要加鼠标滚轮缩放和十字游标。缩放的本质是改SetAxisRange的四个值再重绘滚轮事件里按光标位置算缩放中心别简单地对半砍范围否则缩放会往左上角跑。游标则是OnMouseMove里把像素坐标反算回数据坐标画两条虚线加一个数值框反算公式就是映射的逆运算注意边界钳制。渲染策略上我一般会把DrawCurve拆成「数据抽稀」和「像素绘制」两步抽稀按屏幕宽度做每列像素只保留该列内的最大值和最小值画出来是带包络的曲线既快又不丢尖峰。这个技巧在振动、心电这类信号上特别有用直接逐点画反而看不出毛刺。验证改造是否成功别只看「能画出来」要盯三个指标一是刷新耗时用QueryPerformanceCounter在OnPaint首尾打点单帧超过 16ms 就得优化二是内存曲线挂个定时器打印GetProcessMemoryInfo跑半小时不涨才算过三是缩放后的坐标精度把游标读数和你喂进去的原始值对一遍误差应该在一个像素对应的数据量以内。说个我自己的教训早些年改这类控件图省事直接在OnPaint里new画笔不delete本地跑十分钟没事现场机器连续跑两天直接崩查了半天才定位到 GDI 对象泄漏。从那以后我每次动绘图代码都强制走一遍「创建-使用-还原-释放」的检查清单宁可多写两行SelectObject也不赌运气。希望这个示例能帮你少走这段弯路把它当成起点而不是终点按自己的数据源和交互需求往下改。本文还有配套的精品资源点击获取
简介面向数据采集与工业监控场景的MFC开发者这份资源提供了一套可直接编译运行的二维曲线控件示例工程用于解决MFC原生缺乏易用曲线显示控件的问题。工程基于ChartCtrl控件封装支持曲线自适应填满绘图区、静止状态下拉框放大局部曲线等实用交互并演示了以Custom Control为载体、设置style属性0x52010000的接入方式对理解WS_CLIPCHILDREN等窗口样式也有参考价值。压缩包共77个文件以38个h头文件、27个cpp源文件为主辅以inl内联实现、vcxproj工程文件、rc资源脚本与sln解决方案整体约245KB结构完整便于逐模块研读。该示例已有1659人学习下载VC2017下编译仅有少量历史遗留警告不影响使用适合需要快速回忆控件用法或搭建曲线显示原型的中级开发者参考。1. 一个能跑起来的 MFC 二维曲线控件解决工控界面里最烦的那块屏做过上位机的人都懂数据采集卡一开串口一收界面上最难看的就是那条曲线——用Polyline硬画几千个点下去直接卡成幻灯片想加个缩放、游标、网格代码量翻三倍。这个示例程序就是冲着这个场景来的一个基于 MFC 的高速二维曲线控件VC2017 编译通过拿到手就能往自己的对话框工程里塞。它适合两类人一类是刚接手工控上位机、需要快速把实时数据画出来的新手另一类是嫌现有图表库太重、想自己掌控绘制链路的熟手。下面按「能干什么、怎么跑、怎么改」的顺序拆。2. 工程结构与绘制链路从对话框到像素的完整路径2.1 目录里都有什么拿到压缩包解压后工程是标准的 MFC 对话框应用骨架没有引入任何第三方图表库所有绘制逻辑都收在控件类里。常见做法是这样一个结构CurveDemo/ ├── CurveDemo.sln // VC2017 解决方案 ├── CurveDemo/ │ ├── CurveDemo.vcxproj // 工程文件字符集/平台工具集在这里 │ ├── CurveDemo.cpp/.h // CWinApp 派生类程序入口 │ ├── CurveDemoDlg.cpp/.h // 主对话框控件宿主 │ ├── CurveCtrl.cpp/.h // 曲线控件核心绘制与数据管理 │ ├── CurveDemo.rc // 资源脚本对话框布局 │ └── resource.h // 控件 ID 定义 └── res/ // 图标等资源关键就两个文件CurveDemoDlg负责把控件摆到对话框上、喂数据CurveCtrl负责坐标变换、双缓冲绘制、鼠标交互。这种拆法好处是控件可以整块拷到别的工程只依赖 MFC 基础库不拖泥带水。2.2 控件是怎么嵌进对话框的MFC 里自绘控件有两种常见挂法一是从CStatic派生在对话框上放一个 Static 控件、改它的类二是从CWnd派生运行时Create出来。这个示例走的是前者因为资源编辑器里能直接拖位置、调大小改布局不用动代码。// CurveDemoDlg.cpp 中 OnInitDialog 的典型写法 BOOL CCurveDemoDlg::OnInitDialog() { CDialogEx::OnInitDialog(); // 把资源里的占位 Static 控件替换成曲线控件 m_curve.SubclassDlgItem(IDC_CURVE_PLACEHOLDER, this); // 初始化坐标轴范围X 轴 0~1000 点Y 轴 -50~50 m_curve.SetAxisRange(0, 1000, -50, 50); // 设置网格密度10 条竖线、8 条横线 m_curve.SetGrid(10, 8); // 开启双缓冲避免闪烁 m_curve.EnableDoubleBuffer(TRUE); SetTimer(1, 20, nullptr); // 20ms 刷新一次约 50fps return TRUE; }SubclassDlgItem的作用是把已经创建好的窗口句柄绑定到 C 对象上这样资源里的控件 ID 和类实例就对上了。SetAxisRange的四个参数分别是 X 最小值、X 最大值、Y 最小值、Y 最大值后面所有数据点都按这个范围映射到客户区像素。SetTimer的 20ms 是刷新节奏实际项目里要按数据源频率调太快会白耗 CPU太慢曲线会跳。2.3 双缓冲绘制的核心链路曲线控件卡顿的根源是直接在屏幕 DC 上逐点画每次重绘都闪。这个示例用的是内存 DC 双缓冲流程是建兼容位图 → 画到内存 DC → 一次性BitBlt到屏幕。核心代码大致长这样void CCurveCtrl::OnPaint() { CPaintDC dc(this); CRect rc; GetClientRect(rc); // 1. 建内存 DC 和兼容位图 CDC memDC; memDC.CreateCompatibleDC(dc); CBitmap bmp; bmp.CreateCompatibleBitmap(dc, rc.Width(), rc.Height()); CBitmap* pOld memDC.SelectObject(bmp); // 2. 背景填充 memDC.FillSolidRect(rc, RGB(255, 255, 255)); // 3. 画网格、坐标轴、曲线 DrawGrid(memDC, rc); DrawAxis(memDC, rc); DrawCurve(memDC, rc); // 4. 一次性贴到屏幕 dc.BitBlt(0, 0, rc.Width(), rc.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOld); }CreateCompatibleBitmap用的是屏幕 DC 的格式保证贴图时不失真。SelectObject之后一定要在退出前选回旧对象否则位图句柄泄漏跑久了内存一直涨——这是 MFC 绘图最常见的翻车点。DrawCurve里做的是数据点到像素的线性映射X 方向按点数均分Y 方向按(value - yMin) / (yMax - yMin) * height换算再MoveTo/LineTo连成折线。2.4 数据怎么喂进来控件对外暴露的接口一般是一个追加点的方法内部用std::vectorCPoint或环形缓冲存数据。示例里用的是固定长度数组加写指针避免频繁扩容// 追加一个数据点超出容量时覆盖最旧的点 void CCurveCtrl::AppendPoint(double x, double y) { m_points[m_writeIndex].x x; m_points[m_writeIndex].y y; m_writeIndex (m_writeIndex 1) % MAX_POINTS; if (m_count MAX_POINTS) m_count; // 只请求重绘不在这里直接画交给 OnPaint 统一处理 Invalidate(FALSE); }Invalidate(FALSE)的FALSE表示不擦背景配合双缓冲才不会闪。如果写成TRUE每帧先刷白再画肉眼能看到抖动。MAX_POINTS决定曲线能保留多少个历史点工控场景一般几千到一万再多就得考虑抽稀或者分段渲染。3. 编译运行与参数调优让示例变成你自己的曲线3.1 用 VC2017 打开并编译工程是 VC2017 建的平台工具集对应v141。用更高版本 VS 打开时VS 会提示升级工具集直接点确定一般能编过但要注意两点字符集和 MFC 库。工程属性里「字符集」通常是 Unicode「MFC 的使用」要选「在共享 DLL 中使用 MFC」或「在静态库中使用 MFC」选错会报一堆LNK2019找不到CWnd符号。# 命令行编译在 VS 开发者命令提示符下 msbuild CurveDemo.sln /p:ConfigurationRelease /p:Platformx64ConfigurationRelease比 Debug 快很多曲线刷新率差别明显Platformx64要和你的数据源位数一致串口库如果是 32 位的就得编 Win32。编译产物在x64/Release/下双击 exe 就能看到对话框和一条静态曲线。3.2 关键参数对照表调曲线效果基本就是调这几个参数改之前先看清楚含义参数位置作用常用取值X/Y 轴范围SetAxisRange数据映射的基准区间按传感器量程定网格密度SetGrid横竖参考线数量8~12刷新周期SetTimer重绘频率20~50ms缓冲点数MAX_POINTS历史数据保留量2000~10000线宽/颜色CPen构造曲线视觉样式1~2px深色刷新周期和缓冲点数是联动的周期 20ms、缓冲 10000 点意味着屏幕上最多显示 200 秒的数据超出后旧点被覆盖曲线看起来像在左移。如果想让曲线「滚动」而不是「覆盖」就得在DrawCurve里按写指针做偏移映射这是二次开发里最常改的一处。3.3 接真实数据源示例里通常用一个定时器造模拟数据实际项目要把AppendPoint挂到串口回调或采集线程里。注意 MFC 控件不是线程安全的采集线程不能直接调Invalidate常见做法是线程里只往缓冲区写用PostMessage通知 UI 线程重绘// 采集线程中只写数据不碰界面 void CCollectThread::Run() { while (m_running) { double val ReadSensor(); m_pCtrl-PushData(val); // 加锁写缓冲 ::PostMessage(m_pCtrl-GetSafeHwnd(), WM_APP 1, 0, 0); } } // UI 线程消息处理收到通知再重绘 LRESULT CCurveCtrl::OnDataReady(WPARAM, LPARAM) { Invalidate(FALSE); return 0; }PushData内部要加临界区或互斥量因为 UI 线程的DrawCurve同时在读缓冲。WM_APP 1是自定义消息的惯用起点避免和系统消息冲突。这套「写缓冲 消息通知」的模式在工控上位机里几乎是标配比在采集线程里直接Invalidate稳得多。4. 避坑与排查曲线控件的几个血泪经验4.1 曲线闪烁或残影现象拖动窗口或者数据刷新时曲线后面拖着一条灰影。原因多半是OnEraseBkgnd没处理系统默认擦背景和你的双缓冲打架。解决重写OnEraseBkgnd直接返回TRUE告诉系统「背景我自己管」所有填充都在内存 DC 里做。4.2 跑几分钟后内存持续上涨现象任务管理器里进程内存一路涨。原因通常是OnPaint里创建的CBitmap、CPen没释放或者SelectObject后没选回旧对象。解决位图用局部对象让它自动析构画笔用SelectObject保存旧指针、退出前还原更稳的做法是把内存 DC 和位图做成成员变量只在尺寸变化时重建。4.3 高 DPI 屏上曲线糊成一片现象在 4K 屏或缩放 150% 的笔记本上线条发虚、坐标文字重叠。原因是 MFC 默认按 96 DPI 布局像素坐标没做缩放。解决在OnInitDialog里调SetProcessDpiAwareness或在清单文件里声明 DPI 感知绘制时用GetDpiForWindow换算线宽和字号别写死像素值。4.4 数据点一多就卡现象超过五千点后刷新明显变慢。原因是每帧都全量重绘所有点。解决一是抽稀屏幕宽度只有几百像素横向每像素保留最大最小值即可二是分段只重绘变化区域。示例代码为了可读性没做这层优化二次开发时这是第一个该动的地方。5. 二次开发把示例控件改造成能上项目的曲线组件拿到这个示例直接用的场景其实不多多数人要改三处数据模型、交互、渲染策略。先说数据模型示例用的是定长数组覆盖写如果你的场景需要回放历史就得换成环形缓冲加时间戳AppendPoint改成AppendSample(timestamp, value)绘制时按时间轴映射而不是按点序号这样采样频率变化时曲线不会变形。交互方面示例一般只做了静态显示实际项目至少要加鼠标滚轮缩放和十字游标。缩放的本质是改SetAxisRange的四个值再重绘滚轮事件里按光标位置算缩放中心别简单地对半砍范围否则缩放会往左上角跑。游标则是OnMouseMove里把像素坐标反算回数据坐标画两条虚线加一个数值框反算公式就是映射的逆运算注意边界钳制。渲染策略上我一般会把DrawCurve拆成「数据抽稀」和「像素绘制」两步抽稀按屏幕宽度做每列像素只保留该列内的最大值和最小值画出来是带包络的曲线既快又不丢尖峰。这个技巧在振动、心电这类信号上特别有用直接逐点画反而看不出毛刺。验证改造是否成功别只看「能画出来」要盯三个指标一是刷新耗时用QueryPerformanceCounter在OnPaint首尾打点单帧超过 16ms 就得优化二是内存曲线挂个定时器打印GetProcessMemoryInfo跑半小时不涨才算过三是缩放后的坐标精度把游标读数和你喂进去的原始值对一遍误差应该在一个像素对应的数据量以内。说个我自己的教训早些年改这类控件图省事直接在OnPaint里new画笔不delete本地跑十分钟没事现场机器连续跑两天直接崩查了半天才定位到 GDI 对象泄漏。从那以后我每次动绘图代码都强制走一遍「创建-使用-还原-释放」的检查清单宁可多写两行SelectObject也不赌运气。希望这个示例能帮你少走这段弯路把它当成起点而不是终点按自己的数据源和交互需求往下改。本文还有配套的精品资源点击获取
)
