VC++图片控件实战：MFC中显示资源位图、文件位图与JPG/PNG的三种方式

简介：这份资源面向使用 VS2008 SP1 与 VC++ MFC 进行界面开发的初学者和中级开发者，聚焦图片控件（Picture Control）的多种图像加载方式，解决资源位图、磁盘 BMP 文件以及 JPG、PNG 等常见格式图片在对话框中如何正确显示的问题。压缩包共 23 个文件，约 1.72MB，包含 3 个 cpp 源文件与 5 个 h 头文件构成完整工程骨架，另有 bmp、jpg、png 示例图片及 ico 图标用于演示不同格式的加载效果，sln、vcproj 工程文件与 rc 资源脚本保证项目可直接打开编译。已有 2015 人学习下载，说明该示例在同类需求中具有较好的参考价值。读者可从中获得可直接运行的 MFC 对话框工程，对照资源位图与文件位图两类加载路径的代码差异，理解图片控件属性设置与图像格式兼容处理的基本思路，并借助示例图片快速验证显示效果，适合作为课程作业或小型工具界面开发的起步模板。

1. 从一张 BMP 说起：这个 VC++ 图片控件实例到底解决什么问题

接手一个老项目时，界面上要放一张公司 Logo，我第一反应是拖个 Picture Control 上去，结果资源视图里选完位图，运行起来一片灰。后来才发现，MFC 的 CStatic 控件默认只认资源里的位图，想显示磁盘上的 JPG、PNG，得自己写加载逻辑。这个实例就是围绕这个场景展开的：在 VS2008 SP1 环境下，用 VC++ 的图片控件分别演示三种显示路径——资源位图、文件位图、以及 JPG/PNG/BMP 等其它格式文件图片。它适合两类人：一是刚接触 MFC 对话框程序、需要往界面塞图的开发者；二是维护老工程、要在不引入重型图像库的前提下补齐图片显示能力的人。整份代码不复杂，但把 GDI 和 GDI+ 两条路都走了一遍，正好拿来当图片控件入门的参照。

2. 工程结构与技术选型：MFC 对话框 + GDI/GDI+ 双通道

2.1 为什么是 VS2008 SP1 和 MFC

这个实例的宿主环境是 VS2008 SP1，配套的 MFC 版本对 CStatic、CImage、GDI+ 的支持已经比较完整。选 MFC 对话框而不是 Win32 裸窗口，是因为 Picture Control 本身就是 CStatic 的封装，拖控件、绑变量这套流程最省事。SP1 这个补丁包值得单独提一句：早期 VS2008 在 GDI+ 头文件和 CImage 的配合上有过一些编译期的小毛病，SP1 之后基本顺畅，所以工程里如果看到#include <atlimage.h>能直接过，说明环境是对的。

技术选型上，工程实际走了两条通道。第一条是纯 GDI：用LoadBitmap或CBitmap加载资源位图，再通过CStatic::SetBitmap塞给控件，这条路只认 BMP，且位图必须编进资源。第二条是 GDI+ 通道：用CImage加载磁盘上的 JPG、PNG、BMP，再Draw到控件 DC 上。两条通道并存不是炫技，而是因为资源位图和文件图片的使用场景不同——前者适合图标、Logo 这类固定素材，后者适合用户可选、可替换的图片。

2.2 目录与关键文件清单

工程是标准的 MFC 对话框应用，核心文件不多，但每个都有明确职责。下面这张表是我按实际工程习惯整理的，文件名可能因创建向导略有差异，但角色对应得上。

这里有个容易忽略的点：GDI+ 的初始化和销毁要成对出现，通常放在CWinApp派生类的InitInstance和ExitInstance里，而不是对话框的构造和析构里。放错位置会导致 GDI+ 令牌重复初始化，调试时表现为图片偶尔画不出来，属于典型的玄学问题。

2.3 控件变量绑定方式

Picture Control 在对话框上拖好后，右键添加变量，类型选CStatic，变量名比如m_picShow。如果只是显示，不绑定也能用GetDlgItem(IDC_PIC)->SetBitmap()，但绑定变量后调用更顺手，也方便后续改成自绘。控件的 Type 属性建议设为 Frame 或 Rectangle，避免默认的 Etched 边框干扰图片边缘。

// 主对话框头文件中声明控件变量 CStatic m_picShow; // 对应 Picture Control 的 ID

绑定完成后，m_picShow就代表那块显示区域。注意控件本身的尺寸不会随图片自动缩放，图片比控件大就会被裁掉，比控件小则周围留白，这个行为在三种显示方式里是一致的，后面调尺寸时要以控件矩形为准。

3. 三种显示路径的代码拆解：资源位图、文件位图、其它格式

3.1 资源位图：LoadBitmap + SetBitmap 最短路径

资源位图是最省事的一种。先把 BMP 文件通过资源视图导入，假设资源 ID 是IDB_BITMAP_LOGO，然后一行代码就能显示。

