MFC柱状图绘制教程：基于GDI画刷与坐标映射的轻量实现

简介：用MFC绘制简单柱状图的完整示例工程，面向正在学习MFC框架或GDI绘图的C++开发者，重点演示在单文档界面中利用CBrush画刷填充矩形来生成柱状图，同时搭配TXT数据文件实现动态读取，适合作为课程设计或图形编程入门参考。压缩包共36个文件，约2.28MB，包含6个头文件与5个C++源文件，并有MFC资源脚本、图标、位图工具栏和可直接运行的exe；工程文件采用VC6格式，附调试信息，能完整还原当时开发环境。已有599人浏览学习，作为小型实践项目，能直观展示MFC应用从创建到绘图的关键环节。工程在CMyView::OnPaint中创建画刷，并通过SelectObject选入设备上下文，结合CFile读取TXT数据与atoi/atof转换，再调用Rectangle完成柱子绘制；文档类、视图类和资源文件的结构清晰完整，便于在此基础上扩展坐标轴、标题、图例等元素，也能帮助理解MFC消息映射和GDI基础绘制。

1. 用MFC画柱状图：画刷一笔一笔画，才是老系统里最稳的方案

接手一个老系统的改造需求时，业务方要求在窗口上展示产线的日产量对比，MFC界面里没有现成的柱状图控件，引入第三方图表库又担心和旧代码的GDI环境打架。最后我用CBrush画刷在OnPaint里手工完成了整套柱状图：蓝色柱体、灰色网格、黑色刻度文字，十几个数据点实时渲染，窗口缩放也不闪烁。

这个方案看着原始，实际是控制力最强的——柱宽、间距、颜色、Label全部自己说了算，不依赖任何外部库，编译出来就是一个几十KB的单文件程序。这篇文章把整个项目摊开讲：MFC窗口如何组织绘图代码、画刷和画笔怎么配合、数据值怎么映射成屏幕坐标，最后附上运行步骤和二次开发思路。

2. 项目骨架与GDI绘图基础：从OnPaint到坐标映射

2.1 程序结构：一个对话框窗口撑起全部绘图

这个项目是一个标准的MFC对话框程序，没有用文档/视图结构，因为单纯展示数据用不着那么重的框架。工程里真正需要看的就三个文件：对话框类的头文件、实现文件和资源文件。头文件声明类和成员变量，实现文件写绘图逻辑和消息映射，资源文件管窗口模板和占位控件。消息映射表里只保留WM_PAINT、WM_TIMER、WM_MOUSEMOVE这几个关键项，向导生成的无关映射直接删掉，减少干扰。

MFC的绘图入口是OnPaint，它取代了SDK时代的WM_PAINT消息处理。当窗口首次显示、被其他窗口遮挡后露出、或者调用Invalidate时，系统都会发送WM_PAINT，OnPaint随之触发。初学MFC的人最常犯的错是直接在按钮事件里画图，画完一刷新就没了——按钮事件里的绘图没有持久性，下一次WM_PAINT一来画面就被清掉。正确做法是把所有绘制逻辑放进OnPaint，业务代码只负责改数据然后调用Invalidate。

