簡(jiǎn)介一套面向Windows平臺(tái)OpenCV圖像交互開(kāi)發(fā)的Visual Studio 2017工程資料適合學(xué)習(xí)MFC對(duì)話框、Picture控件顯示與鼠標(biāo)交互的初、中級(jí)開(kāi)發(fā)者。內(nèi)容圍繞cv::Mat轉(zhuǎn)位圖并繪制到Picture控件覆蓋鼠標(biāo)按下、移動(dòng)、滾輪消息處理以及拖動(dòng)偏移、縮放比例和重繪流程涉及GDI設(shè)備上下文與窗口消息循環(huán)可用于課程實(shí)驗(yàn)、畢業(yè)設(shè)計(jì)或桌面圖像查看器原型參考。壓縮包共99個(gè)文件約133.6MB含cpp/h源碼、sln與vcxproj工程配置、rc/res資源及bmp/ico示例圖片也帶有obj、pdb、tlog等編譯中間與調(diào)試文件便于還原構(gòu)建環(huán)境、排查鏈接與運(yùn)行問(wèn)題。已有3338人學(xué)習(xí)。讀者可對(duì)照理解Mat轉(zhuǎn)HBITMAP、GDI繪制、坐標(biāo)邊界處理和滾輪縮放重繪等環(huán)節(jié)借助完整工程復(fù)現(xiàn)實(shí)驗(yàn)效果、定位配置錯(cuò)誤并擴(kuò)展為更復(fù)雜的交互式圖像處理應(yīng)用適合需要從零搭建可運(yùn)行示例、理解消息驅(qū)動(dòng)繪制機(jī)制的學(xué)習(xí)者。1. 一張圖卡在 Picture 控件上OpenCV 讀得進(jìn)為什么顯示和拖動(dòng)總翻車很多人第一次把 OpenCV 的cv::imread接進(jìn) MFC 對(duì)話框都會(huì)遇到同一個(gè)場(chǎng)景Mat里明明有數(shù)據(jù)Picture 控件卻是一片灰好不容易用SetBitmap顯示出來(lái)圖片又被拉伸得不成樣子鼠標(biāo)拖動(dòng)像在拖一張濕紙滾輪縮放還總往左上角跑。這個(gè)資源解決的就是這條鏈路把 OpenCV 讀入的圖片穩(wěn)定顯示到 Picture 控件上并讓拖動(dòng)和以鼠標(biāo)為中心的放大縮小真正可用。適合正在做圖像查看器、標(biāo)注工具、檢測(cè)結(jié)果預(yù)覽的開(kāi)發(fā)者尤其是已經(jīng)能把圖讀進(jìn)來(lái)、卻卡在控件自繪和坐標(biāo)換算上的人。2. 從 Mat 到 Picture 控件像素格式、句柄與雙緩沖的底層鏈路2.1 為什么不要直接把 Mat 塞給 CStatic::SetBitmapcv::Mat只是一個(gè)像素容器它知道自己的寬高、通道數(shù)和行 stride但它不是 GDI 能直接繪制的HBITMAP。Picture 控件在 MFC 里通常是CStatic如果資源編輯器里把 Type 設(shè)成 Bitmap它期待的是SetBitmap傳進(jìn)去的位圖句柄然后按控件客戶區(qū)直接拉伸。這個(gè)方案看起來(lái)省事實(shí)際上有三個(gè)硬傷第一Mat的 BGR 順序和 GDI 常見(jiàn)的 RGB 順序不一致顏色會(huì)翻車第二SetBitmap之后位圖生命周期歸控件管理頻繁換圖容易出資源泄漏第三控件自己拉伸你拿不到縮放錨點(diǎn)也沒(méi)法做拖動(dòng)偏移。我一般會(huì)把 Picture 控件的 Type 改成 Rectangle 或 FrameNotify 可以勾上然后用一個(gè)派生自CStatic的自繪類接管繪制?？丶回?fù)責(zé)占位和接收鼠標(biāo)消息真正畫(huà)什么、畫(huà)多大、畫(huà)在哪里全部由自己的OnPaint決定。綁定代碼放在對(duì)話框的OnInitDialog里順序很重要先子類化控件再設(shè)置圖像不要在構(gòu)造函數(shù)里GetClientRect那時(shí)候控件還沒(méi)創(chuàng)建拿到的尺寸沒(méi)有意義。// 對(duì)話框頭文件中聲明自繪控件成員 CImageZoomCtrl m_pic; // OnInitDialog 中先綁定控件再加載圖像 BOOL CMyDialog::OnInitDialog() { CDialogEx::OnInitDialog(); // IDC_PICTURE 是資源編輯器里 Picture 控件的 ID m_pic.SubclassDlgItem(IDC_PICTURE, this); // 綁定完成后再讀圖避免控件客戶區(qū)尺寸還是 0 cv::Mat img cv::imread(test.png, cv::IMREAD_COLOR); if (!img.empty()) m_pic.SetImage(img); return TRUE; }這段代碼的邏輯是把控件子類化讓CImageZoomCtrl接管原本屬于CStatic的消息處理。SubclassDlgItem的第二個(gè)參數(shù)是父窗口必須是對(duì)話框本身如果傳錯(cuò)鼠標(biāo)消息會(huì)收不到。SetImage放在綁定之后是為了讓FitToWindow能拿到真實(shí)的客戶區(qū)大小。參數(shù)上注意cv::imread的第二個(gè)參數(shù)做預(yù)覽用IMREAD_COLOR就夠了如果原圖帶 alpha 通道后面轉(zhuǎn)CImage時(shí)要單獨(dú)處理不要直接按 24 位拷貝。2.2 Mat 轉(zhuǎn) CImage 的逐行拷貝與 BGR/RGB 順序搜索里常把cv::imread打成cvvim但落到代碼里就是 OpenCV 讀圖、Mat 轉(zhuǎn)換、控件自繪三件事。CImage是 MFC 里比較順手的 DIB 封裝支持StretchBlt也能直接拿到底層像素指針。轉(zhuǎn)換時(shí)不要假設(shè)CImage的行字節(jié)數(shù)等于width * 3Windows 的 DIB 每行按 4 字節(jié)對(duì)齊必須用GetPitch()拿真實(shí) stride。另一個(gè)坑是通道順序OpenCV 默認(rèn) BGRCImage按 RGB 解釋不轉(zhuǎn)就會(huì)紅藍(lán)顛倒。// 將 OpenCV 的 BGR Mat 轉(zhuǎn)成 24 位 CImage供 GDI 繪制 bool MatToCImage(const cv::Mat src, CImage dst) { if (src.empty()) return false; // 統(tǒng)一轉(zhuǎn)成 3 通道 RGB灰度圖和帶 alpha 的圖都走這里 cv::Mat rgb; if (src.channels() 3) cv::cvtColor(src, rgb, cv::COLOR_BGR2RGB); else if (src.channels() 4) cv::cvtColor(src, rgb, cv::COLOR_BGRA2RGB); else cv::cvtColor(src, rgb, cv::COLOR_GRAY2RGB); if (!dst.IsNull()) dst.Destroy(); if (!dst.Create(rgb.cols, rgb.rows, 24)) return false; // CImage 的 pitch 可能為負(fù)表示自底向上按行地址拷貝最穩(wěn) const int dstStride dst.GetPitch(); BYTE* pDstBase static_castBYTE*(dst.GetBits()); const int srcStride static_castint(rgb.step); if (dstStride 0) { for (int y 0; y rgb.rows; y) memcpy(pDstBase y * dstStride, rgb.ptr(y), rgb.cols * 3); } else { for (int y 0; y rgb.rows; y) memcpy(pDstBase (rgb.rows - 1 - y) * (-dstStride), rgb.ptr(y), rgb.cols * 3); } return true; }這段代碼先把 BGR 轉(zhuǎn)成 RGB再按CImage的真實(shí) pitch 逐行拷貝。rgb.step是 OpenCV 的行字節(jié)數(shù)可能包含尾部填充dst.GetPitch()是目標(biāo) DIB 的行字節(jié)數(shù)也可能包含對(duì)齊填充。兩個(gè) stride 不要混用。參數(shù)上dst.Create的第三個(gè)參數(shù)固定 24表示無(wú) alpha 的 RGB 位圖如果確實(shí)要保留透明度得用 32 位并處理預(yù)乘 alpha普通預(yù)覽沒(méi)必要。src.channels() 4時(shí)用COLOR_BGRA2RGB會(huì)丟掉 alpha但能保證顏色正確這是預(yù)覽場(chǎng)景下更穩(wěn)的取舍。2.3 雙緩沖 OnPaint把縮放繪制收進(jìn)一個(gè)函數(shù)Picture 控件自繪最容易翻車的地方是閃爍。拖動(dòng)時(shí)每移動(dòng)一次就Invalidate如果直接往控件 DC 上畫(huà)背景擦除和圖像繪制交替出現(xiàn)肉眼看到的就是抖。常見(jiàn)做法是雙緩沖先在內(nèi)存 DC 里畫(huà)好背景和圖像最后一次性BitBlt到控件 DC?？s放繪制用StretchBlt模式設(shè)成HALFTONE比默認(rèn)的COLORONCOLOR更適合圖片縮放代價(jià)是大圖會(huì)慢一點(diǎn)這個(gè)取舍后面再展開(kāi)。void CImageZoomCtrl::OnPaint() { CPaintDC dc(this); CRect client; GetClientRect(client); if (client.IsRectEmpty()) return; // 雙緩沖先畫(huà)到內(nèi)存 DC最后一次性貼到控件避免拖動(dòng)閃爍 CDC memDC; memDC.CreateCompatibleDC(dc); CBitmap bmp; bmp.CreateCompatibleBitmap(dc, client.Width(), client.Height()); CBitmap* pOldBmp memDC.SelectObject(bmp); memDC.FillSolidRect(client, RGB(32, 32, 32)); if (!m_cimage.IsNull()) { // 目標(biāo)矩形 當(dāng)前偏移 原始尺寸 × 縮放比例 const int drawW static_castint(m_cimage.GetWidth() * m_scale 0.5); const int drawH static_castint(m_cimage.GetHeight() * m_scale 0.5); CRect dstRect(m_offset.x, m_offset.y, m_offset.x drawW, m_offset.y drawH); // HALFTONE 適合縮放SetBrushOrg 防止圖案錯(cuò)位 memDC.SetStretchBltMode(HALFTONE); memDC.SetBrushOrg(0, 0); m_cimage.StretchBlt(memDC.m_hDC, dstRect, SRCCOPY); } dc.BitBlt(0, 0, client.Width(), client.Height(), memDC, 0, 0, SRCCOPY); memDC.SelectObject(pOldBmp); }這段OnPaint的邏輯很直創(chuàng)建兼容內(nèi)存 DC 和位圖填背景按m_scale和m_offset算出目標(biāo)矩形把CImage拉伸畫(huà)進(jìn)去最后整塊貼到控件。m_scale是當(dāng)前縮放倍率m_offset是圖像左上角在控件客戶區(qū)里的偏移。參數(shù)上背景色用深灰是為了看亮圖不刺眼換成RGB(255,255,255)也行SetStretchBltMode(HALFTONE)要放在每次繪制前因?yàn)?DC 狀態(tài)可能被別的繪制改掉。注意最后一定要把舊位圖選回去否則CBitmap析構(gòu)時(shí)還在 DC 里GDI 句柄會(huì)泄漏。2.4 初始化順序先綁定控件再設(shè)置圖像自繪控件的初始化順序經(jīng)常被忽略。有人在對(duì)話框構(gòu)造函數(shù)里讀圖并調(diào)用SetImage結(jié)果m_cimage有數(shù)據(jù)控件卻一片灰因?yàn)槟菚r(shí)候GetClientRect拿到的是零尺寸FitToWindow算出來(lái)的縮放是 0 或者負(fù)數(shù)后面怎么拖都救不回來(lái)。穩(wěn)妥的順序是OnInitDialog里先SubclassDlgItem再讀圖再SetImageSetImage內(nèi)部先轉(zhuǎn)CImage再按控件大小算初始縮放最后Invalidate(FALSE)。void CImageZoomCtrl::SetImage(const cv::Mat mat) { if (mat.empty()) return; // 保留原始 Mat后續(xù)做縮略圖緩存或重新轉(zhuǎn)換都用得上 m_src mat.clone(); // 只在這里轉(zhuǎn)一次OnPaint 里不再碰 OpenCV if (!MatToCImage(m_src, m_cimage)) return; m_scale 1.0; m_offset CPoint(0, 0); FitToWindow(); // 初始按控件大小完整顯示 Invalidate(FALSE); }這段代碼把轉(zhuǎn)換和顯示分開(kāi)m_src留原始數(shù)據(jù)m_cimage是 GDI 能直接畫(huà)的版本FitToWindow只改縮放和偏移不碰像素。參數(shù)上mat.clone()會(huì)多占一份內(nèi)存但對(duì)預(yù)覽工具來(lái)說(shuō)值得后面做縮略圖、重新擬合都方便如果內(nèi)存特別緊可以只保留CImagem_src按需重新讀。FitToWindow里要注意控件客戶區(qū)可能還沒(méi)布局完如果client.IsRectEmpty()為真直接返回等OnSize再補(bǔ)一次。3. 拖動(dòng)與縮放三個(gè)坐標(biāo)、錨點(diǎn)公式和鼠標(biāo)捕獲3.1 三個(gè)坐標(biāo)控件客戶區(qū)、圖像坐標(biāo)與屏幕坐標(biāo)拖動(dòng)和縮放寫(xiě)不對(duì)十有八九是坐標(biāo)混了。鼠標(biāo)消息OnMouseMove給的point是控件客戶區(qū)坐標(biāo)原點(diǎn)在控件左上角OnMouseWheel給的pt是屏幕坐標(biāo)原點(diǎn)在屏幕左上角圖像坐標(biāo)是原始像素坐標(biāo)原點(diǎn)在圖片左上角。三者之間的關(guān)系是客戶區(qū)坐標(biāo) 圖像坐標(biāo) × 縮放比例 偏移。反過(guò)來(lái)圖像坐標(biāo)等于(客戶區(qū)坐標(biāo) - 偏移) / 縮放比例。滾輪縮放要拿鼠標(biāo)下的圖像點(diǎn)做錨點(diǎn)就必須先把屏幕坐標(biāo)ScreenToClient轉(zhuǎn)成客戶區(qū)坐標(biāo)再套這個(gè)公式。我見(jiàn)過(guò)最常見(jiàn)的翻車寫(xiě)法是OnMouseWheel里直接拿pt去減m_offset忘了pt是屏幕坐標(biāo)結(jié)果鼠標(biāo)在控件中間滾輪圖像卻往右下角跑還有人拖動(dòng)時(shí)用GetCursorPos拿屏幕坐標(biāo)再和客戶區(qū)偏移相加拖得越快漂得越遠(yuǎn)。統(tǒng)一原則是鼠標(biāo)事件進(jìn)來(lái)先轉(zhuǎn)成客戶區(qū)坐標(biāo)內(nèi)部計(jì)算只用客戶區(qū)坐標(biāo)和圖像坐標(biāo)屏幕坐標(biāo)只在最外層出現(xiàn)一次。3.2 拖動(dòng)實(shí)現(xiàn)按下、移動(dòng)、抬起與邊界限制拖動(dòng)的核心不是“鼠標(biāo)移動(dòng)就改偏移”而是記錄按下時(shí)的起點(diǎn)和當(dāng)時(shí)的偏移移動(dòng)時(shí)算增量。這樣即使鼠標(biāo)移出控件、坐標(biāo)變成負(fù)數(shù)增量仍然正確。按下時(shí)SetCapture讓控件在鼠標(biāo)離開(kāi)客戶區(qū)后還能收到WM_MOUSEMOVE和WM_LBUTTONUP抬起時(shí)ReleaseCapture。如果不捕獲鼠標(biāo)一拖快就丟消息手感像斷線。void CImageZoomCtrl::OnLButtonDown(UINT nFlags, CPoint point) { if (m_cimage.IsNull()) return; SetFocus(); // 讓控件有機(jī)會(huì)接收后續(xù)滾輪消息 SetCapture(); // 鼠標(biāo)移出控件仍能繼續(xù)拖動(dòng) m_dragging true; m_dragStart point; // 按下時(shí)的客戶區(qū)坐標(biāo) m_dragOffsetStart m_offset; CStatic::OnLButtonDown(nFlags, point); } void CImageZoomCtrl::OnMouseMove(UINT nFlags, CPoint point) { if (m_dragging) { CPoint delta point - m_dragStart; // 用增量不用絕對(duì)坐標(biāo) m_offset m_dragOffsetStart delta; ClampOffset(); // 防止整張圖被拖出可視區(qū) Invalidate(FALSE); } CStatic::OnMouseMove(nFlags, point); } void CImageZoomCtrl::OnLButtonUp(UINT nFlags, CPoint point) { if (m_dragging) { m_dragging false; ReleaseCapture(); } CStatic::OnLButtonUp(nFlags, point); }這段代碼的關(guān)鍵是m_dragStart和m_dragOffsetStart兩個(gè)快照移動(dòng)時(shí)用當(dāng)前點(diǎn)減按下點(diǎn)得到增量再加到按下時(shí)的偏移上。參數(shù)上SetFocus不是拖動(dòng)必需但能讓控件在后續(xù)滾輪消息里少一層轉(zhuǎn)發(fā)SetCapture和ReleaseCapture必須成對(duì)異常路徑里如果捕獲丟了要處理WM_CAPTURECHANGED把m_dragging復(fù)位否則下一次鼠標(biāo)移動(dòng)會(huì)莫名其妙地拖圖。void CImageZoomCtrl::OnCaptureChanged(CWnd* pWnd) { m_dragging false; // 捕獲被系統(tǒng)拿走時(shí)必須結(jié)束拖動(dòng)狀態(tài) CStatic::OnCaptureChanged(pWnd); }邊界限制放在ClampOffset里策略是圖像小于控件時(shí)居中不允許拖出圖像大于控件時(shí)允許邊緣留出m_margin像素的空白再往外拖就夾住。minX是負(fù)數(shù)maxX是正數(shù)用std::max/min夾緊。參數(shù)m_margin設(shè) 20 左右手感比較松設(shè) 0 就是嚴(yán)格貼邊。注意drawW和drawH要用當(dāng)前縮放算不要用原始尺寸否則放大后邊界會(huì)提前卡住。void CImageZoomCtrl::ClampOffset() { if (m_cimage.IsNull()) return; CRect client; GetClientRect(client); const int drawW static_castint(m_cimage.GetWidth() * m_scale 0.5); const int drawH static_castint(m_cimage.GetHeight() * m_scale 0.5); if (drawW client.Width()) m_offset.x (client.Width() - drawW) / 2; else { const int minX client.Width() - drawW - m_margin; const int maxX m_margin; m_offset.x std::max(minX, std::min(maxX, m_offset.x)); } if (drawH client.Height()) m_offset.y (client.Height() - drawH) / 2; else { const int minY client.Height() - drawH - m_margin; const int maxY m_margin; m_offset.y std::max(minY, std::min(maxY, m_offset.y)); } }3.3 滾輪縮放以鼠標(biāo)為錨點(diǎn)的偏移重算滾輪縮放最忌諱“只改 scale 再重繪”。那樣縮放錨點(diǎn)固定在圖像左上角鼠標(biāo)在右下角滾輪圖像會(huì)往左上角縮用戶得反復(fù)拖回來(lái)。正確做法是以鼠標(biāo)下的圖像點(diǎn)為錨點(diǎn)縮放前算出這個(gè)點(diǎn)在圖像坐標(biāo)里的位置縮放后讓同一個(gè)圖像點(diǎn)仍然落在鼠標(biāo)下反推新的偏移。公式不復(fù)雜但必須用客戶區(qū)坐標(biāo)。BOOL CImageZoomCtrl::OnMouseWheel(UINT nFlags, short zDelta, CPoint pt) { if (m_cimage.IsNull()) return TRUE; // OnMouseWheel 的 pt 是屏幕坐標(biāo)先轉(zhuǎn)客戶區(qū) ScreenToClient(pt); const double oldScale m_scale; const double factor (zDelta 0) ? 1.1 : (1.0 / 1.1); double newScale oldScale * factor; newScale std::max(m_minScale, std::min(m_maxScale, newScale)); if (std::abs(newScale - oldScale) 1e-9) return TRUE; // 錨點(diǎn)公式imgPt (pt - offset) / oldScale // 新偏移 pt - imgPt * newScale const double imgX (pt.x - m_offset.x) / oldScale; const double imgY (pt.y - m_offset.y) / oldScale; m_scale newScale; m_offset.x static_castint(pt.x - imgX * m_scale); m_offset.y static_castint(pt.y - imgY * m_scale); ClampOffset(); Invalidate(FALSE); return TRUE; }這段代碼先ScreenToClient再用zDelta的正負(fù)決定放大還是縮小factor取 1.1意味著每滾一格縮放 10%。m_minScale和m_maxScale夾住范圍防止縮到 0 或者大到內(nèi)存爆掉。imgX/imgY是鼠標(biāo)下的圖像坐標(biāo)縮放后反算m_offset這樣鼠標(biāo)下的像素點(diǎn)不動(dòng)。參數(shù)上factor改成 1.05 手感更細(xì)膩但滾輪格數(shù)會(huì)變多改成 1.25 更激進(jìn)適合快速瀏覽。注意std::abs需要cmathstd::max/min需要algorithm舊工程里自己寫(xiě)個(gè) clamp 也行。3.4 重繪節(jié)奏Invalidate(FALSE) 與鼠標(biāo)捕獲的配合拖動(dòng)和縮放都調(diào)用Invalidate(FALSE)區(qū)別在于Invalidate(TRUE)會(huì)先擦背景再重繪雙緩沖已經(jīng)負(fù)責(zé)避免閃爍再擦一次反而多一次填充。FALSE表示不擦背景直接走OnPaint。不要在OnMouseMove里調(diào)UpdateWindow那會(huì)強(qiáng)制同步重繪鼠標(biāo)消息一密集就卡也不要在OnPaint里再Invalidate會(huì)遞歸?？丶叽缱兓瘯r(shí)OnSize里重新夾緊偏移保持圖像不跑出可視區(qū)。void CImageZoomCtrl::OnSize(UINT nType, int cx, int cy) { CStatic::OnSize(nType, cx, cy); if (m_cimage.IsNull()) return; // 控件尺寸變了偏移可能越界重新夾緊并重繪 ClampOffset(); Invalidate(FALSE); }這段代碼不重新擬合縮放只夾偏移適合用戶已經(jīng)手動(dòng)縮放過(guò)的場(chǎng)景。如果希望窗口一變大就自動(dòng)完整顯示可以在OnSize里調(diào)FitToWindow但那樣用戶剛調(diào)好的縮放會(huì)被重置交互上不討喜。參數(shù)上nType可以判斷是不是最小化最小化時(shí)cx/cy為 0ClampOffset里client.Width()為 0 會(huì)算出奇怪的偏移最好在cx 0 || cy 0時(shí)直接返回。4. 參數(shù)與手感縮放步長(zhǎng)、邊界策略和大圖性能取舍4.本文還有配套的精品資源點(diǎn)擊獲取