diff --git a/src/main/resources/static/route/cardtemplate/save-cardtemplatearea.html b/src/main/resources/static/route/cardtemplate/save-cardtemplatearea.html
index c81428d..a992807 100644
--- a/src/main/resources/static/route/cardtemplate/save-cardtemplatearea.html
+++ b/src/main/resources/static/route/cardtemplate/save-cardtemplatearea.html
@@ -6,6 +6,7 @@
+
@@ -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;}
@@ -40,6 +44,10 @@
![]()
+
+
+
+
@@ -174,7 +182,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) {
@@ -222,12 +279,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) {
@@ -237,6 +295,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);
}
});
}
@@ -268,6 +343,39 @@
});
},
},
+ {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: "",
+ 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}
] );
}
@@ -381,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){
@@ -400,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);