1. 模板工具增加标尺功能、增加键盘调节尺寸功能、增加修改尺寸功能
This commit is contained in:
cuibaocheng
parent
0c52ef774e
commit
e82b8178eb
@ -6,6 +6,7 @@
|
|||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<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">
|
<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/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/layui/css/layui.css" media="all">
|
||||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||||
@ -28,6 +29,9 @@
|
|||||||
background-color:transparent !important;
|
background-color:transparent !important;
|
||||||
}
|
}
|
||||||
#toolbar{position:absolute;top:10px;z-index:88;}
|
#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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body id="pageArea" class="list">
|
<body id="pageArea" class="list">
|
||||||
@ -40,6 +44,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="canvas" style="margin-left:{{d.marginLeft}}px;width:{{d.picturesTemplateWidth}}px;height:{{d.picturesTemplateHeight}}px;">
|
<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=""/>
|
<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>
|
</div>
|
||||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||||
<script src="assets/js/vendor/safety/copy/clipboard.min.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);
|
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) {
|
if(!noChange) {
|
||||||
|
lineChange(id, h, w, x, y);
|
||||||
var formData = {templateAreaLeft : x , templateAreaTop : y , templateAreaHeight : h , templateAreaWidth : w };
|
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) {
|
top.restAjax.put(top.restAjax.path('api/picturestemplatearea/updatepicturestemplateareapoint/{picturesTemplateAreaId}', [id]), formData, null, function(code, data) {
|
||||||
if(data.data) {
|
if(data.data) {
|
||||||
@ -222,12 +279,13 @@
|
|||||||
layer.close(index);
|
layer.close(index);
|
||||||
top.dialog.msg("复制出一个新的区域", {
|
top.dialog.msg("复制出一个新的区域", {
|
||||||
time: 0,
|
time: 0,
|
||||||
btn: ["确定复制", "我再想想"],
|
area: ['450px', '90px'],
|
||||||
|
btn: ["确定复制", "确定并复制该区域尺寸","我再想想"],
|
||||||
shade: 0.3,
|
shade: 0.3,
|
||||||
yes: function (index) {
|
btn1: function (index) {
|
||||||
top.dialog.close(index);
|
top.dialog.close(index);
|
||||||
var layIndex;
|
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});
|
top.dialog.msg('复制成功', {time: 1000});
|
||||||
location.reload();
|
location.reload();
|
||||||
}, function (code, data) {
|
}, function (code, data) {
|
||||||
@ -237,6 +295,23 @@
|
|||||||
}, function () {
|
}, function () {
|
||||||
top.dialog.close(layIndex);
|
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}
|
{divider: true}
|
||||||
] );
|
] );
|
||||||
}
|
}
|
||||||
@ -381,6 +489,52 @@
|
|||||||
|
|
||||||
var currentFormData = new Map();
|
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
|
//修改区域点的x,y,width,height
|
||||||
$(document).on('mouseup', '#canvas', function(e){
|
$(document).on('mouseup', '#canvas', function(e){
|
||||||
if(lock == true){
|
if(lock == true){
|
||||||
@ -400,6 +554,9 @@
|
|||||||
h = $(this).height();
|
h = $(this).height();
|
||||||
x = $('#'+id).css("left");
|
x = $('#'+id).css("left");
|
||||||
y = $('#'+id).css("top");
|
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);
|
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 formData = {templateAreaLeft : x.replace("px","") , templateAreaTop : y.replace("px","") , templateAreaHeight : h , templateAreaWidth : w , id : id};
|
||||||
var oldData = currentFormData.get(id);
|
var oldData = currentFormData.get(id);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user