1. 模板工具增加标尺功能、增加键盘调节尺寸功能、增加修改尺寸功能
This commit is contained in:
cuibaocheng
parent
0c52ef774e
commit
e82b8178eb
@ -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>
|
||||
@ -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: "<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}
|
||||
] );
|
||||
}
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user