// 方式一：显示资源中的 BMP void CMyDlg::OnBnClickedBtnResBmp() { // 从当前模块资源中加载位图，失败返回 NULL HBITMAP hBmp = ::LoadBitmap(AfxGetInstanceHandle(), MAKEINTRESOURCE(IDB_BITMAP_LOGO)); if (hBmp != NULL) { // 旧位图由控件内部管理，这里直接替换 m_picShow.SetBitmap(hBmp); } }

LoadBitmap的第一个参数是模块句柄，AfxGetInstanceHandle()拿到的是当前应用实例，资源编进 exe 后就能找到。第二个参数用MAKEINTRESOURCE把整型 ID 转成资源名字符串指针，这是 Win32 资源 API 的固定写法。SetBitmap会把位图句柄交给控件，控件负责后续绘制，但句柄的生命周期要留意——如果反复调用而不释放旧句柄，会累积 GDI 对象，任务管理器里能看到 GDI 对象数上涨。

提示：SetBitmap传入的 HBITMAP 不要立刻DeleteObject，控件还在用它绘制。要替换时先取回旧句柄再删，或者干脆用CBitmap成员变量持有，靠析构统一释放。

3.2 文件位图：从磁盘 BMP 到控件

文件位图比资源位图多一步文件读取。常见做法是用CImage的Load，它对 BMP 的支持很稳，也能顺带处理调色板。

// 方式二：显示磁盘上的 BMP 文件 void CMyDlg::OnBnClickedBtnFileBmp() { CFileDialog dlg(TRUE, _T("bmp"), NULL, OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, _T("BMP Files (*.bmp)|*.bmp||"), this); if (dlg.DoModal() != IDOK) return; CImage image; HRESULT hr = image.Load(dlg.GetPathName()); if (FAILED(hr)) { AfxMessageBox(_T("位图加载失败，请检查文件格式")); return; } // 将 CImage 绘制到控件客户区 CDC* pDC = m_picShow.GetDC(); CRect rc; m_picShow.GetClientRect(&rc); image.Draw(pDC->GetSafeHdc(), rc); m_picShow.ReleaseDC(pDC); }

CFileDialog的过滤器只放 BMP，是为了和“文件位图”这个演示点对齐。CImage::Load返回 HRESULT，失败时给提示比静默失败好排查。Draw的第二个参数是目标矩形，这里直接用控件客户区，图片会被拉伸到控件大小——如果不想拉伸，得自己算等比缩放后的矩形，这是后面二次开发要改的点。GetDC和ReleaseDC必须成对，漏掉 Release 会让控件 DC 泄漏。

3.3 其它格式：CImage 统一加载 JPG/PNG/BMP

JPG、PNG 这类格式 GDI 原生不支持，但CImage底层走的是 GDI+，一个Load就能通吃。这也是工程里最实用的一段。

// 方式三：显示 JPG/PNG/BMP 等常见格式 void CMyDlg::OnBnClickedBtnAnyImage() { CFileDialog dlg(TRUE, NULL, NULL, OFN_HIDEREADONLY | OFN_FILEMUSTEXIST, _T("图片文件|*.jpg;*.jpeg;*.png;*.bmp||"), this); if (dlg.DoModal() != IDOK) return; CImage image; if (FAILED(image.Load(dlg.GetPathName()))) { AfxMessageBox(_T("不支持的图片格式或文件已损坏")); return; } // 按控件大小等比缩放，避免图片变形 CDC* pDC = m_picShow.GetDC(); CRect rcClient; m_picShow.GetClientRect(&rcClient); int nImgW = image.GetWidth(); int nImgH = image.GetHeight(); double fScale = min((double)rcClient.Width() / nImgW, (double)rcClient.Height() / nImgH); int nDrawW = (int)(nImgW * fScale); int nDrawH = (int)(nImgH * fScale); int nOffX = (rcClient.Width() - nDrawW) / 2; int nOffY = (rcClient.Height() - nDrawH) / 2; // 先擦背景，再画图，避免残留上一张图 pDC->FillSolidRect(&rcClient, ::GetSysColor(COLOR_BTNFACE)); image.Draw(pDC->GetSafeHdc(), nOffX, nOffY, nDrawW, nDrawH); m_picShow.ReleaseDC(pDC); }

这段的关键在等比缩放：fScale取宽高两个方向缩放比的较小值，保证图片完整落在控件内；nOffX、nOffY做居中偏移。FillSolidRect用系统按钮面色擦底，是因为控件背景默认就是这个色，直接画图会在图片边缘留下上一张图的残影，这个坑我在实际项目里踩过不止一次。Draw的四参数重载是目标位置加目标尺寸，和前面三参数版本的区别就在这里。

3.4 三种方式的对比与选择

选择逻辑很直接：素材固定且体积小，走资源位图；需要用户选图、格式不定，走 CImage。文件位图那条路更多是教学过渡，实际项目里既然已经引入 CImage，BMP 也一并交给它处理更省心。

4. 避坑与排查：图片显示不出来的五种常见情况

