1. 模板工具增加标尺功能、增加键盘调节尺寸功能、增加修改尺寸功能
This commit is contained in:
cuibaocheng
parent
81b0cac76e
commit
5bd6f97396
@ -159,7 +159,7 @@ public interface IPicturesTemplateAreaService {
|
||||
|
||||
SuccessResultData<String > updatePicturesTemplateAreaPoint(String picturesTemplateAreaId, PicturesTemplateAreaPiointVO picturesTemplateAreaPiointVO) throws Exception;
|
||||
|
||||
SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource) throws Exception;
|
||||
SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource, Boolean copySize) throws Exception;
|
||||
|
||||
SuccessResult updatePicturesTemplateAreaPointModuleData(String picturesTemplateAreaId, String templateAreaModuleData) throws Exception;
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="assets/js/vendor/template/bootstrap.css" />
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
@ -26,6 +27,9 @@
|
||||
|
||||
#debug{position:absolute;right:10px;top:10px;z-index:88;border:1px solid #ccc;width:100px;height:100px;background:#fff;}
|
||||
#toolbar{position:absolute;left:10px;top:10px;z-index:88;}
|
||||
.line-t,.line-l,.line-r,.line-b{position: absolute;display: none;z-index: 1000000}
|
||||
.line-t,.line-b{border-top: 2px dashed #eee;width:100%;}
|
||||
.line-l,.line-r{width: 2px;box-sizing:border-box;border-right: 2px dashed #eee;height: 100%;top:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body id="pageArea" class="list">
|
||||
@ -36,6 +40,10 @@
|
||||
</div>
|
||||
<div id="canvas" style=" width:{{d.bigdataTemplateWidth}}px;height:{{d.bigdataTemplateHeight}}px;">
|
||||
<img id="imgId" height="100%" width="100%" src="route/file/download/false/{{d.bigdataTemplateBackgroundImage}}" alt=""/>
|
||||
<div class="line-t line"></div>
|
||||
<div class="line-l line"></div>
|
||||
<div class="line-b line"></div>
|
||||
<div class="line-r line"></div>
|
||||
</div>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
@ -164,8 +172,8 @@
|
||||
// 向右移动
|
||||
if (e.keyCode == 39 ){
|
||||
e.preventDefault();
|
||||
x = (x + 1) >= (dataFormData.picturesTemplateWidth - w ) ? ( dataFormData.picturesTemplateWidth - w + 1) : x + 1;
|
||||
if(x > (dataFormData.picturesTemplateWidth - w)) {
|
||||
x = (x + 1) >= (dataFormData.bigdataTemplateWidth - w ) ? ( dataFormData.bigdataTemplateWidth - w + 1) : x + 1;
|
||||
if(x > (dataFormData.bigdataTemplateWidth - w)) {
|
||||
layer.msg("已到右侧边缘");
|
||||
noChange = true;
|
||||
}else{
|
||||
@ -176,8 +184,8 @@
|
||||
// 向下移动
|
||||
if (e.keyCode == 40 ){
|
||||
e.preventDefault();
|
||||
y = (y + 1) >= (dataFormData.picturesTemplateHeight - h ) ? (dataFormData.picturesTemplateHeight - h + 1) : y + 1;
|
||||
if(y > (dataFormData.picturesTemplateHeight - h) ) {
|
||||
y = (y + 1) >= (dataFormData.bigdataTemplateHeight - h ) ? (dataFormData.bigdataTemplateHeight - h + 1) : y + 1;
|
||||
if(y > (dataFormData.bigdataTemplateHeight - h) ) {
|
||||
layer.msg("已到底部边缘");
|
||||
noChange = true;
|
||||
}else{
|
||||
@ -185,7 +193,56 @@
|
||||
console.log("向下移动1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// W.高度+1
|
||||
if (e.keyCode == 87 ){
|
||||
e.preventDefault();
|
||||
h = h + 1;
|
||||
if(h >= dataFormData.bigdataTemplateHeight) {
|
||||
layer.msg("超出最大高度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).height(h);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// S.高度-1
|
||||
if (e.keyCode == 83 ){
|
||||
e.preventDefault();
|
||||
h = h - 1;
|
||||
if(h >= dataFormData.bigdataTemplateHeight) {
|
||||
layer.msg("超出最大高度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).height(h);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// A.宽度-1
|
||||
if (e.keyCode == 65 ){
|
||||
e.preventDefault();
|
||||
w = w - 1;
|
||||
if(w >= dataFormData.bigdataTemplateWidth) {
|
||||
layer.msg("超出最大宽度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).width(w);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// D.宽度+1
|
||||
if (e.keyCode == 68 ){
|
||||
e.preventDefault();
|
||||
w = w + 1;
|
||||
if(w >= dataFormData.bigdataTemplateWidth) {
|
||||
layer.msg("超出最大宽度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).width(w);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
if(!noChange) {
|
||||
lineChange(id, h, w, x, y);
|
||||
var formData = {templateAreaLeft : x , templateAreaTop : y , templateAreaHeight : h , templateAreaWidth : w };
|
||||
top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/updatebigdatatemplateareapoint/{bigdataTemplateAreaId}', [id]), formData, null, function(code, data) {
|
||||
}, function(code, data) {
|
||||
@ -290,6 +347,40 @@
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '更改尺寸', action: function (e) {
|
||||
e.preventDefault();
|
||||
//当前区域的id
|
||||
var id = $('.box[rel=' + curNum + ']').attr("id");
|
||||
var x = Number($("#" + id).css("left").replace("px", ""));
|
||||
var y = Number($("#" + id).css("top").replace("px", ""));
|
||||
layer.open({
|
||||
id: 1,
|
||||
type: 1,
|
||||
area: ['450px', '200px'],
|
||||
shade: 0,
|
||||
title: '更改区域的高与宽',
|
||||
content: "<input type='text' class='form-control' readonly value='距离左侧 : " + x + "px' style='width:50%;float: left' ></input><input type='text' class='form-control' readonly value='距离顶部 : " + y + "px' style='width:50%;float: left' ></input><input id='heightText' type='number' class='form-control' value='" + $("#" + id).height() + "' placeholder='这里输入高度' style='width:50%;float: left' ></input><input id='widthText' type='number' class='form-control' value='" + $("#" + id).width() + "' placeholder='这里输入宽度' style='width:50%' ></input>",
|
||||
btn: ['确认', '取消'],
|
||||
yes: function (index1, layero) {
|
||||
//获取输入框里面的值
|
||||
var heightText = $("#heightText").val();
|
||||
var widthText = $("#widthText").val();
|
||||
if (Number(heightText) < dataFormData.bigdataTemplateHeight && Number(widthText) < dataFormData.bigdataTemplateWidth) {
|
||||
$("#" + id).width(widthText);
|
||||
$("#" + id).height(heightText);
|
||||
$("#" + id).click();
|
||||
} else {
|
||||
layer.msg("尺寸超出范围");
|
||||
}
|
||||
layer.close(index1);
|
||||
},
|
||||
no: function (index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{divider: true}
|
||||
] );
|
||||
}
|
||||
@ -372,6 +463,51 @@
|
||||
return l;
|
||||
}
|
||||
|
||||
function lineChange(id, height, width, left, top) {
|
||||
$('.line').show();
|
||||
$('.line-t').css({'borderColor': '#FFF'});
|
||||
$('.line-l').css({'borderColor': '#FFF'});
|
||||
$('.line-r').css({'borderColor': '#FFF'});
|
||||
$('.line-b').css({'borderColor': '#FFF'});
|
||||
$('.line-t').css({'top': top})
|
||||
$('.line-l').css({'left': left})
|
||||
$('.line-r').css({'left': (left + width) + 'px'})
|
||||
$('.line-b').css({'top': (top + height) + 'px'})
|
||||
var bottom = top + height;
|
||||
var right = left + width;
|
||||
// 判断哪个div的边线, 与当前的8条边线相交汇
|
||||
var boxArray = $(".box");
|
||||
for(var i = 0; i < boxArray.length; i++) {
|
||||
var box = boxArray[i]
|
||||
did = $(box).attr("id");
|
||||
w = $(box).width();
|
||||
h = $(box).height();
|
||||
x = $(box).css("left");
|
||||
y = $(box).css("top");
|
||||
x = Number(x.replace('px',''));
|
||||
y = Number(y.replace('px',''));
|
||||
r = x + w;
|
||||
b = y + h;
|
||||
if(id != did) {
|
||||
// 谁与当前上边重合
|
||||
if(top == y || top == b) {
|
||||
$('.line-t').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前下边重合
|
||||
if(bottom == y || bottom == b) {
|
||||
$('.line-b').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前左线重合
|
||||
if(left == x || left == r) {
|
||||
$('.line-l').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前右线重合
|
||||
if(right == x || right == r) {
|
||||
$('.line-r').css({'borderColor': 'red'});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//修改设备点的x,y,width,height
|
||||
$(document).on('mouseup', '#canvas', function(e){
|
||||
@ -389,6 +525,9 @@
|
||||
h = $(this).height();
|
||||
x = $('#'+id).css("left");
|
||||
y = $('#'+id).css("top");
|
||||
|
||||
lineChange(id, h, w, Number(x.replace('px','')), Number(y.replace('px','')));
|
||||
|
||||
console.log("x坐标:"+x.replace("px","")+"y坐标:"+y.replace("px","")+"宽度:"+w+"高度:"+h+"id:"+id);
|
||||
var formData = {templateAreaLeft : x.replace("px","") , templateAreaTop : y.replace("px","") , templateAreaHeight : h , templateAreaWidth : w };
|
||||
var loadLayerIndex;
|
||||
|
||||
@ -69,8 +69,8 @@ public class PicturesTemplateAreaController extends DefaultBaseController {
|
||||
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
|
||||
@PutMapping("copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}")
|
||||
@CheckRequestBodyAnnotation
|
||||
public SuccessResult copyPicturesTemplateAreaPoint(@PathVariable("picturesTemplateAreaId") String picturesTemplateAreaId, @PathVariable("templateAreaSource") String templateAreaSource) throws Exception {
|
||||
return picturesTemplateAreaService.copyPicturesTemplateAreaPoint(picturesTemplateAreaId, templateAreaSource);
|
||||
public SuccessResult copyPicturesTemplateAreaPoint(@PathVariable("picturesTemplateAreaId") String picturesTemplateAreaId, @PathVariable("templateAreaSource") String templateAreaSource, Boolean copySize) throws Exception {
|
||||
return picturesTemplateAreaService.copyPicturesTemplateAreaPoint(picturesTemplateAreaId, templateAreaSource, copySize);
|
||||
}
|
||||
|
||||
@ApiOperation(value = "修改大数据模块区域", notes = "修改大数据模块区域接口")
|
||||
|
||||
@ -377,7 +377,7 @@ public class PicturesTemplateAreaServiceImpl extends DefaultBaseService implemen
|
||||
}
|
||||
|
||||
@Override
|
||||
public SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource) throws Exception {
|
||||
public SuccessResult copyPicturesTemplateAreaPoint(String picturesTemplateAreaId, String templateAreaSource, Boolean copySize) throws Exception {
|
||||
PicturesTemplateAreaDTO dto = getPicturesTemplateAreaById(picturesTemplateAreaId);
|
||||
if(dto == null) {
|
||||
throw new UpdateException("需要复制的区域不存在");
|
||||
@ -408,8 +408,11 @@ public class PicturesTemplateAreaServiceImpl extends DefaultBaseService implemen
|
||||
dto.setTemplateAreaDown(0.0);
|
||||
dto.setTemplateAreaRight(0.0);
|
||||
dto.setTemplateAreaTop(10.0);
|
||||
// 不复制当前尺寸
|
||||
if(!copySize) {
|
||||
dto.setTemplateAreaHeight(300.0);
|
||||
dto.setTemplateAreaWidth(300.0);
|
||||
}
|
||||
dto.setTemplateAreaSource(templateAreaSource);
|
||||
dto.setPicturesTemplateAreaId(newPicturesTemplateAreaId);
|
||||
Map<String, Object> params = HashMapUtil.beanToMap(dto);
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="stylesheet" href="assets/js/vendor/template/bootstrap.css" />
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
@ -28,6 +29,9 @@
|
||||
background-color:transparent !important;
|
||||
}
|
||||
#toolbar{position:absolute;top:10px;z-index:88;}
|
||||
.line-t,.line-l,.line-r,.line-b{position: absolute;display: none;z-index: 1000000}
|
||||
.line-t,.line-b{border-top: 2px dashed #eee;width:100%;}
|
||||
.line-l,.line-r{width: 2px;box-sizing:border-box;border-right: 2px dashed #eee;height: 100%;top:0;}
|
||||
</style>
|
||||
</head>
|
||||
<body id="pageArea" class="list">
|
||||
@ -40,6 +44,10 @@
|
||||
</div>
|
||||
<div id="canvas" style="margin-left:{{d.marginLeft}}px;width:{{d.picturesTemplateWidth}}px;height:{{d.picturesTemplateHeight}}px;">
|
||||
<img id="imgId" height="100%" width="100%" alt=""/>
|
||||
<div class="line-t line"></div>
|
||||
<div class="line-l line"></div>
|
||||
<div class="line-b line"></div>
|
||||
<div class="line-r line"></div>
|
||||
</div>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script src="assets/js/vendor/safety/copy/clipboard.min.js"></script>
|
||||
@ -173,7 +181,56 @@
|
||||
console.log("向下移动1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// W.高度+1
|
||||
if (e.keyCode == 87 ){
|
||||
e.preventDefault();
|
||||
h = h + 1;
|
||||
if(h >= dataFormData.picturesTemplateHeight) {
|
||||
layer.msg("超出最大高度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).height(h);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// S.高度-1
|
||||
if (e.keyCode == 83 ){
|
||||
e.preventDefault();
|
||||
h = h - 1;
|
||||
if(h >= dataFormData.picturesTemplateHeight) {
|
||||
layer.msg("超出最大高度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).height(h);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// A.宽度-1
|
||||
if (e.keyCode == 65 ){
|
||||
e.preventDefault();
|
||||
w = w - 1;
|
||||
if(w >= dataFormData.picturesTemplateWidth) {
|
||||
layer.msg("超出最大宽度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).width(w);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
// D.宽度+1
|
||||
if (e.keyCode == 68 ){
|
||||
e.preventDefault();
|
||||
w = w + 1;
|
||||
if(w >= dataFormData.picturesTemplateWidth) {
|
||||
layer.msg("超出最大宽度");
|
||||
noChange = true;
|
||||
}else{
|
||||
$('#'+id).width(w);
|
||||
console.log("高度+1: x坐标:"+ x +"y坐标:"+ y +"宽度:"+ w +"高度:"+ h +"id:"+ id);
|
||||
}
|
||||
}
|
||||
if(!noChange) {
|
||||
lineChange(id, h, w, x, y);
|
||||
var formData = {templateAreaLeft : x , templateAreaTop : y , templateAreaHeight : h , templateAreaWidth : w };
|
||||
top.restAjax.put(top.restAjax.path('api/picturestemplatearea/updatepicturestemplateareapoint/{picturesTemplateAreaId}', [id]), formData, null, function(code, data) {
|
||||
if(data.data) {
|
||||
@ -221,12 +278,13 @@
|
||||
layer.close(index);
|
||||
top.dialog.msg("复制出一个新的区域", {
|
||||
time: 0,
|
||||
btn: ["确定复制", "我再想想"],
|
||||
area: ['450px', '90px'],
|
||||
btn: ["确定复制", "确定并复制该区域尺寸","我再想想"],
|
||||
shade: 0.3,
|
||||
yes: function (index) {
|
||||
btn1: function (index) {
|
||||
top.dialog.close(index);
|
||||
var layIndex;
|
||||
top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}', [id, code]), {}, null, function (code, data) {
|
||||
top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}?copySize=false', [id, code]), {}, null, function (code, data) {
|
||||
top.dialog.msg('复制成功', {time: 1000});
|
||||
location.reload();
|
||||
}, function (code, data) {
|
||||
@ -236,6 +294,23 @@
|
||||
}, function () {
|
||||
top.dialog.close(layIndex);
|
||||
});
|
||||
},
|
||||
btn2: function (index) {
|
||||
top.dialog.close(index);
|
||||
var layIndex;
|
||||
top.restAjax.put(top.restAjax.path('api/picturestemplatearea/copypicturestemplatearea/{picturesTemplateAreaId}/{templateAreaSource}?copySize=true', [id, code]), {}, null, function (code, data) {
|
||||
top.dialog.msg('复制成功', {time: 1000});
|
||||
location.reload();
|
||||
}, function (code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
}, function () {
|
||||
layIndex = top.dialog.msg('正在复制中...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function () {
|
||||
top.dialog.close(layIndex);
|
||||
});
|
||||
},
|
||||
btn3: function (index) {
|
||||
top.dialog.close(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -267,6 +342,40 @@
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '更改尺寸', action: function (e) {
|
||||
e.preventDefault();
|
||||
//当前区域的id
|
||||
var id = $('.box[rel=' + curNum + ']').attr("id");
|
||||
var x = Number($("#" + id).css("left").replace("px", ""));
|
||||
var y = Number($("#" + id).css("top").replace("px", ""));
|
||||
layer.open({
|
||||
id: 1,
|
||||
type: 1,
|
||||
area: ['450px', '200px'],
|
||||
shade: 0,
|
||||
title: '更改区域的高与宽',
|
||||
content: "<input type='text' class='form-control' readonly value='距离左侧 : " + x + "px' style='width:50%;float: left' ></input><input type='text' class='form-control' readonly value='距离顶部 : " + y + "px' style='width:50%;float: left' ></input><input id='heightText' type='number' class='form-control' value='" + $("#" + id).height() + "' placeholder='这里输入高度' style='width:50%;float: left' ></input><input id='widthText' type='number' class='form-control' value='" + $("#" + id).width() + "' placeholder='这里输入宽度' style='width:50%' ></input>",
|
||||
btn: ['确认', '取消'],
|
||||
yes: function (index1, layero) {
|
||||
//获取输入框里面的值
|
||||
var heightText = $("#heightText").val();
|
||||
var widthText = $("#widthText").val();
|
||||
if (Number(heightText) < dataFormData.picturesTemplateHeight && Number(widthText) < dataFormData.picturesTemplateWidth) {
|
||||
$("#" + id).width(widthText);
|
||||
$("#" + id).height(heightText);
|
||||
$("#" + id).click();
|
||||
} else {
|
||||
layer.msg("尺寸超出范围");
|
||||
}
|
||||
layer.close(index1);
|
||||
},
|
||||
no: function (index, layero) {
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{divider: true}
|
||||
] );
|
||||
}
|
||||
@ -380,6 +489,52 @@
|
||||
|
||||
var currentFormData = new Map();
|
||||
|
||||
function lineChange(id, height, width, left, top) {
|
||||
$('.line').show();
|
||||
$('.line-t').css({'borderColor': '#FFF'});
|
||||
$('.line-l').css({'borderColor': '#FFF'});
|
||||
$('.line-r').css({'borderColor': '#FFF'});
|
||||
$('.line-b').css({'borderColor': '#FFF'});
|
||||
$('.line-t').css({'top': top})
|
||||
$('.line-l').css({'left': left})
|
||||
$('.line-r').css({'left': (left + width) + 'px'})
|
||||
$('.line-b').css({'top': (top + height) + 'px'})
|
||||
var bottom = top + height;
|
||||
var right = left + width;
|
||||
// 判断哪个div的边线, 与当前的8条边线相交汇
|
||||
var boxArray = $(".box");
|
||||
for(var i = 0; i < boxArray.length; i++) {
|
||||
var box = boxArray[i]
|
||||
did = $(box).attr("id");
|
||||
w = $(box).width();
|
||||
h = $(box).height();
|
||||
x = $(box).css("left");
|
||||
y = $(box).css("top");
|
||||
x = Number(x.replace('px',''));
|
||||
y = Number(y.replace('px',''));
|
||||
r = x + w;
|
||||
b = y + h;
|
||||
if(id != did) {
|
||||
// 谁与当前上边重合
|
||||
if(top == y || top == b) {
|
||||
$('.line-t').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前下边重合
|
||||
if(bottom == y || bottom == b) {
|
||||
$('.line-b').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前左线重合
|
||||
if(left == x || left == r) {
|
||||
$('.line-l').css({'borderColor': 'red'});
|
||||
}
|
||||
// 谁与当前右线重合
|
||||
if(right == x || right == r) {
|
||||
$('.line-r').css({'borderColor': 'red'});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//修改区域点的x,y,width,height
|
||||
$(document).on('mouseup', '#canvas', function(e){
|
||||
if(lock == true){
|
||||
@ -399,6 +554,9 @@
|
||||
h = $(this).height();
|
||||
x = $('#'+id).css("left");
|
||||
y = $('#'+id).css("top");
|
||||
|
||||
lineChange(id, h, w, Number(x.replace('px','')), Number(y.replace('px','')));
|
||||
|
||||
console.log("x坐标:"+x.replace("px","")+"y坐标:"+y.replace("px","")+"宽度:"+w+"高度:"+h+"id:"+id);
|
||||
var formData = {templateAreaLeft : x.replace("px","") , templateAreaTop : y.replace("px","") , templateAreaHeight : h , templateAreaWidth : w , id : id};
|
||||
var oldData = currentFormData.get(id);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user