first commit

WebRoot/jsp/work/showCameraVideo4visionAreas.jsp

@@ -0,0 +1,91 @@
+<%@ page language="java" pageEncoding="UTF-8" %>
+<style type="text/css">
+    .select2-container .select2-selection--single {
+        height: 34px;
+        line-height: 34px;
+    }
+
+    .select2-selection__arrow {
+        margin-top: 3px;
+    }
+</style>
+<div class="modal fade" id="visionAreasModal">
+    <div>
+        <div class="modal-content" id="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">选择视野区域</h4>
+            </div>
+            <div class="modal-body" style="width: 1660px;height: 740px">
+                <div id="show_visionAreas"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" onclick="visionAreasPointList();">确定</button>
+                <button type="button" class="btn btn-default" onclick="visionAreasReDo();">重置</button>
+                <button type="button" class="btn btn-default" onclick="closeModal('visionAreasModal');">关闭</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+
+<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/penCutout/penCutout.js"
+        charset="utf-8"></script>
+<script type="text/javascript">
+
+    let visionAreaspenCutout  = new penCutout();
+    $(function () {
+        let img = "<%=request.getContextPath()%>/IMG/main_bg_hqaq_1.png";
+        let imgType = "${layer}";
+        let height=667;
+        let width=642;
+        if(imgType=="2"){
+            img = "<%=request.getContextPath()%>/IMG/main_bg_hqaq_2.png";
+            width = 637;
+            height = 814;
+        }
+        let defaultPoints = new Array();
+        let defaultPoint = $('#visionAreas').val();
+        if(defaultPoint!=null && defaultPoint!=''){
+            let points = defaultPoint.split(";")
+            $.each(points,function(key,val){
+                //回调函数有两个参数,第一个是元素索引,第二个为当前值
+                let point = val.split(",");
+                let p = new Object();
+                p.pointx = point[0];
+                p.pointy = point[1];
+                defaultPoints.push(p)
+            });
+        }
+        visionAreaspenCutout.init({
+            drawPanel: "show_visionAreas",
+            //抠图图片src
+            imgSrc: img,
+            //抠图完成填充背景图片（默认）
+            imgBackSrc: img,
+            //钢笔色
+            penColor: "#0087C4",
+            penBgColor: 'rgba(0,102,255,0.30)',
+            //初始话钢笔抠图坐标集合
+            defaultPointList: defaultPoints,
+            width: width,
+            height: height
+        });
+    })
+    function visionAreasPointList(){
+        let points = visionAreaspenCutout.can.pointList;
+        let visionAreas = "";
+        $.each(points,function(key,val){
+            //回调函数有两个参数,第一个是元素索引,第二个为当前值
+            visionAreas = visionAreas+val.pointx+","+val.pointy+";";
+        });
+        $('#visionAreas').val(visionAreas);
+        closeModal('visionAreasModal');
+    }
+    function visionAreasReDo(){
+        visionAreaspenCutout.ReDo();
+    }
+
+</script>