1. 為什么需要自研多邊形ROI一個標注場景的痛點拆解1.1 來源項目中的真實需求幾個月前接了一個圖像初檢工具的活兒核心場景很簡單一批高分辨率的零件圖上真正需要算法關(guān)注的區(qū)域往往只占整張圖的一小部分而且形狀不規(guī)則。矩形ROI能框出大概范圍但會把很多背景也圈進來后續(xù)做灰度統(tǒng)計或者邊緣檢測時噪聲特別大。對方提的需求很直接在界面里用鼠標手動圈出一個多邊形區(qū)域把這個區(qū)域單獨摳出來剩下的部分不影響后續(xù)處理。說白了就是圖像處理里常說的感興趣區(qū)域提取只不過這次交互層要自己做。接手之前我想得比較簡單WPF里放一個Canvas圖片顯示上去鼠標點幾下線一連頂點坐標傳給OpenCvSharp4去摳圖完事。真做起來才發(fā)現(xiàn)整個鏈路里最麻煩的并不是OpenCV那邊而是坐標系換算、鼠標狀態(tài)管理、閉合判定這些UI細節(jié)。這篇博文就完整記錄一下整個實現(xiàn)過程包括踩過的坑。適合正在做WPF圖像標注、ROI選取工具或者準備把OpenCV接入.NET桌面應用的讀者。1.2 為什么不用現(xiàn)成全屏截圖工具動手之前我先確認了一遍市面上有沒有現(xiàn)成的控件能直接干活。試過一些截圖標注工具它們確實內(nèi)置了矩形、橢圓甚至多邊形選區(qū)但問題是這些工具要么把截圖當成最終輸出要么保存的是圖片文件而不是坐標數(shù)據(jù)。我們這個場景需要的是把多邊形頂點坐標實時回傳給算法層后續(xù)還要基于這套ROI坐標做批量處理現(xiàn)成工具根本無法滿足這種坐標即資產(chǎn)的需求。另一個原因是版本迭代。工具后續(xù)要支持多種標注類型、ROI列表管理和坐標持久化自研雖然前期成本高一點但數(shù)據(jù)結(jié)構(gòu)完全可控功能擴展不受制于人。這個決策在后來的開發(fā)中證明是對的因為客戶果然在驗收前提了一堆追加需求如果當時用了現(xiàn)成品改起來要麻煩得多。2. 技術(shù)選型復盤Canvas、OpenCvSharp4搭配的取舍2.1 為什么UI層鎖定WPF和Canvas技術(shù)選型時第一爭議是WinForms和WPF選哪個。WinForms上手快GDI畫多邊形也簡單但考慮到后續(xù)要做圖層疊加、頂點拖拽、縮放平移這些交互我更傾向于WPF。WPF的Canvas是一個極其靈活的面板子元素可以通過Left和Top屬性進行絕對定位天然適合標記點的坐標管理。而且WPF的圖形元素Line、Polygon、Ellipse都支持矢量渲染縮放不模糊用來做交互標注體驗遠好于WinForms。Canvas這個控件本身不復雜但它為核心交互提供了良好的基礎每個頂點是一個Ellipse每條邊是一條Line我只需要維護一個頂點集合然后根據(jù)集合內(nèi)容動態(tài)增刪Canvas的子元素即可。相比手動Paint重繪整個界面操作粒度細、代碼結(jié)構(gòu)清晰也不容易出現(xiàn)閃爍。2.2 OpenCvSharp4相比其他封裝方案的優(yōu)勢圖像處理側(cè)起初有幾個備選直接調(diào)用C OpenCV的CLI封裝、Emgu CV、OpenCvSharp。我最終選了OpenCvSharp4理由是它幾乎純C#托管API風格和OpenCV官方非常接近文檔全社區(qū)案例也多。而且它同時支持.Net Framework和.Net Core/6/7配WPF沒有歷史包袱。Emgu CV也用過但它的某些API命名和類型轉(zhuǎn)換不如OpenCvSharp4直觀調(diào)試時心智負擔更重。OpenCvSharp4的NuGet包會把OpenCV運行時一并帶上安裝完直接能用不需要手動配置環(huán)境變量這對交付工具類的項目來說省了不少事。版本號建議直接上OpenCvSharp4當前較新的小版本記得同時安裝對應平臺的運行時包比如OpenCvSharp4.runtime.win。2.3 技術(shù)棧邊界劃分整個架構(gòu)的邊界一開始就要劃清楚UI層只負責人機交互不碰像素數(shù)據(jù)算法層只接收坐標數(shù)據(jù)不關(guān)心界面長什么樣。我設計了一個中間數(shù)據(jù)模型保存每一個ROI的頂點列表歸一化坐標、名稱、創(chuàng)建時間。UI層把Canvas坐標換算成圖像像素坐標后寫入模型算法層在真正執(zhí)行提取時才從模型讀取坐標傳給OpenCvSharp4。這個解耦在后來的測試中幫了大忙坐標問題可以單獨驗證圖像處理問題也可以單獨排查不會互相干擾。3. 第一步實戰(zhàn)WPF項目搭建與圖像顯示坐標建模3.1 創(chuàng)建項目與引用OpenCvSharp4環(huán)境用的是Visual Studio 2022 (.NET 6)新建WPF應用程序項目后NuGet安裝兩個包Install-Package OpenCvSharp4 Install-Package OpenCvSharp4.runtime.win安裝完成后在代碼里引入命名空間using OpenCvSharp;一個容易忽略的坑OpenCvSharp4依賴的VC運行庫版本可能和本機不同部署到客戶機器上如果報錯缺少runtime要么裝對應運行庫要么考慮自包含發(fā)布。我后來直接把VC運行庫打進了安裝包里省去了現(xiàn)場排查的麻煩。3.2 XAML布局與Canvas容器設計窗口布局用Grid分兩塊左側(cè)是原圖顯示區(qū)右側(cè)是ROI列表和操作按鈕。顯示區(qū)放一個ScrollViewer里面套一個Canvas圖片用Image控件鋪在Canvas底部。這里有一點很關(guān)鍵Image的width和height要顯式設置不要只依賴Stretch屬性否則后面做坐標換算時拿到的實際顯示尺寸會不穩(wěn)定。Grid Grid.ColumnDefinitions ColumnDefinition Width*/ ColumnDefinition Width320/ /Grid.ColumnDefinitions Border Grid.Column0 BorderBrush#ccc BorderThickness1 ScrollViewer x:NameImageScrollViewer HorizontalScrollBarVisibilityAuto VerticalScrollBarVisibilityAuto Background#222 Canvas x:NameDrawCanvas Width800 Height600 BackgroundTransparent VerticalAlignmentTop HorizontalAlignmentLeft Image x:NameMainImage StretchNone Width800 Height600 RenderOptions.BitmapScalingModeHighQuality/ /Canvas /ScrollViewer /Border StackPanel Grid.Column1 Margin10 Button x:NameOpenImageButton Content1. 打開圖片 Margin0,0,0,8/ Button x:NameStartDrawButton Content2. 開始標注多邊形 Margin0,0,0,8/ Button x:NameExtractButton Content3. 提取當前ROI Margin0,0,0,8/ Button x:NameClearButton Content4. 清空頂點 Margin0,0,0,8/ ListBox x:NameRoiListBox Margin0,12,0,0 Height360/ /StackPanel /Grid注意Image初始沒有設Source加載圖片后再實際設置。Canvas的寬度高度初始值跟隨圖片尺寸同步更新。3.3 坐標體系轉(zhuǎn)換Canvas坐標與圖像原始像素的映射真正的核心邏輯在這里。Canvas上顯示的圖片尺寸不一定是原始圖像尺寸所以鼠標在Canvas上的坐標并不等于圖像里的像素坐標。兩者之間需要一個比例系數(shù)轉(zhuǎn)換。加載圖片后我記錄兩個值作為基準_originalWidth原始圖片的像素寬度_originalHeight原始圖片的像素高度同時把Canvas和Image的寬高都設置為原始像素寬高這里先不考慮縮放后面縮放版本再討論。換算公式很直接public class CoordinateTransform { public static Point CanvasToImage(Point canvasPoint, Size originalSize, Size displaySize) { double scaleX originalSize.Width / displaySize.Width; double scaleY originalSize.Height / displaySize.Height; return new Point(canvasPoint.X * scaleX, canvasPoint.Y * scaleY); } }這個轉(zhuǎn)換類的單元測試我寫了很多組覆蓋圖片寬高一致、按比例縮小、非整數(shù)縮放等情況。坐標換算是整個項目的命脈這一步錯了后面所有提取結(jié)果都會歪。測試用例里有一條非常經(jīng)典Canvas上一個點1530原始圖是800×600顯示尺寸是400×300期望換算結(jié)果是3060這個用例能擋住很大一部分越寫越偏的代碼。3.4 加載圖片并綁定顯示加載圖片時使用System.Windows.Media.Imaging的BitmapImage注意要把CacheOption設為OnLoad否則文件句柄一直占著不放。代碼如下private void LoadImage(string filePath) { var bitmap new BitmapImage(); bitmap.BeginInit(); bitmap.CacheOption BitmapCacheOption.OnLoad; bitmap.UriSource new Uri(filePath); bitmap.EndInit(); _originalWidth bitmap.PixelWidth; _originalHeight bitmap.PixelHeight; MainImage.Source bitmap; MainImage.Width _originalWidth; MainImage.Height _originalHeight; DrawCanvas.Width _originalWidth; DrawCanvas.Height _originalHeight; _vertices.Clear(); Redraw(); }我特意把Canvas和Image設成相同的尺寸目的就是讓Canvas坐標系和圖片顯示坐標系完全重合。不重合的做法也能做但每次都要減偏移量交互代碼會埋很多隱患。4. 多邊形標注交互設計點、線、閉合與拖拽調(diào)整4.1 頂點數(shù)據(jù)模型與繪制狀態(tài)機標注交互本質(zhì)上是個狀態(tài)機空閑態(tài)、繪制中、已閉合。我用一個枚舉管理當前狀態(tài)同時維護一個頂點集合public enum DrawState { Idle, Drawing, Finished } private DrawState _state DrawState.Idle; private ObservableCollectionPoint _vertices new ObservableCollectionPoint(); private ListEllipse _vertexEllipseList new ListEllipse(); private ListLine _edgeLineList new ListLine();繪制中狀態(tài)表示已經(jīng)點了至少一個頂點但還沒閉合。已閉合后禁止繼續(xù)加點用戶必須點擊開始標注重新建一個ROI或者選中某個ROI編輯頂點。4.2 鼠標事件的綁定與頂點添加邏輯鼠標操作都掛在DrawCanvas上用MouseLeftButtonDown處理加點用MouseMove處理預覽線用MouseRightButtonDown做撤銷邏輯集中、清晰。private void DrawCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (_state DrawState.Finished) return; var pos e.GetPosition(DrawCanvas); _vertices.Add(pos); if (_vertices.Count 1) { _state DrawState.Drawing; } else { // 檢查是否點擊到起點附近觸發(fā)閉合 double firstDist Distance(_vertices[0], pos); if (firstDist 12 _vertices.Count 3) { // 用第一個點替換最新點保證閉合平滑 _vertices[_vertices.Count - 1] _vertices[0]; _state DrawState.Finished; } } Redraw(); }閉合判定用的是距離閾值法初版用12像素。很多人會寫成雙擊閉合或者按下S閉合實際用下來還是點回起點附近最符合直覺因為雙擊和右鍵經(jīng)常誤觸發(fā)。閾值不能太大否則如果起點附近恰好有密集點會誤閉合也不能太小否則用戶要很精確點回起點。12在1920×1080屏幕上體驗不錯。右鍵撤銷邏輯經(jīng)常被忽略但它非常重要。用戶手滑點多了一個頂點如果只能清空重來極其影響體驗。實現(xiàn)很便宜private void DrawCanvas_MouseRightButtonDown(object sender, MouseButtonEventArgs e) { if (_state DrawState.Drawing _vertices.Count 1) { _vertices.RemoveAt(_vertices.Count - 1); if (_vertices.Count 1) _state DrawState.Finished; Redraw(); } }4.3 動態(tài)繪制頂點圓點和網(wǎng)格線如何同步刷新Redraw方法負責把頂點集合渲染到Canvas上。實現(xiàn)思路是每次全量清空繪制層子元素再重新生成數(shù)據(jù)量不大一個多邊形幾十個點時性能毫無壓力。private void Redraw() { for (int i _edgeLineList.Count - 1; i 0; i--) DrawCanvas.Children.Remove(_edgeLineList[i]); for (int i _vertexEllipseList.Count - 1; i 0; i--) DrawCanvas.Children.Remove(_vertexEllipseList[i]); _edgeLineList.Clear(); _vertexEllipseList.Clear(); if (_vertices.Count 1) return; for (int i 0; i _vertices.Count; i) { var ellipse new Ellipse { Width 10, Height 10, Fill Brushes.Yellow, Stroke Brushes.Black, StrokeThickness 2 }; Canvas.SetLeft(ellipse, _vertices[i].X - 5); Canvas.SetTop(ellipse, _vertices[i].Y - 5); DrawCanvas.Children.Add(ellipse); _vertexEllipseList.Add(ellipse); if (i 0) { var line new Line { X1 _vertices[i - 1].X, Y1 _vertices[i - 1].Y, X2 _vertices[i].X, Y2 _vertices[i].Y, Stroke Brushes.OrangeRed, StrokeThickness 2 }; DrawCanvas.Children.Add(line); _edgeLineList.Add(line); } } if (_state DrawState.Finished _vertices.Count 3) { var closeLine new Line { X1 _vertices[_vertices.Count - 1].X, Y1 _vertices[_vertices.Count - 1].Y, X2 _vertices[0].X, Y2 _vertices[0].Y, Stroke Brushes.OrangeRed, StrokeThickness 2 }; DrawCanvas.Children.Add(closeLine); _edgeLineList.Add(closeLine); } }一個性能細節(jié)不要用DrawCanvas.Children.Clear()因為Image也在Children里會被一并清掉。我只維護自己的兩個列表只清自己的Image不受影響。這里提到的預覽線鼠標移動時的橡皮筋線沒有包含在上面代碼里我在MouseMove里額外畫了一條臨時Line追蹤當前鼠標位置方便用戶看到下一條邊會變成什么形狀。private Line _tempLine; private void DrawCanvas_MouseMove(object sender, MouseEventArgs e) { if (_state ! DrawState.Drawing || _vertices.Count 0) return; var pos e.GetPosition(DrawCanvas); if (_tempLine null) { _tempLine new Line { Stroke Brushes.Orange, StrokeThickness 1.5, StrokeDashArray new DoubleCollection { 4, 4 } }; DrawCanvas.Children.Add(_tempLine); } _tempLine.X1 _vertices[_vertices.Count - 1].X; _tempLine.Y1 _vertices[_vertices.Count - 1].Y; _tempLine.X2 pos.X; _tempLine.Y2 pos.Y; }閉合后應移除_tempLine避免它殘留成臟數(shù)據(jù)。這類清理細節(jié)雖然小但漏了就會在界面上畫幽靈線。4.4 讓標注可用性提升的拖拽調(diào)點功能只是能加點連線還不算好用真正實用必須支持拖拽調(diào)整已有點的位置。方法是MouseLeftButtonDown時先做命中檢測命中優(yōu)先于新增頂點。命中邏輯用一個簡單距離函數(shù)private int HitTestVertex(Point pos) { double minDist 12; int hitIndex -1; for (int i 0; i _vertices.Count; i) { double d Distance(_vertices[i], pos); if (d minDist) { minDist d; hitIndex i; } } return hitIndex; }如果返回的索引不是-1進入拖拽模式并在MouseMove里更新該頂點坐標然后Redraw。加了一個IsDragging標志防止拖拽時重復判定。拖拽過程中也要更新之后的點記錄否則新計算ROI時會拿到過期坐標。這個功能初版沒做測試直接上真機出現(xiàn)了拖動過程中頂點漂移的嚴重問題——原因在于MouseMove用e.GetPosition(DrawCanvas)拿到的是相對Canvas的坐標可拖拽的點坐標本身也在Canvas坐標系兩者單位一致不該有偏差。排查后發(fā)現(xiàn)是Image的Stretch被設成了Uniform圖片實際顯示尺寸跟Canvas尺寸不一致導致坐標錯位。最終把Stretch改成了None讓圖片嚴格按像素尺寸鋪在Canvas上問題立刻消失。5. 核心一步用OpenCvSharp4完成ROI提取與保存5.1 ROI頂點如何從UI坐標轉(zhuǎn)換為圖像像素坐標當用戶完成一個多邊形后頂點集存儲的還是Canvas上的顯示坐標。由于我在加載圖片時已經(jīng)讓Canvas尺寸等于圖片原始像素尺寸這一步坐標轉(zhuǎn)換退化為恒等變換。不過為了代碼健壯性和后續(xù)擴展縮放功能還是統(tǒng)一調(diào)用CoordinateTransform轉(zhuǎn)了一遍確保未來加入圖片縮放后不用改這段邏輯。ListOpenCvSharp.Point roiPoints new ListOpenCvSharp.Point(); foreach (var v in _vertices) { var imgPoint CoordinateTransform.CanvasToImage(v, new Size(_originalWidth, _originalHeight), new Size(MainImage.ActualWidth, MainImage.ActualHeight)); roiPoints.Add(new OpenCvSharp.Point((int)Math.Round(imgPoint.X), (int)Math.Round(imgPoint.Y))); }特別注意像素坐標必須取整否則OpenCV的Point不接受浮點。取整時優(yōu)先用Math.Round而不是強轉(zhuǎn)int直接強轉(zhuǎn)是截斷誤差圖像邊緣容易偏一個像素在提取掩碼做邊界判斷時會有肉眼可見的鋸齒偏移。5.2 用FillPoly生成掩碼并執(zhí)行BitwiseAnd提取所有坐標準備完畢后提取分三步創(chuàng)建與原圖同尺寸的掩碼矩陣、在掩碼上填充多邊形區(qū)域為白色、用掩碼做按位與操作。private Mat ExtractRoi(Mat src, ListOpenCvSharp.Point roiPoints) { Mat mask new Mat(src.Size(), MatType.CV_8UC1, Scalar.All(0)); OpenCvSharp.Point[] vertices roiPoints.ToArray(); Cv2.FillPoly(mask, new OpenCvSharp.Point[][] { vertices }, new Scalar(255)); Mat result new Mat(); Cv2.BitwiseAnd(src, src, result, mask); return result; }為什么用FillPoly因為它能處理凹多邊形。Cv2.FillConvexPoly只能處理凸多邊形名字里就帶Convex凹多邊形用它會出現(xiàn)錯誤填充。而用戶在圖上隨手圈出的區(qū)域大多不是嚴格的凸多邊形所以必須用支持任意多邊形的FillPoly。另一個值得提醒的細節(jié)如果只是想象本文最開始需求那樣把ROI區(qū)域提取出來BitwiseAnd即可結(jié)果保留了原圖色彩如果還要把ROI之外的區(qū)域統(tǒng)一變?yōu)榧兩珓t在獲得mask后執(zhí)行Mat bg new Mat(); Cv2.BitwiseNot(mask, bg); Mat background new Mat(src.Size(), src.Type(), new Scalar(0, 0, 0)); src.CopyTo(background, bg);5.3 提取結(jié)果另存為圖片并刷新到界面提取完成后把Mat轉(zhuǎn)成WPF可顯示的BitmapSource預覽展示在界面右側(cè)同時提供保存按鈕。Mat轉(zhuǎn)BitmapSource的代碼在網(wǎng)上一搜一大把注意釋放中間資源避免內(nèi)存堆積。private BitmapSource MatToBitmapSource(Mat mat) { if (mat null || mat.Empty()) return null; int channels mat.Channels(); PixelFormat format channels 1 ? PixelFormats.Gray8 : PixelFormats.Bgr24; byte[] buffer new byte[mat.Width * mat.Height * channels]; System.Runtime.InteropServices.Marshal.Copy(mat.Data, buffer, 0, buffer.Length); BitmapSource bitmap BitmapSource.Create( mat.Width, mat.Height, 96, 96, format, null, buffer, mat.Width * channels); return bitmap; }保存時用Cv2.ImWrite直接寫文件即可如果保存的只是提取ROI膠片含透明區(qū)域外包矩形建議先裁剪到ROI的外接矩形Cv2.BoundingRect否則保存成圖片后整張圖還是原來的矩形尺寸周圍大片黑色看不出摳的效果。Rect boundingRect Cv2.BoundingRect(vertices); Mat cropped new Mat(result, boundingRect); Cv2.ImWrite(roi_output.jpg, cropped);裁剪之后既能減小文件體積也方便后續(xù)算法只關(guān)注ROI小圖不用每次處理整張原圖。6. 實測踩坑坐標漂移、DPI縮放與Mat內(nèi)存管理6.1 坑一DPI縮放導致標注點偏移半條街第一版在開發(fā)機上一切正常拿到高DPI筆記本電腦上跑多邊形標注位置整體偏移點得越遠偏差越大。排查后確認是WPF默認按DPI虛擬化在高DPI顯示器上元素實際渲染尺寸和邏輯像素尺寸不一致。解決方式是在App啟動時顯式聲明DPI感知[System.Runtime.InteropServices.DllImport(user32.dll)] static extern bool SetProcessDPIAware(); protected override void OnStartup(StartupEventArgs e) { SetProcessDPIAware(); base.OnStartup(e); }更規(guī)范的現(xiàn)代方式是添加app.manifest設置PerMonitorV2 DPI感知。使用SetProcessDPIAware簡單直接在絕大多數(shù)場景下夠用。這一改之后坐標繪制和鼠標點擊對齊了問題消失。6.2 坑二Mat對象不釋放導致內(nèi)存翻倍OpenCvSharp4的Mat在托管層看似是普通類底層卻持有非托管內(nèi)存。初版代碼頻繁打開新圖片、構(gòu)建掩碼、提取結(jié)果內(nèi)存占用不斷攀升。OpenCV自己的規(guī)則是誰分配誰負責釋放但在C#環(huán)境下很多人容易忘記Dispose。解決辦法所有臨時Mat都用using語句包住或者手動調(diào)用Dispose。尤其注意FillPoly創(chuàng)建的mask、BitwiseAnd得到的result都不能裸奔。重構(gòu)后的提取方法長這樣private Mat ExtractRoiWithMemorySafe(Mat src, ListOpenCvSharp.Point roiPoints) { using (Mat mask new Mat(src.Size(), MatType.CV_8UC1, Scalar.All(0))) { OpenCvSharp.Point[] vertices roiPoints.ToArray(); Cv2.FillPoly(mask, new OpenCvSharp.Point[][] { vertices }, new Scalar(255)); Mat result new Mat(); Cv2.BitwiseAnd(src, src, result, mask); return result; } }mask在using塊結(jié)束自動釋放result作為方法返回值由調(diào)用方負責釋放。寫代碼時形成這個習慣后長時間反復開圖測試內(nèi)存穩(wěn)定在初始水平附近沒有再漲。6.3 坑三預覽線與真實繪圖元素互相覆蓋、殘留開發(fā)初期MouseMove里的臨時預覽線直接Add到Canvas結(jié)果閉合后忘移除界面上出現(xiàn)一條跟隨鼠標跑的虛線非常尷尬。后來統(tǒng)一封裝了一個_dynamicLayer所有臨時性元素預覽線、拖拽提示都放這個專用Canvas層里每次鼠標狀態(tài)切換時先清空該層。代碼更整潔也不會誤刪主繪制層的內(nèi)容。還有一個相關(guān)的小坑EdgeLine列表在Redraw時如果遺漏某條線界面上會出現(xiàn)舊線殘留問題。后來我總結(jié)出規(guī)律只要維護了專門的List 刪除和添加必須保證同一清單不要一部分靠List記錄、一部分靠Children索引兩個來源一旦不同步就是疑難雜癥。6.4 坑四多ROI管理時坐標記錄不同步項目后來演進到支持保存多個多邊形ROI每個ROI除了頂點坐標外還要記錄名稱、置信度等附加信息。一開始我把頂點直接放ObservableCollection 但發(fā)現(xiàn)修改一個ROI會影響另一個——原因是列表里存的是同一個Point對象的引用。調(diào)試半天才意識到Point是結(jié)構(gòu)體不是類本不該有此問題真正的原因是我在代碼某處把ROI對象淺拷貝了。最終改為深拷貝列表再沒有出現(xiàn)相互污染。這提醒我涉及引用類型的ROI列表深拷貝不是可選項是必要項。序列化成JSON時也要謹慎配置ReferenceLoopHandling避免多邊形對象自引用導致死循環(huán)。7. 從單一ROI到量產(chǎn)工具坐標持久化與批量處理思路7.1 坐標數(shù)據(jù)如何持久化標注工具的價值一半在于標注數(shù)據(jù)的積累。多邊形ROI提取完成后坐標信息必須能保存和重新加載否則每次打開工具都要重新圈一遍體驗極差。我將ROI數(shù)據(jù)序列化為JSON格式保存成與圖片同路徑的sidecar文件。public class RoiRecord { public string Name { get; set; } public Listdouble[] Polygon { get; set; } public double Confidence { get; set; } public DateTime CreateTime { get; set; } }每個頂點存成[x, y]的double數(shù)組讀取時再轉(zhuǎn)成Point這樣做的好處是JSON結(jié)構(gòu)簡單且不依賴UI層的Point類型任何語言都能解析后續(xù)接入Python訓練Pipeline毫無障礙。7.2 批量提取的并行化實現(xiàn)當同類圖片幾十上百張時一張一張手動圈顯然不行。好在ROI坐標通常是預設的模板坐標來自一張標準圖批量提取就是把這些坐標按比例映射到每張待測圖上然后用同一個掩碼流程執(zhí)行提取。OpenCvSharp4支持并行處理我用的Parallel.For對文件列表做并行提取。這里踩過一個線程安全坑OpenCV的Mat操作在不同線程間是安全的但Cv2.ImWrite的保存路徑如果并發(fā)寫同一文件會沖突。解決方式是為每張圖生成唯一文件名圖片名加ROI名徹底避免并發(fā)寫。Parallel.For(0, fileList.Count, i { using (Mat src Cv2.ImRead(fileList[i], ImreadModes.Color)) { if (src.Empty()) return; using (Mat roi ExtractRoi(src, mappedPoints)) { Rect rect Cv2.BoundingRect(mappedPoints); using (Mat cropped new Mat(roi, rect)) { Cv2.ImWrite(Path.Combine(outDir, ${Path.GetFileNameWithoutExtension(fileList[i])}_roi.jpg), cropped); } } } });7.3 后續(xù)擴展方向完成了多邊形ROI提取之后這個工具已經(jīng)不僅僅是個摳圖工具了。ROI坐標可以喂給模板匹配可以統(tǒng)計區(qū)域灰度均值和方差可以接入OCR識別特定區(qū)域的文字也可以作為缺陷檢測的排除范圍。我還做了一步很實用的擴展支持在ROI提取結(jié)果上疊加網(wǎng)格統(tǒng)計按行和列把區(qū)域切分輸出各小格的數(shù)值方便做區(qū)域差異分析。這些擴展都建立在坐標數(shù)據(jù)和圖像處理鏈路解耦的基礎上只要初始的多邊形標注交互穩(wěn)定可靠上層怎么玩都很順手。從我這個項目的經(jīng)驗來說先把標注這層地基打牢比急著堆功能重要得多。最后分享一個實操小技巧如果你的多邊形頂點特別多繪制時建議每加一個點就先移除再重繪整個Canvas而是對新增點只做一次增量繪制尾部補一條新邊。否則上百個頂點的多邊形每次微調(diào)都會卡一下用戶體驗天差地別。我的處理是在Redraw之外加了一個AppendVertex方法專門處理增量場景性能開銷從毫秒級降到微秒級涂抹體驗完全不一樣。這塊瓶頸雖然不復雜但做了之后流暢度提升非常明顯。