WPF 打造工业级图像控件：支持海康相机与 ROI 框选
前言
工业视觉、智能检测或安防监控等场景中，实时图像显示与交互是软件系统的核心功能之一。如何高效地加载相机画面、支持缩放平移、并允许用户框选感兴趣区域（ROI），直接影响操作体验和系统实用性。
本文介绍一个基于 WPF 开发的图像显示控件项目，它不仅支持本地图片读取，还能接入海康威视相机或虚拟仿真相机，并通过自定义的 CameraBox 控件实现流畅的图像浏览与矩形选择功能。
项目介绍
项目采用模块化架构设计，命名空间清晰划分了登录、主界面、运行逻辑、硬件抽象、数据库、日志等模块。核心目标是开发一个可扩展的图像处理平台，初期聚焦于图像显示与基础交互。
通过 Company.Hardware 下的 Hik（海康）和 Emulation（虚拟相机）模块，系统既能连接真实设备，也能在无硬件环境下进行调试。而 UI 层则封装了高度复用的 CameraBox 控件，为上层应用提供统一的图像展示接口。
项目功能
1、支持从本地图像文件加载并显示图片，便于离线测试；
2、可连接海康威视网络相机，实时获取视频流（需配合 SDK 或 RTSP 解码）；
3、提供虚拟相机模拟模块，用于开发阶段无需依赖物理设备；
4、CameraBox 控件支持鼠标滚轮缩放、右键拖拽平移图像；
5、左键拖动可绘制矩形框，实时显示宽高尺寸，并触发 RectChange 事件供业务层处理 ROI 数据。
项目特点
整个项目最突出的特点是 **"硬件解耦 + UI 复用"**。相机相关逻辑被抽象到独立模块，上层应用只需调用统一接口，切换真实相机或虚拟源几乎无需修改 UI 代码。
而 CameraBox 控件本身是一个完整的 UserControl，通过 DependencyProperty 暴露 ImageSource 和 IsRectSelect 等属性，外部可通过数据绑定动态更新图像。
更巧妙的是，它利用 WPF 的路由事件机制，将用户框选的矩形坐标、缩放比例等信息打包成 RectEventArgs 向上传递，使得业务逻辑能精准响应交互行为，而不侵入控件内部实现。
项目技术
项目基于 WPF，未依赖第三方 UI 库，保证轻量与可控性。
图像显示通过 Image 控件实现，变换操作（缩放、平移）借助 ScaleTransform 与 TranslateTransform 组合完成，性能良好。
交互逻辑全部在 XAML 后台代码中处理，包括鼠标按下、移动、滚轮等事件，确保响应及时。
项目代码
private void SetTransform() { TransformGroup.Children.Add(_scaleTransform); TransformGroup.Children.Add(_translateTransform); imagebox.RenderTransform = TransformGroup; _viewportWidth=(int)viewport.ActualWidth; _viewportHeight=(int)viewport.ActualHeight; imageboxWidth=(int)imagebox.ActualWidth; imageboxHeight=(int)imagebox.ActualHeight; //缩放比例计算 _scale = Math.Min((double)_viewportWidth / imageboxWidth, (double)_viewportHeight / imageboxHeight); _scaleTransform.ScaleX = _scale; _scaleTransform.ScaleY = _scale; //平移计算 var translateX = (_viewportWidth - imageboxWidth * _scale) / 2; var translateY = (_viewportHeight - imageboxHeight * _scale) / 2; _translateTransform.X = translateX; _translateTransform.Y = translateY; }项目效果
可先通过登录界面进入主系统。在主界面中嵌入的 CameraBox 控件会根据绑定的图像源自动渲染画面。当加载本地图片或接收到相机帧时，图像会自适应居中显示。可用鼠标滚轮放大缩小，右键按住拖动查看局部细节，左键拖拽则会出现一个红色矩形框，右下角实时显示当前选区的宽高。一旦松开鼠标，RectChange 事件被触发，上层 ViewModel 可捕获该区域坐标，用于后续分析或配置。
项目源码
源码结构高度模块化，关键部分如下：
Company.Application.UI.Controls：包含 CameraBox.xaml 及其后台逻辑，是图像交互的核心；
Company.Hardware.Hik 与 Company.Hardware.Camera.Emulation：分别实现海康相机接入与虚拟图像生成；
Company.Application.Main/Run：主程序入口，负责初始化硬件、加载 UI；
Company.Application.Login：支持跳过重复硬件加载，提升调试效率。
所有图像数据最终通过绑定 ImageSource 属性传递给 CameraBox，实现 MVVM 风格的数据驱动。
总结
项目虽处于早期阶段，但架构清晰、扩展性强。CameraBox 控件的设计体现了良好的封装思想——既满足当前图像显示与 ROI 选择需求，又为未来集成 OpenCV 图像处理、多相机切换、标定等功能打下基础。对于从事机器视觉、工业自动化或智能监控系统开发的工程师来说，它提供了一个实用且可复用的 UI 基石。后续若加入图像缓存、帧率控制、ROI 持久化等功能，将更具工程价值。