void CBarChartDlg::OnPaint() { CPaintDC dc(this); // 构造时BeginPaint，析构时EndPaint DrawChart(&dc); // 所有绘制逻辑收拢到这一个函数 }

CPaintDC是CDC的包装类，它接管了BeginPaint和EndPaint的配对，避免漏调EndPaint导致窗口一直处于“正在绘制”状态。DrawChart是自定义函数，参数传CDC*而不是某个具体DC，这样既能被OnPaint调用，也能被后面双缓冲的memDC调用，绘图逻辑不用写两遍。资源文件里只放了一个静态文本控件做占位，实际运行时整个客户区都是绘图区，控件反而碍事。

2.2 画刷和画笔：填充与描边要分清

GDI里CBrush负责填充区域内部，CPen负责画边框和线条，二者分工明确。绘制柱体时，柱子的填充色用画刷，边框颜色用画笔。最常见的翻车点是：创建了CBrush却没有SelectObject选入DC，结果画出来要么是默认白色填充，要么是黑色边框，颜色完全不对。

// 创建实心画刷，参数是RGB颜色 CBrush brush(RGB(70, 130, 180)); // 关键一步：把画刷选入设备上下文，保存旧画刷指针 CBrush* pOldBrush = pDC->SelectObject(&brush); // 绘制带边框的矩形柱体：边框用当前画笔，内部用当前画刷 pDC->Rectangle(x1, y1, x2, y2); // 恢复旧画刷，避免GDI对象泄漏 pDC->SelectObject(pOldBrush);

新手必踩的坑在这里：SelectObject返回的是之前选入的CBrush*，用完必须选回去。如果每次都new一个画刷而不恢复，程序跑久了GDI对象耗尽，绘制会越来越慢直到完全失效。我一般把画刷和画笔声明成局部变量，函数结束自动析构，配合SelectObject恢复旧对象，GDI句柄才安全。

CBrush还有两个常用变体。CBrush(RGB(200, 200, 200), HS_CROSS)创建交叉阴影画刷，适合画背景网格；CBrush((HBRUSH)GetStockObject(NULL_BRUSH))创建空画刷，画出来的矩形只描边不填充，适合做命中检测的透明区域。用空画刷配合PS_DOT画笔画网格，比再开一个专门的网格函数更省代码，后面DrawGrid里就用这个思路。

2.3 坐标系映射：MFC的Y轴是反的

MFC的窗口坐标系原点在客户区左上角，X轴向右，Y轴向下。柱状图的数据语义是“值越大柱子越高”，也就是Y值要向上。如果不做转换，直接把数据值当屏幕坐标用，画出来的柱子会倒挂，数据越大位置越低。这块转换是柱状图的第一个拦路虎。

转换公式很简单：把数据值归一化到[0, 1]区间，再映射到绘图区域的Y坐标范围。

// 数据值映射到屏幕Y坐标 int DataToScreenY(int value, int maxValue, int chartTop, int chartBottom) { if (maxValue <= 0) return chartBottom; // 防除零，数据全为0时柱子落在底部 double ratio = (double)value / maxValue; return chartBottom - (int)(ratio * (chartBottom - chartTop)); }

chartTop是绘图区顶部Y坐标，chartBottom是底部Y坐标，value为0时返回chartBottom，value等于maxValue时返回chartTop。(int)强转是为了消除浮点余数，让柱体边缘对齐像素。举个具体例子：chartBottom=300，chartTop=50，数据值100，maxValue=200，ratio=0.5，算出来y=300-0.5×250=175，正好是绘图区垂直中点。这块逻辑是全项目的基石，柱体高度、Y轴刻度全部复用它，改一次全联动。如果想调整映射方式，比如让柱子高度按平方根压缩，只需要改ratio这一行。

3. 核心代码拆解：一组数据变成柱状图的全过程

3.1 数据准备与绘图区域计算

项目里用CArray存数据，真实场景可以换成std::vector或直接来自数据库的记录集。绘制前先算清楚每根柱子的左上角和右下角坐标，涉及柱宽、间距、留白多个参数，任何一个算错，画面都会出现柱子重叠或贴边。

void CBarChartDlg::DrawChart(CDC* pDC) { CRect rcClient; GetClientRect(&rcClient); // 取客户区尺寸，不含标题栏和边框 int nLeft = 60; // 左侧留白，放Y轴刻度文字 int nRight = 20; // 右侧留白 int nTop = 20; // 顶部留白 int nBottom = 40; // 底部留白，放X轴分类标签 int chartLeft = rcClient.left + nLeft; int chartRight = rcClient.right - nRight; int chartTop = rcClient.top + nTop; int chartBottom = rcClient.bottom - nBottom; int nCount = m_data.GetCount(); // 柱子数量 int gap = 12; // 柱间间距 int colWidth = 0; if (nCount > 0) colWidth = (chartRight - chartLeft - (nCount - 1) * gap) / nCount; DrawGrid(pDC, chartLeft, chartRight, chartTop, chartBottom); // 背景网格 for (int i = 0; i < nCount; i++) { int x1 = chartLeft + i * (colWidth + gap); int x2 = x1 + colWidth; int y1 = DataToScreenY(m_data[i], m_maxValue, chartTop, chartBottom); int y2 = chartBottom; DrawBar(pDC, x1, y1, x2, y2, m_colors[i % 5]); DrawCategoryLabel(pDC, i, x1, x2, chartBottom); // 分类名 } DrawAxis(pDC, chartLeft, chartRight, chartTop, chartBottom); }

colWidth的计算把总宽度减去所有间距后再均分，这样最后一根柱子不会超出右边界。x1到x2是柱子的水平范围，y1是柱顶（根据数据值算出来的屏幕Y坐标，值越大越靠上），y2固定为chartBottom，柱子从底部向上长。m_colors定义成静态COLORREF数组，i % 5让颜色按五组循环，数据多时也能区分相邻柱子。绘制顺序经过刻意安排：先画网格再画柱子，网格线会被柱子盖住，视觉上更干净；坐标轴最后画，压在柱子和网格上面，线条始终清晰。

背景网格DrawGrid的实现用的是空画刷加虚线画笔，只描边不填充：

void CBarChartDlg::DrawGrid(CDC* pDC, int left, int right, int top, int bottom) { CBrush* pOldBrush = (CBrush*)pDC->SelectObject( CBrush::FromHandle((HBRUSH)GetStockObject(NULL_BRUSH))); CPen pen(PS_DOT, 1, RGB(220, 220, 220)); // 浅灰点线 CPen* pOldPen = pDC->SelectObject(&pen); for (int i = 1; i <= 4; i++) { int y = top + (bottom - top) * i / 4; pDC->MoveTo(left, y); pDC->LineTo(right, y); } pDC->SelectObject(pOldPen); pDC->SelectObject(pOldBrush); }

四等分网格线和后面Y轴刻度的四等分是同一套逻辑，都是把绘图区垂直方向分成四段。网格线用点线而不是实线，是为了和坐标轴区分主次。这里没有重新创建画刷，而是用GetStockObject拿系统空画刷，省掉一次CBrush构造。

3.2 单根柱子的绘制：画刷填充加边框

DrawBar负责一根柱子的具体绘制。这里用Rectangle一次完成填充和描边，如果只想要纯色块不带边框，可以用FillRect和FrameRect两个函数分开做。项目里柱子带细边框，所以Rectangle更省事。

void CBarChartDlg::DrawBar(CDC* pDC, int x1, int y1, int x2, int y2, COLORREF color) { CBrush brush(color); // 新建画刷，颜色由调用方决定 CBrush* pOldBrush = pDC->SelectObject(&brush); CPen pen(PS_SOLID, 1, RGB(40, 40, 40)); // 1像素实线边框 CPen* pOldPen = pDC->SelectObject(&pen); pDC->Rectangle(x1, y1, x2, y2); pDC->SelectObject(pOldPen); // 恢复顺序与创建顺序相反 pDC->SelectObject(pOldBrush); }

Rectangle绘制时同时用到画刷和画笔，画刷填内部，画笔描边界。边框颜色用了深灰色而不是黑色，视觉上更柔和，打印出来也不会一片死黑。恢复顺序和创建顺序相反是GDI对象的规范做法，避免画刷被覆盖时还残留旧画笔，导致后续图形边框错乱。如果想让某根柱子高亮，比如鼠标悬停时换色，只需要在外面换一个color参数重新调DrawBar，内部逻辑完全不用动。

3.3 坐标轴、刻度与分类标签

坐标轴用MoveTo和LineTo画两条线，X轴画在chartBottom上，Y轴画在chartLeft - 5处。刻度文字要配合CFont指定字体，否则中文会显示成方块。Y轴刻度均匀分成四段，数值从0到m_maxValue递增。

void CBarChartDlg::DrawAxis(CDC* pDC, int left, int right, int top, int bottom) { pDC->MoveTo(left - 5, bottom); pDC->LineTo(right + 5, bottom); // X轴 pDC->MoveTo(left - 5, bottom); pDC->LineTo(left - 5, top - 5); // Y轴 CFont font; font.CreateFontW(16, 0, 0, 0, FW_NORMAL, FALSE, FALSE, 0, DEFAULT_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, CLEARTYPE_QUALITY, DEFAULT_PITCH, L"SimSun"); CFont* pOldFont = pDC->SelectObject(&font); for (int i = 0; i <= 4; i++) { int val = m_maxValue * i / 4; int y = DataToScreenY(val, m_maxValue, top, bottom); CString strText; strText.Format(L"%d", val); pDC->TextOutW(left - 45, y - 8, strText); // 左对齐，垂直居中 } pDC->SelectObject(pOldFont); }

CreateFontW的参数里，16是字高，FW_NORMAL是常规字重，DEFAULT_CHARSET让系统根据字体名选择字符集，最后一个参数传字体名称。TextOutW的坐标是文本左上角，Y方向减去半个字高（y - 8），刻度文字才会和刻度线垂直居中。分类标签写在X轴下方，横坐标取柱子的水平中点，用GetTextExtent量出文字宽度再居中偏移：

void CBarChartDlg::DrawCategoryLabel(CDC* pDC, int index, int x1, int x2, int baseline) { int centerX = (x1 + x2) / 2; CString strLabel; strLabel.Format(L"Q%d", index + 1); CSize size = pDC->GetTextExtent(strLabel); // 当前字体下的文字尺寸 pDC->TextOutW(centerX - size.cx / 2, baseline + 8, strLabel); }

GetTextExtent依赖当前选入DC的字体，所以在DrawAxis里选入字体后，DrawCategoryLabel拿到的尺寸是准确的。baseline + 8里的8是文字和X轴的间距，看着留白合适就行。分类标签如果改用ASC编码的窄字符串，在Unicode工程下会乱码，这里用Format(L"%s", ...)的宽字符版本，和前面统一。

4. 运行与验证：新建工程、编译、跑出第一张图

4.1 创建MFC对话框工程并集成绘制代码

在IDE里用MFC应用向导新建一个“基于对话框”的项目——注意别选“文档/视图”，纯图表展示用不着那么重的框架。工程生成后自带一个CBarChartDemoDlg类和一个对话框资源，按顺序改四处。

第一步，在类声明里添加成员变量和函数原型。成员包括CArray<int, int> m_data、int m_maxValue、COLORREF m_colors[5]；函数包括OnPaint重写、DrawChart、DrawBar、DrawAxis、DrawGrid、DataToScreenY。第二步，在OnInitDialog里初始化数据，这一步负责填充m_data和m_maxValue。第三步，重写OnPaint，把向导生成的默认代码替换成调用DrawChart的版本。第四步，编译运行，按F5看效果，发现问题用调试器在DrawChart入口下断点。

BOOL CBarChartDemoDlg::OnInitDialog() { CDialogEx::OnInitDialog(); // 初始化柱状图数据 m_data.Add(120); m_data.Add(88); m_data.Add(156); m_data.Add(102); m_data.Add(135); m_maxValue = 200; // Y轴上限，建议比最大数据高20%~30% return TRUE; }

Add是CArray的追加方法。m_maxValue设置成比最大数据略大的“整数值”，数据最大156就设200，这样Y轴刻度是整齐的50、100、150、200，而不是奇怪的138、139。如果后续数据会动态增长，m_maxValue放在RefreshData里统一更新，别散落在多个函数，否则改数据后上限对不上，柱子直接戳出边界。m_colors的定义放在实现文件顶部：

COLORREF CBarChartDemoDlg::m_colors[5] = { RGB(70, 130, 180), // 钢蓝 RGB(220, 120, 80), // 橙红 RGB(100, 160, 100), // 草绿 RGB(200, 180, 90), // 土黄 RGB(150, 110, 180) // 紫色 };

4.2 运行效果与参数调整

编译运行后，对话框弹出就能看到五根柱子从左到右排列，左侧Y轴刻度从0到200，底部X轴下方是分类标签。如果画面空白，优先检查OnPaint是不是被向导生成的默认版本覆盖了，再看DrawChart第一行的GetClientRect有没有拿到合法尺寸，这两个问题占了八成“画不出来”的场景。

调整nLeft时注意，DrawAxis里left - 45的刻度文字横坐标要跟着变，否则文字会压到柱子上。我一般把留白和文字偏移量定义成同一组const常量，改一处就能对齐。调试时可以在DrawChart入口加OutputDebugString输出窗口尺寸和数据个数，运行起来用调试器看输出窗口，比肉眼猜快得多。窗口尺寸变化后图形不跟随缩放，需要在对话框类的OnSize里调用Invalidate(FALSE)，让尺寸变化时触发重绘。

5. 避坑指南：画刷失效、中文乱码与窗口闪烁

5.1 画刷创建了却不生效，柱子全是黑色

现象：代码里明明用RGB(70, 130, 180)创建了蓝色画刷，跑起来柱子却是黑边框加默认背景色。

原因：CBrush对象虽然创建了，但从来没SelectObject选进DC，Rectangle用的是DC里默认的白色画刷；或者画刷创建在if分支里，出作用域就被析构，绘制时拿到的已经是悬空句柄。

解决：绘制前必须pDC->SelectObject(&brush)选入，绘制后恢复旧画刷。把画刷声明放在DrawBar函数体最前面，确保它的生命周期覆盖整个绘制过程。调试时可以临时在SelectObject后加一行ASSERT(pOldBrush != NULL)，验证选入成功。这个坑我踩了不止一次，后来养成习惯：凡是新建GDI对象，必定在同一作用域内配对选入和恢复。

5.2 中文刻度变成乱码方块

现象：柱子画出来了，但刻度文字显示成??或者一排小方块，英文数字正常。

原因：工程编译成Unicode，代码里却用窄字符常量；或者CreateFontW传了ANSI_CHARSET，中文字体无法正确映射字符集。CString在Unicode工程下默认是宽字符，和char*混用时发生隐式转换，字符串内容直接损坏。

解决：统一使用宽字符——字符串字面量加L前缀，调用TextOutW版本；CreateFontW的字符集参数改成DEFAULT_CHARSET，字体名用L"SimSun"。我踩过最隐蔽的一次是工程属性里字符集是“未设置”，导致CString和LPCTSTR混用，后来强制在stdafx.h里定义_UNICODE和UNICODE才算根治。

5.3 窗口缩放时画面闪烁、出现残影

现象：拖动窗口边缘，柱子区域频繁闪烁，或者有上一帧的残影残留。

原因：OnPaint默认先擦背景再画前景，每次重绘都清空一遍，擦和画之间的时间差就表现为闪烁；残影则是绘图区域没有完全覆盖失效区域，旧像素残留。

解决：两件事一起做。第一，Invalidate(FALSE)告诉系统重绘前不要擦除背景；第二，用双缓冲——先把所有内容画到内存DC，再一次BitBlt整块拷贝到屏幕。

void CBarChartDlg::OnPaint() { CPaintDC dc(this); CRect rcClient; GetClientRect(&rcClient); CDC memDC; memDC.CreateCompatibleDC(&dc); CBitmap bmp; bmp.CreateCompatibleBitmap(&dc, rcClient.Width(), rcClient.Height()); CBitmap* pOldBmp = memDC.SelectObject(&bmp); DrawChart(&memDC); // 所有绘制逻辑在内存DC上执行 dc.BitBlt(0, 0, rcClient.Width(), rcClient.Height(), &memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); }

CreateCompatibleDC创建的内存DC和屏幕DC兼容，CreateCompatibleBitmap分配一块和客户区一样大的画布。DrawChart里所有GetClientRect要用窗口客户区尺寸，我把rcClient提到OnPaint层，DrawChart只负责画不负责拿尺寸，逻辑更清晰。这套双缓冲在数据量大、刷新频繁时效果尤其明显，画面从“闪成花屏”变成“无缝切换”。

5.4 柱子被窗口边缘截断或柱顶出界

现象：最后一根柱子在窗口右边界被切掉一半，或者柱顶顶着窗口上沿出界，顶部刻度也看不到。

原因：colWidth整除取整后，余数导致最后一根柱子的x2超过了chartRight；柱顶出界则是m_maxValue设小了，数据值超出上限后被截断。

解决：colWidth计算前先判断nCount，数据量大时在DrawChart入口断言chartRight大于chartLeft。柱顶出界检查y1是否小于chartTop，是就把m_maxValue调大。我遇到过一次是窗口设置了粗边框样式，GetClientRect拿到的尺寸和实际客户区不一致，改用AdjustWindowRectEx修正后正常。排查这类问题的通用套路：在DrawChart里输出每个柱子的x2和y1值，对比chartRight和chartTop，一眼就能看出哪个坐标越界。

5.5 Invalidate参数写错导致绘制卡顿

现象：数据刷新后调用Invalidate，窗口重绘正常，但CPU占用飙高，界面拖拽卡顿。

原因：Invalidate(TRUE)强制重绘前擦除背景，每次刷新都全屏擦一遍再画一遍，擦除动作还会触发WM_ERASEBKGND，多重叠加双缓冲时性能急剧下降。

解决：统一使用Invalidate(FALSE)，配合双缓冲，重绘只发生在内存DC上，屏幕只接收一次BitBlt拷贝。定时刷新场景把SetTimer间隔从50毫秒改成200毫秒以上，肉眼依然流畅，CPU占用能降一个数量级。这条经验是从一个数据采集项目里总结出来的，当时每秒刷新20次，直接跑满一个核，改成200毫秒加双缓冲后占用降到3%以下。

6. 二次开发思路：让柱状图动起来

6.1 定时刷新：SetTimer+Invalidate组合

静态柱状图只是基础，真实场景里数据是不断变的。用SetTimer配合Invalidate实现秒级刷新，不需要额外开线程，MFC消息循环天然串行，不会出现数据竞争。

void CBarChartDlg::OnTimer(UINT_PTR nIDEvent) { if (nIDEvent == 1) { RefreshData(); // 从数据库、串口或全局共享区取值 Invalidate(FALSE); // 不擦背景，配合双缓冲基本无闪烁 } CDialogEx::OnTimer(nIDEvent); }

SetTimer(1, 1000, NULL)在OnInitDialog里启动，1000毫秒触发一次。RefreshData负责把新数据写进m_data，根据新数据更新m_maxValue。注意当数据最大值变化超过20%时才扩展上限，避免柱子高度频繁跳动导致视觉疲劳。

6.2 鼠标悬停高亮一根柱子

有了绘制链路，加交互就是加一个命中检测。在OnMouseMove里判断鼠标点落在哪根柱子的CRect范围内，把悬停索引存成员变量，Invalidate触发重绘，DrawBar里对悬停柱子换一个画刷颜色。

int CBarChartDlg::HitTest(CPoint pt) { for (int i = 0; i < m_data.GetCount(); i++) { CRect rcHit = GetBarRect(i); if (rcHit.PtInRect(pt)) return i; } return -1; }

GetBarRect把DrawBar里算x1、y1、x2、y2的逻辑抽出来复用，命中后高亮颜色用金色RGB(255, 200, 0)，和默认蓝色区分明显。再加一组SetCapture和ReleaseCapture的配对，就能支持鼠标按下拖拽选中连续区域，这个交互做出来，柱状图就从“展示工具”变成了“分析工具”。

6.3 扩展染色方案与多系列

这套代码改成堆叠柱状图，只需要在DrawBar里把数据拆成多段，柱体底部固定，每段依次向上绘制，画刷换成同色系不同明度。折线图更简单，把DrawBar换成Polyline，点坐标复用DataToScreenY。从那以后我接到任何“在MFC里画图表”的需求，都先走一遍坐标映射和重绘链路这两步，再动手写画刷——顺序对了，后面全是体力活。希望帮到你。

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