WPFOpenCV高级显示控件2.0全新优化，新增直观图像拖入加载与显示功能，采用WPF原生...

基于WPFOpencv 高级显示控件2.0 全新优化支持图像拖入显示使用wpf的adnoner和thumb实现可交互的绘图对象。一、控件概述基于WPFOpenCV的高级显示控件2.0是一款面向图像可视化与交互操作的专业控件库采用.NET Framework 4.8框架开发融合WPF的高效UI渲染能力与OpenCV的强大图像处理功能。控件支持图像拖入显示、多类型绘图对象交互、图像特效处理等核心功能通过WPF的Adorner和Thumb组件实现绘图对象的拖拽、缩放、旋转等交互操作适用于机器视觉、图像分析、工业检测等场景。二、核心技术架构一技术栈选型技术类别核心组件/框架作用说明UI框架WPFWindows Presentation Foundation提供可视化界面、控件布局、Adorner装饰器、Thumb交互组件支持图像处理OpenCvSharp4OpenCV的.NET封装实现图像读取、格式转换、边缘检测Sobel算子、几何绘图等功能开发框架.NET Framework 4.8提供稳定的运行时环境兼容Windows系统主流版本辅助组件System.Drawing支持位图操作、图形绘制等底层功能二核心模块划分控件库采用模块化设计主要包含以下核心模块图像显示与交互模块负责图像加载、拖入显示、缩放平移、鼠标事件响应绘图对象模块提供圆形、矩形、旋转矩形、直线、多边形等可交互绘图对象图像处理模块集成Sobel边缘检测、图像格式转换、几何图形绘制等功能交互控制模块通过Adorner和Thumb实现绘图对象的拖拽、缩放、旋转交互数据绑定模块采用MVVM模式的ViewModel层实现UI与数据的双向绑定。三、核心功能详解一图像加载与显示1. 加载方式拖入加载支持将本地图像文件直接拖入控件窗口完成加载支持主流图像格式BMP、PNG、JPG等路径加载通过LoadBitmapImage或LoadMat方法传入文件路径加载图像格式支持兼容OpenCV的Mat格式与System.Drawing的Bitmap格式支持格式互转。2. 显示特性自适应显示图像加载后自动适配控件尺寸保持宽高比不变缩放平移支持鼠标滚轮缩放、鼠标拖拽平移图像图像信息显示实时显示图像尺寸、通道数、鼠标位置及对应像素的BGR值。二绘图对象交互控件支持5种核心绘图对象所有对象均支持拖拽移动、样式自定义部分支持缩放、旋转等扩展操作1. 绘图对象类型及功能绘图对象核心参数交互能力特色功能圆形CircleDrawingObject圆心坐标CenterX/CenterY、半径Radius拖拽移动、半径缩放支持Sobel边缘检测回调鼠标拖拽时实时显示边缘效果矩形RectDrawingObject左上角坐标Left/Top、宽高Width/Height拖拽移动、边缘缩放支持文本叠加显示可自定义文本内容、字体、颜色旋转矩形Rect2DrawingObject中心坐标、宽高、旋转角度Angle拖拽移动、宽高缩放、角度旋转旋转角度范围支持-360°~360°保持中心位置不变直线LineDrawingObject起点坐标StartX/StartY、终点坐标EndX/EndY拖拽移动、端点调整支持直线两端点独立拖拽调整保持线宽不变多边形PolygonDrawingObject顶点集合Points、质心坐标CentroidX/CentroidY拖拽移动、顶点编辑、添加顶点支持随机添加顶点、顶点拖拽调整自动计算质心位置2. 交互操作实现拖拽机制通过WPF的Thumb组件捕获鼠标事件结合DragDelta事件计算拖拽偏移量更新绘图对象坐标缩放机制在绘图对象边缘设置缩放手柄Thumb根据手柄位置计算缩放比例实时更新对象尺寸旋转机制旋转矩形专属旋转手柄通过计算鼠标移动角度差更新对象旋转角度装饰器Adorner使用AdornerLayer为每个绘图对象添加装饰层显示交互手柄如中心手柄、缩放手柄、旋转手柄不影响底层图像显示。三图像处理功能1. Sobel边缘检测针对圆形绘图对象提供Sobel边缘检测功能勾选Sobel复选框后拖拽圆形对象时将对圆形区域内的图像进行边缘检测并实时显示实现逻辑先将图像转为灰度图通过Sobel算子计算边缘再与原图像叠加显示边缘效果。2. 图像绘制支持在图像上绘制几何图形包括基础图形直线、矩形、圆形、椭圆、圆弧复杂图形旋转矩形、多边形、箭头、标记点支持十字、星型、菱形等7种标记类型文本绘制支持自定义文本内容、字体、大小、颜色可叠加在图像指定位置。3. 图像格式转换提供多种格式转换工具类ImageConvertor支持Bitmap与WriteableBitmap互转Bitmap与OpenCV Mat互转支持灰度图、彩色图、索引图等多种格式适配。四样式自定义与控制1. 绘图对象样式颜色自定义通过下拉框选择绘图对象的边框颜色红、绿、蓝线宽自定义通过文本框输入数值设置绘图对象的边框厚度填充控制支持图形填充如圆形、矩形可通过参数控制是否填充。2. 控件控制功能控制功能操作方式作用说明清空绘图对象点击清空绘图对象按钮移除所有已添加的绘图对象保留图像显示清空窗口点击清空窗口按钮移除图像及所有绘图对象重置控件状态保存图像右键菜单SaveImage将当前显示的图像含绘图对象叠加保存为本地文件适应图像显示右键菜单AdaptiveDisplay自动调整图像缩放比例使图像完整适配控件窗口四、关键代码解析一绘图对象交互核心代码以圆形绘图对象的拖拽交互为例通过Thumb的DragDelta事件实现位置更新internal override void ThumbDrag(object sender, DragDeltaEventArgs e) { ThumbTag thumbTag (ThumbTag)(sender as HandleThumb).Tag; if (thumbTag ThumbTag.Center)// 中心手柄拖拽移动 { Vector pImgChanged PosToImageCoordinateVector, Point(new Point(e.HorizontalChange, e.VerticalChange)); Point pCenter Point.Add(new Point(mCenterX, mCenterY), pImgChanged); mCenterX pCenter.X; mCenterY pCenter.Y; UpdateShapePos();// 更新图形位置 OnDrag?.Invoke(CallBackType.OnDrag, this);// 触发拖拽回调 } else if (thumbTag ThumbTag.CenterRight)// 右侧手柄拖拽缩放半径 { double dRImgChange PosToImageCoordinatePoint, Point(new Point(e.HorizontalChange, e.HorizontalChange)).X; mRadius dRImgChange; mRadius Math.Max(mRadius, 0);// 半径不小于0 UpdateShapePos();// 更新图形尺寸 OnResize?.Invoke(CallBackType.OnResize, this);// 触发缩放回调 } }二Sobel边缘检测实现在圆形绘图对象拖拽回调中集成边缘检测private void DrawObjCallback(DrawingObject.CallBackType callBackType, DrawingObject drawingObject) { if (drawingObject is CircleDrawingObject circleObj SobelcheckBox.IsChecked true) { circleObj.GetDrawingObjectParam((int)CircleDrawingObject.Param.CenterX, out double dCenterX); circleObj.GetDrawingObjectParam((int)CircleDrawingObject.Param.CenterY, out double dCenterY); circleObj.GetDrawingObjectParam((int)CircleDrawingObject.Param.Radius, out double dR); if (_src null) { _src WindowControl.GetDisplayOpenCvSharp.Mat(); if (_src.Channels() 1) { OpenCvSharp.Cv2.CvtColor(_src, _src, OpenCvSharp.ColorConversionCodes.BGR2GRAY); WindowControl.Display(_src); } } OpenCvSharp.Mat sobelMat SobelMat(_src, new Point(dCenterX, dCenterY), dR); WindowControl.Display(sobelMat); } } // Sobel边缘检测核心方法 private OpenCvSharp.Mat SobelMat(OpenCvSharp.Mat mat, Point pCenter, double dR) { // 1. 创建掩码仅处理圆形区域内的图像 OpenCvSharp.Mat mask OpenCvSharp.Mat.Ones(mat.Size(), OpenCvSharp.MatType.CV_8UC1); OpenCvSharp.Cv2.Circle(mask, (int)pCenter.X, (int)pCenter.Y, (int)dR, OpenCvSharp.Scalar.All(0), -1); // 2. 提取圆形区域ROI感兴趣区域 OpenCvSharp.Mat matRoi OpenCvSharp.Mat.Zeros(mat.Size(), mat.Type()); mat.CopyTo(matRoi, mask); // 3. Sobel算子边缘检测 OpenCvSharp.Cv2.Scharr(matRoi, matRoi, -1, 1, 0); // 4. 与原图像叠加显示 OpenCvSharp.Mat outMat new OpenCvSharp.Mat(mat.Size(), mat.Type()); OpenCvSharp.Cv2.Add(mat, matRoi, outMat); return outMat; }三图像拖入加载实现通过WPF的DragDrop事件实现图像拖入加载private void rootCanvas_Drop(object sender, DragEventArgs e) { try { string fileName ((System.Array)e.Data.GetData(DataFormats.FileDrop)).GetValue(0).ToString(); LoadBitmapImage(fileName); // 适配图像显示尺寸 viewModel.UpdateImageCanvas(UpdateImageCanvasProperty.ControlSize, rootCanvas.ActualHeight, rootCanvas.ActualWidth); viewModel.UpdateImageCanvas(UpdateImageCanvasProperty.LeftTopPos, new Size(rootCanvas.ActualWidth, rootCanvas.ActualHeight)); ClearDisplay(); } catch (Exception ex) { MessageBox.Show(ex.Message); } }五、使用指南一环境配置安装.NET Framework 4.8运行时环境引用核心依赖库OpenCvSharp.dll、OpenCvSharp.Extensions.dll、WindowControl.dll配置项目目标框架为.NET Framework 4.8。二快速上手1. 控件初始化在WPF窗口中添加WindowControl控件WindowControl:WindowSmartControl x:NameWindowControl /2. 添加绘图对象// 添加圆形绘图对象 CircleDrawingObject circleObj new CircleDrawingObject(); circleObj.CreateDrawingObject(200, 200, 100); // 圆心(200,200)半径100 circleObj.AttachToWindowControl(WindowControl); circleObj.SetDrawingObjectCallback(DrawingObject.CallBackType.OnDrag, DrawObjCallback); circleObj.SetDrawingObjectParam((int)CircleDrawingObject.Param.Stroke, Brushes.Red); circleObj.SetDrawingObjectParam((int)CircleDrawingObject.Param.StrokeThickness, 2.0);3. 加载图像// 路径加载 WindowControl.LoadBitmapImage(C:\test.png); // 或拖入加载无需额外代码控件自动响应4. 启用Sobel边缘检测// 勾选Sobel复选框后拖拽圆形对象即可触发边缘检测 SobelcheckBox.IsChecked true;六、扩展与定制一自定义绘图对象继承DrawingObject基类重写CreateDrawingObject方法定义图形参数实现UpdateShapePos方法更新图形位置重写ThumbDrag方法实现自定义交互逻辑。二扩展图像处理功能可通过集成OpenCV的其他算法如Canny边缘检测、阈值分割、轮廓检测扩展控件功能示例如下// 扩展Canny边缘检测 private OpenCvSharp.Mat CannyMat(OpenCvSharp.Mat mat) { OpenCvSharp.Mat cannyMat new OpenCvSharp.Mat(); OpenCvSharp.Cv2.Canny(mat, cannyMat, 100, 200); return cannyMat; }七、注意事项确保OpenCvSharp相关依赖库与.NET Framework 4.8兼容绘图对象的交互操作仅在图像加载后生效处理大尺寸图像时建议关闭实时特效如Sobel检测以提升性能控件支持Windows系统暂不支持跨平台运行。八、版本迭代说明版本迭代内容2.0新增图像拖入显示功能优化绘图对象交互流畅度集成Sobel边缘检测支持多边形顶点动态添加1.0基础图像显示圆形、矩形、直线绘图对象基础拖拽缩放功能基于WPFOpencv 高级显示控件2.0 全新优化支持图像拖入显示使用wpf的adnoner和thumb实现可交互的绘图对象。