海康web3.0控件实现在摄像头窗口多边形绘图
1、设置多边形播放模式
/*
* eanbleDraw函数
* webVideoCtrl:初始化后的控件对象
* iWndIndex :窗口索引
* 注:预览模式表示禁用多边形绘图,多边形模式表示启用多边形绘图
*/
function eanbleDraw() {
let iWndIndex = 0;
let oWndInfo = webVideoCtrl.I_GetWindowStatus(iWndIndex ); // 获取当前窗口的信息
if(oWndInfo != null) {
let iRect = webVideoCtrl.I_SetPlayModeType(6);// 设置播放模式:0-预览模式、6-多边形模式
if( iRect === 0) {
console.log('启用多边形绘图成功');
addPolygon();
}
}
}
2、绘制多边形图形
/*
* addPolygon: 根据坐标点绘制图形
* 注:坐标点是窗口长宽标准化后的数据(0-1),连线避免交叉
*/
function addPolygon() {
let iWndIndex = 0;
let oWndInfo = webVideoCtrl.I_GetWindowStatus(iWndIndex );
if(oWndInfo != null ){
let szInfo = "<?xml version='1.0' encoding='utf-8'?>"+
+"<SnapPolygonList>"+
// 多变形图形1
+"<SnapPolygon>"+
+"<id>1</id>"+ // id: 1-32
+"<polygonType>1</polygonType>"+
+"<PointNumMax>17</PointNumMax>"+
+"<MinClosed>4</MinClosed>"+
+"<tips>1#name</tips>"+ // 图形提示内容
+"<isClosed>true</isClosed>"+ // 是否闭合, false可用鼠标在窗口自主绘制
+"<color><r>0</r><g>255</g><b>255</b></color>"+ // 多边形边框颜色
// 多边形坐标点集合, 坐标点注意排序,坐标点连线避免交叉
+"<pointList>"+
+"<point><x>0</x><y>0</y></point>"+
+"<point><x>1</x><y>0</y></point>"+
+"<point><x>0.5</x><y>0.5</y></point>"+
+"</pointList>"+
+"</SnapPolygon>"+
// 多边形图形2
+"<SnapPolygon>"+
+"<id>2</id>"+ // [1, 32]
+"<polygonType>1</polygonType>"+
+"<PointNumMax>17</PointNumMax>"+ // [MinClosed, 17]
+"<MinClosed>4</MinClosed>"+ // [4, 17]
+"<tips>2#name</tips>"+
+"<isClosed>true</isClosed>"+
+"<color><r>0</r><g>255</g><b>255</b></color>"+
+"<pointList>"+
+"<point><x>0.353754</x><y>0.551095</y></point>"+
+"<point><x>0.823123</x><y>0.543796</y></point>"+
+"<point><x>0.430330</x><y>0.316788</y></point>"+
+"</pointList>"+
+"</SnapPolygon>"+
+"</SnapPolygonList>";
// 设置多边形信息-iWndIndex:窗口索引,szInfo:XML 数据,一个或多个多边形
let iRect = webVideoCtrl.I_SetSnapPolygonInfo(iWndIndex, szInfo);
if(iRect === 0) {
console.log('绘制成功');
}else if(iRect == -1) {
console.log('绘制失败');
}else if(iRect == -2) {
console.log('参数错误');
}else if(iRect == -3){
console.log('图形个数达到上限');
}else if(iRect == -4){
console.log('图形已存在');
}
// 设置绘图模式- 绘图模式:-1-停止绘制,2-添加多边形,3-编辑多边形
webVideoCtrl.I_SetSnapDrawMode(iWndIndex ,2);
}
}
3、效果展示