海康web3.0控件实现在摄像头窗口多边形绘图

海康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、效果展示