4.1 控件一片灰，资源位图不显示

现象是点击按钮后控件没有任何变化。原因通常是资源 ID 对不上，或者 BMP 没真正编进资源。解决分三步：先在资源视图确认位图存在且 ID 与代码一致；再检查LoadBitmap返回值是否为 NULL，加个断言或断点；最后确认工程字符集设置，MAKEINTRESOURCE在 Unicode 和 MBCS 下行为一致，但如果误用了字符串形式的资源名，大小写和引号都会导致找不到。

4.2 JPG 加载返回失败

CImage::Load对 JPG 失败，多半是 GDI+ 没初始化。虽然CImage内部会做延迟初始化，但在某些 MFC 工程里，如果InitInstance里没有显式调用GdiplusStartup，遇到特殊编码的 JPG 就会失败。稳妥做法是在应用初始化时启动 GDI+，退出时关闭，令牌用成员变量保存。另一个原因是文件路径含中文，CFileDialog返回的路径在 Unicode 工程下没问题，MBCS 工程要确认Load接受的是LPCTSTR。

4.3 图片显示但边缘有残影

切换图片时旧图没擦干净，表现为新图周围有上一张的碎片。原因是Draw只覆盖了图片矩形，控件其余区域没重绘。解决就是在画图前用FillSolidRect把整个客户区擦一遍，颜色取控件背景色。如果控件有边框，擦除范围要避开边框，或者干脆给控件加WS_CLIPCHILDREN让系统帮忙处理。

4.4 反复点按钮后 GDI 对象暴涨

任务管理器里 GDI 对象数持续上涨，最终界面卡死。根因是每次LoadBitmap或GetDC后没有释放。SetBitmap替换位图时旧句柄不会自动删，GetDC不配对ReleaseDC也会泄漏。解决是把位图句柄用成员CBitmap持有，替换前先DeleteObject；DC 一律用GetDC/ReleaseDC成对包裹，或者改用CClientDC让析构自动释放。

4.5 图片被拉伸变形

控件尺寸和图片比例不一致时，直接Draw到客户区会拉伸。这是 3.2 节那段代码的遗留问题，3.3 节已经用等比缩放修掉。如果读者只抄了文件位图那段，就会遇到这个现象。解决就是补上缩放比计算和居中偏移，或者把控件 Type 设为 Rectangle 并固定尺寸，从源头约束比例。

5. 二次开发改造：把三按钮示例收成一个可复用的图片显示类

示例代码是三个按钮各管一路，实际项目里更常见的是封装成一个类，对外只暴露“给我一个路径或资源 ID，我来显示”。改造思路不复杂，但有几个细节值得说透。

第一步，把 GDI+ 的初始化和销毁收进一个单例或应用级管理，避免每个显示类各自GdiplusStartup。第二步，显示类内部持有CImage成员，Load成功后缓存，切换图片时先Destroy旧图再加载新图，这样 GDI 对象数稳定。第三步，把缩放策略做成参数，枚举“拉伸铺满 / 等比适应 / 原始尺寸居中”三种，默认等比适应，调用方按场景选。

// 可复用图片显示类的核心接口示意 class CImageShow { public: enum ScaleMode { Stretch, Fit, Original }; BOOL ShowFromFile(LPCTSTR lpszPath, ScaleMode mode = Fit); BOOL ShowFromResource(UINT nResID); void Clear(); private: CImage m_image; // 缓存当前图片 ScaleMode m_mode; void DrawTo(CStatic* pCtrl); // 统一绘制入口 };

ShowFromFile内部先m_image.Destroy()再Load，失败时保持原图不变并返回 FALSE，调用方据此提示。DrawTo里根据m_mode算目标矩形，Fit 走等比缩放加居中，Stretch 直接用客户区，Original 用图片原始尺寸加居中。这样三个按钮的差异就收敛成一个枚举参数，新增显示需求不用再复制粘贴绘制代码。

验证改造是否成功，我一般看三个指标：连续切换二十张不同尺寸图片后 GDI 对象数是否回落；加载一张损坏文件后界面是否还能正常显示上一张；控件缩放窗口时图片是否跟随重绘。前两个靠任务管理器和手动操作，第三个需要在对话框的OnSize里调用重绘，示例工程没做，属于改造时要补的。

还有一个容易忽略的点：CImage的Draw在目标 DC 有裁剪区时行为正常，但如果控件被其它窗口遮挡后重绘，需要响应WM_PAINT而不是只在按钮里画。稳妥做法是把绘制逻辑放进OnPaint，按钮只负责改数据并Invalidate，这样窗口最小化恢复、被遮挡后都能正确重画。示例为了演示直观，把绘制放在按钮响应里，二次开发时建议挪到OnPaint。

从那以后我每次给 MFC 界面加图片显示，都强制先确认三件事：GDI+ 初始化在哪、DC 有没有配对释放、绘制入口是不是OnPaint。这三条守住，图片控件基本不会出幺蛾子。希望帮到你。

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