OpenCV.js 核心数据结构实战指南Point、Scalar、Size、Circle、Rect 与 RotatedRect 完整解析【免费下载链接】opencvOpen Source Computer Vision Library项目地址: https://gitcode.com/GitHub_Trending/opencv31/opencv本篇指南基于 OpenCV.js 官方教程 js_some_data_structures 展开系统讲解 OpenCV.js 中最常用的 6 种基础数据结构Point、Scalar、Size、Circle、Rect、RotatedRect的两种构造方式、各字段含义与取值约定并结合 modules/js/src/core_bindings.cpp 中的 Emscripten 绑定源码印证每种结构在 JavaScript 侧的真实表现形式帮助你在 Web 端图像绘制、轮廓分析、目标跟踪等场景中正确创建与使用这些几何类型。一、总览JS 中的两类构造形态OpenCV.js 通过 Emscripten 将 C 的cv::类型映射到 JS 的cv.命名空间下。这些映射结构在 JavaScript 中分为两种类型这是理解全部数据结构的钥匙数组类型array type只有Scalar一种它在 JS 中就是一个普通数组对象类型object typePoint、Size、Circle、Rect、RotatedRect 均为 JS 对象由 Emscripten 的value_object机制生成。每种结构都支持两种完全等价的构造方式一种是通过new cv.Xxx(...)调用构造函数另一种是直接写普通 JS 字面量对象或数组。这一设计的意义在于许多 OpenCV.js 函数直接返回这类结构如轮廓检测返回的Rect、旋转矩形检测返回的RotatedRect它们本质就是普通 JS 对象因此你自己用字面量构造的值也能作为参数传回给 OpenCV.js 函数两种形态互通。从源码结构看这些类型的字段绑定集中在 modules/js/src/core_bindings.cpp 中使用宏统一注册例如#define EMSCRIPTEN_CV_SIZE(type) \ emscripten::value_objecttype(#type) \ .field(width, type::width) \ .field(height, type::height); #define EMSCRIPTEN_CV_POINT(type) \ emscripten::value_objecttype(#type) \ .field(x, type::x) \ .field(y, type::y); #define EMSCRIPTEN_CV_RECT(type, name) \ emscripten::value_objectcv::Rect_type (name) \ .field(x, cv::Rect_type::x) \ .field(y, cv::Rect_type::y) \ .field(width, cv::Rect_type::width) \ .field(height, cv::Rect_type::height);这些.field(...)声明直接决定了 JS 侧对象的属性名——width、height、x、y等字段名与文档一致且同时映射到 C 类型的同名成员这是对象字面量可以直接当参数用的底层原因。二、Point二维点点是一切几何操作的原子单位。注意OpenCV 的坐标原点位于图像的左上角x 轴向右、y 轴向下这与数学坐标系相反读坐标时务必牢记。两种等价构造方式// 方式一构造函数 let point new cv.Point(x, y); // 方式二对象字面量 let point {x: x, y: y};参数含义x点的 x 坐标原点为图像左上角y点的 y 坐标对应的绑定注册为EMSCRIPTEN_CV_POINT(Point)modules/js/src/core_bindings.cpp宏同样用于Point2f、Point3f即浮点版本的点结构字段完全相同。仓库教程资源中的 js_contour_features_boundingRect.html 就展示了典型用法由Rect计算点坐标后new cv.Point(rect.x, rect.y)构造绘制锚点。三、Scalar标量颜色值载体Scalar 在 JavaScript 中是数组类型这是它与其余所有结构的最大区别。它常用来表示颜色通道顺序为 BGR(A)。两种等价构造方式// 方式一构造函数 let scalar new cv.Scalar(R, G, B, Alpha); // 方式二数组字面量 let scalar [R, G, B, Alpha];参数含义R红色通道像素值G绿色通道像素值B蓝色通道像素值Alphaalpha 通道像素值源码中 Scalar 通过emscripten::value_arraycv::Scalar_double(Scalar)注册并绑定 4 个索引元素modules/js/src/core_bindings.cpp这与文档Scalar 是数组类型的表述完全吻合——它本质上是一个cv::Scalar_double的数组视图。因此在 JS 侧你可以直接按索引访问scalar[0]~scalar[3]。实际使用非常频繁例如 js_camshift.html 中用new cv.Scalar(30, 30, 0)与new cv.Scalar(180, 180, 180)定义颜色追踪的上下界js_basic_ops_copymakeborder.html 中用new cv.Scalar(255, 0, 0, 255)指定边框颜色。四、Size尺寸Size 表示宽与高两个维度常见于 Mat 尺寸、RotatedRect 的 size 字段等场景。两种等价构造方式// 方式一构造函数 let size new cv.Size(width, height); // 方式二对象字面量 let size {width: width, height: height};参数含义width宽度height高度注册宏EMSCRIPTEN_CV_SIZE同时作用于Size与Size2fmodules/js/src/core_bindings.cpp即浮点尺寸Size2f拥有相同的width/height字段结构。五、Circle圆Circle 由圆心与半径定义常用于cv.minEnclosingCircle等轮廓拟合结果的表示与绘制cv.circle的底层参数即由此而来。两种等价构造方式// 方式一构造函数 let circle new cv.Circle(center, radius); // 方式二对象字面量 let circle {center: center, radius: radius};参数含义center圆心Point 类型radius圆的半径值得注意的是源码中 Circle 绑定的是辅助类型binding_utils::Circlemodules/js/src/core_bindings.cpp字段仍为center与radius与文档参数一一对应。六、Rect轴对齐矩形Rect 是最常用的几何结构之一ROI 裁剪、轮廓外接矩形boundingRect、目标跟踪窗口都依赖它。两种等价构造方式// 方式一构造函数 let rect new cv.Rect(x, y, width, height); // 方式二对象字面量 let rect {x: x, y: y, width: width, height: height};参数含义x矩形左上角顶点的 x 坐标y矩形左上角顶点的 y 坐标width矩形宽度height矩形高度关键约定x、y是左上角顶点坐标而不是中心点——这与 RotatedRect 的center约定不同混用时容易出错。源码中EMSCRIPTEN_CV_RECT宏还同时注册了Rect2f、Rect2d两个浮点变体modules/js/src/core_bindings.cpp 对应 modules/js/src/core_bindings.cpp字段结构完全相同。教程资源 js_basic_ops_roi.html 展示了let rect new cv.Rect(100, 100, 200, 200)用于定义图像 ROI 的典型写法。七、RotatedRect旋转矩形及其两个派生函数RotatedRect 表示一个可旋转的矩形由中心点、尺寸和旋转角三元组定义是cv.minAreaRect最小外接旋转矩形等轮廓分析函数的返回类型。两种等价构造方式// 方式一构造函数 let rotatedRect new cv.RotatedRect(center, size, angle); // 方式二对象字面量 let rotatedRect {center: center, size: size, angle: angle};参数含义center矩形的质心mass centersize矩形的宽和高Size 类型angle顺时针方向的旋转角当角度为 0、90、180、270 等整 90 度时旋转矩形退化为正放矩形绑定源码中 RotatedRect 的三个字段逐一映射modules/js/src/core_bindings.cppemscripten::value_objectcv::RotatedRect(RotatedRect) .field(center, cv::RotatedRect::center) .field(size, cv::RotatedRect::size) .field(angle, cv::RotatedRect::angle);7.1 获取旋转矩形的 4 个顶点cv.RotatedRect.points使用函数cv.RotatedRect.points(rotatedRect)传入旋转矩形返回其 4 个顶点组成的数组let vertices cv.RotatedRect.points(rotatedRect); let point1 vertices[0]; let point2 vertices[1]; let point3 vertices[2]; let point4 vertices[3];param rotatedRect旋转矩形。返回的每个顶点是Point2f类型的点浮点坐标可用cv.polylines等在图像上描出旋转后的矩形轮廓。从源码结构看该功能的底层实现是binding_utils::rotatedRectPointsmodules/js/src/core_bindings.cpp调用 C 侧obj.points(points)得到cv::Point2f points[4]再逐个 push 进 Emscripten 数组返回因此 JS 侧拿到的一定是长度 4 的数组元素可直接按vertices[0..3]取用。该函数同时还注册为boxPoints别名modules/js/src/core_bindings.cpp。7.2 获取旋转矩形的外接正放矩形cv.RotatedRect.boundingRect使用函数cv.RotatedRect.boundingRect(rotatedRect)let boundingRect cv.RotatedRect.boundingRect(rotatedRect);param rotatedRect旋转矩形。返回值是包围该旋转矩形的轴对齐 Rect整数坐标可用于后续MatROI 裁剪、cv.rectangle绘制等只接受正放矩形的场景。对应底层绑定为rotatedRectBoundingRect返回整型Rect与rotatedRectBoundingRect2f返回Rect2fmodules/js/src/core_bindings.cpp二者分别调用 C 的obj.boundingRect()与obj.boundingRect2f()区别仅在于坐标取整精度。实践建议当RotatedRect需要喂给要求整型Rect的 API 时如Mat的ROI构造函数先经boundingRect转换当只需要在画布上画出精确的旋转轮廓时直接取points的四点绘制多边形更精确。八、六大结构速查表结构JS 类型构造方式一构造方式二字段Point对象new cv.Point(x, y){x: x, y: y}x, yScalar数组new cv.Scalar(R, G, B, Alpha)[R, G, B, Alpha]索引 0~3Size对象new cv.Size(width, height){width, height}width, heightCircle对象new cv.Circle(center, radius){center, radius}center, radiusRect对象new cv.Rect(x, y, width, height){x, y, width, height}x, y左上角, width, heightRotatedRect对象new cv.RotatedRect(center, size, angle){center, size, angle}center, size, angle顺时针九、小结除 Scalar 为数组外其余结构均为对象且都支持构造函数 / 字面量两种等价写法可自由混用坐标系统一以图像左上角为原点Rect的x、y是左上角坐标RotatedRect的center是质心坐标二者语义不同RotatedRect的两个静态工具函数points4 顶点与boundingRect外接正放矩形是轮廓分析与绘制的关键桥梁其底层实现在 modules/js/src/core_bindings.cpp 中均可追溯更丰富的实战上下文可参考仓库教程资源目录 doc/js_tutorials/js_assets 下各示例页面如 js_contour_features_minAreaRect.html 演示了从轮廓到RotatedRect再到绘制的完整链路。【免费下载链接】opencvOpen Source Computer Vision Library项目地址: https://gitcode.com/GitHub_Trending/opencv31/opencv创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考