92 lines
3.3 KiB
Plaintext
92 lines
3.3 KiB
Plaintext
<%@ 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">×</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>
|