WPF 打造工业级图像控件：支持海康相机与 ROI 框选

小码编匠
127 阅读4分钟

前言

工业视觉、智能检测或安防监控等场景中，实时图像显示与交互是软件系统的核心功能之一。如何高效地加载相机画面、支持缩放平移、并允许用户框选感兴趣区域（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 风格的数据驱动。

GitHub：github.com/jtsgdytq/Co…

总结

项目虽处于早期阶段，但架构清晰、扩展性强。CameraBox 控件的设计体现了良好的封装思想——既满足当前图像显示与 ROI 选择需求，又为未来集成 OpenCV 图像处理、多相机切换、标定等功能打下基础。对于从事机器视觉、工业自动化或智能监控系统开发的工程师来说，它提供了一个实用且可复用的 UI 基石。后续若加入图像缓存、帧率控制、ROI 持久化等功能，将更具工程价值。

关键词

WPF、CameraBox、ModbusRTU、海康相机、虚拟相机、图像显示、ROI选择、自定义控件、工业视觉、MVVM

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！

avatar
文章
阅读
粉丝