Commit 43e16b40 by 孙龙
parents d3f87f53 9ff4d049
...@@ -8715,7 +8715,7 @@ body.md-skin { ...@@ -8715,7 +8715,7 @@ body.md-skin {
} }
.tag-content .tag-edit .edit-value { .tag-content .tag-edit .edit-value {
margin-top: -250px; margin-top: 20px;
position: fixed; position: fixed;
width: 410px; width: 410px;
min-height: 300px; min-height: 300px;
...@@ -8755,11 +8755,10 @@ body.md-skin { ...@@ -8755,11 +8755,10 @@ body.md-skin {
.lineit.huabuitem::after{ .lineit.huabuitem::after{
content:" "; content:" ";
float: right; float: right;
width:calc( 100% + 30px ); width:100%;
height:calc( 100% + 30px ); height:calc( 100% + 16px );
border:1px dashed rgba(0,0,0,0); border:1px dashed rgba(0,0,0,0);
margin-top: -15px; margin-top: -8px;
margin-right: -15px;
} }
/* .huabuitem.act::after{ /* .huabuitem.act::after{
content:" "; content:" ";
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
var tag={ var tag={
hbisAct:0,//是否画布区域 hbisAct:0,//是否画布区域
isClick:0, isClick:0,
step_:2,//按键移动速度
init:function(){ init:function(){
if($("#templateid").val()){ if($("#templateid").val()){
...@@ -279,7 +280,65 @@ var tag={ ...@@ -279,7 +280,65 @@ var tag={
$("body").on("mousemove","textarea",function(){ $("body").on("mousemove","textarea",function(){
$(this).focus() $(this).focus()
}) })
//按住键盘上下左右键移动当前画布工具
$(document).keydown(function(event){
if(!tag.hbisAct){return;}
var step_=tag.step_;
var keyNum = event.which; //获取键值
var Item = $('.huabuitem.act'); //要移动的元素
var width_=$(".edit-con").width(),height_=$(".edit-con").height();
switch(keyNum){ //判断按键
case 37:
event.preventDefault();
Item.css({left:'-='+step_+'px'});
var left_=Item.position().left;
if(left_<=0){
left_=0;
Item.css({left:0});
}
Item.attr("x",left_);
$(".tools.act .zbx").val(left_)
break;
case 38:
event.preventDefault();
Item.css({top:'-='+step_+'px'});
var left_=Item.position().top;
if(left_<=0){
left_=0;
Item.css({top:0});
}
Item.attr("y",left_);
$(".tools.act .zby").val(left_)
break;
case 39:
event.preventDefault();
Item.css({left:'+='+step_+'px'});
var left_=Item.position().left;
if(left_>=width_-Item.width()){
left_=width_-Item.width();
Item.css({left:left_});
}
Item.attr("x",left_);
$(".tools.act .zbx").val(left_)
break;
case 40:
event.preventDefault();
Item.css({top:'+='+step_+'px'});
var left_=Item.position().top;
if(left_>=height_-Item.height()){
left_=height_-Item.height();
Item.css({top:left_});
}
Item.attr("y",left_);
$(".tools.act .zby").val(left_)
break;
default:
break;
}
});
//监听属性赋值 //监听属性赋值
$(document).on("input propertychange",".tools.act select,.tools.act input",function(){ $(document).on("input propertychange",".tools.act select,.tools.act input",function(){
var ele=$(".huabuitem.act"); var ele=$(".huabuitem.act");
...@@ -288,10 +347,28 @@ var tag={ ...@@ -288,10 +347,28 @@ var tag={
var val_=self.val(); var val_=self.val();
switch(name_) { switch(name_) {
case "zbx": case "zbx":
if(val_<0){
val_=0;
self.val(0)
}
var max_=$(".edit-con").width()-ele.width();
if(val_>max_){
val_=max_;
self.val(max_)
}
ele.attr("x",val_); ele.attr("x",val_);
ele.css({left:Number(val_)}); ele.css({left:Number(val_)});
break; break;
case "zby": case "zby":
if(val_<0){
val_=0;
self.val(0)
}
var max_=$(".edit-con").height()-ele.height();
if(val_>max_){
val_=max_;
self.val(max_)
}
ele.attr("y",val_); ele.attr("y",val_);
ele.css({top:Number(val_)}) ele.css({top:Number(val_)})
break; break;
...@@ -438,6 +515,9 @@ var tag={ ...@@ -438,6 +515,9 @@ var tag={
$(".edit-con .gezi").remove(); $(".edit-con .gezi").remove();
$(".edit-con .huabuitem").removeClass("act"); $(".edit-con .huabuitem").removeClass("act");
$(".edit-con").removeClass("init-border"); $(".edit-con").removeClass("init-border");
if(!$(".tag-border").val()){
$(".edit-con").css({"border":"0px"})
}
obj.htmlp=String($(".edit-box").html()); obj.htmlp=String($(".edit-box").html());
obj.designName=$(".designName").val(); obj.designName=$(".designName").val();
if($("#templateid").val()){ if($("#templateid").val()){
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="tips">请拖动此处标签制作工具到下方编辑区域编辑!</div> <div class="tips">请拖动此处标签制作工具到下方编辑区域编辑!</div>
<div class="items yuan" name="round"><div class="round zctem" type="1" w="45" h="45" name="round" xtys="#333"></div><span>圆形</span></div> <div class="items yuan" name="round"><div class="round zctem" type="1" w="45" h="45" name="round" xtys="#333"></div><span>圆形</span></div>
<div class="items fang" name="rectangle"><div class="rectangle zctem" type="2" w="70" h="45" name="rectangle" xtys="#333"></div><span>矩形</span></div> <div class="items fang" name="rectangle"><div class="rectangle zctem" type="2" w="70" h="45" name="rectangle" xtys="#333"></div><span>矩形</span></div>
<div class="items text" name="textarea"><textarea class="textarea zctem" zhg="26" zh="14" wenben="测试文本" zt="Microsoft YaHei" type="3" w="250" h="26" ztys="#000000" name="textarea" placeholder="请输入文案">测试文本</textarea>A<span>文本</span></div> <div class="items text" name="textarea"><textarea class="textarea zctem" zhg="26" zh="14" wenben="测试文本" zt="Microsoft YaHei" type="3" w="200" h="26" ztys="#000000" name="textarea" placeholder="请输入文案">测试文本</textarea>A<span>文本</span></div>
<div class="items line" name="lineit"><div class="lineit zctem" type="4" w="70" h="1" name="lineit" xtys="#333"></div><span>线</span></div> <div class="items line" name="lineit"><div class="lineit zctem" type="4" w="70" h="1" name="lineit" xtys="#333"></div><span>线</span></div>
<div class="items erweima" name="erweimait" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"><div class="zctem erweimait" type="5" w="45" h="45" name="erweimait"style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"></div><span>二维码</span></div> <div class="items erweima" name="erweimait" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"><div class="zctem erweimait" type="5" w="45" h="45" name="erweimait"style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"></div><span>二维码</span></div>
<div class="items yiweima" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"><div class="zctem yiweimait" type="5" w="87" h="35" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"></div><span>一维码</span></div> <div class="items yiweima" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"><div class="zctem yiweimait" type="5" w="87" h="35" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"></div><span>一维码</span></div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="seclect-group fl"> <div class="seclect-group fl">
<span>标签大小:</span> <span>标签大小:</span>
<select class="tag-size"> <select class="tag-size">
<option value="440*300">90*60</option> <option value="440*280">90*60</option>
</select> </select>
</div> </div>
<div class="seclect-group fl"> <div class="seclect-group fl">
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
</div> </div>
</div> </div>
<div class="fztip">格子区域为画图区域,每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px,标尺实际像素需要刻度值*10</div> <div class="fztip">格子区域为画图区域,每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px</div>
<div class="fztip" style="color:red;">双击删除编辑区域内标签工具!!!!!!</div> <div class="fztip" ><b style="color:red;">双击删除</b> 编辑区域内标签工具,鼠标停留在画图区域,可按住<b style="color:red;">键盘上下左右键移动当前标签工具</b></div>
<div class="fztip" ><span style="color:red;">颜色选择器,复制此处颜色可用 </span><input type="text" id="colorpicker" /></div> <div class="fztip" ><span style="color:red;">颜色选择器,复制此处颜色可用 </span><input type="text" id="colorpicker" /></div>
<div class="edit-box fl"> <div class="edit-box fl">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<style> <style>
body{background:#fff;margin:0px;} body{background:#fff;margin:0px;}
.edit-con{margin:10px;} .print{padding-top:20px;padding-left:15px;}
.layui-btn{ .layui-btn{
display: inline-block; display: inline-block;
height: 38px; height: 38px;
...@@ -19,23 +19,84 @@ ...@@ -19,23 +19,84 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<div class="dybox">
@foreach($html as $item) @foreach($html as $item)
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!} {!! $item !!}
@endforeach
</div> </div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
@endforeach
<script src="../../../../js/jquery-2.2.1.js"></script> <script src="../../../../js/jquery-2.2.1.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
$(".print").width($(".edit-con").width());
if($(".edit-con").height()==280){
$(".edit-con").css({"height":"301px"})
}
$(".huabuitem[type='6'],.huabuitem[type='7']").each(function(){ $(".huabuitem[type='6'],.huabuitem[type='7']").each(function(){
var urlo_=$(this).css("backgroundImage").replace('url(','').replace(')',''); var urlo_=$(this).css("backgroundImage").replace('url(','').replace(')','');
$(this).css({"background":""}) $(this).css({"background":""})
$(this).html("<img src='"+urlo_.substring(1,urlo_.length-1)+"' />"); $(this).html("<img src='"+urlo_.substring(1,urlo_.length-1)+"' />");
$(this).find("img").css({width:"100%",height:"100%"}) $(this).find("img").css({width:"100%",height:"100%"})
}) })
// setTimeout(function(){ setTimeout(function(){
// window.print(); window.print();
// }, 100); }, 100);
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment