Skip to content

孙龙 / note-library

Go to a project
Commit 9ff4d049 by 肖康
Options

x

parent 1d64f2d1
Inline Side-by-side
Showing with 138 additions and 5 deletions
public/css/style.css
...@@ -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;
......
public/js/web/design.js
...@@ -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;
......
resources/views/web/design.blade.php
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
<div class="fztip">格子区域为画图区域,每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px</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">
......
resources/views/web/prints.blade.php
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<style> <style>
body{background:#fff;margin:0px;} body{background:#fff;margin:0px;}
/* .edit-con{height:307px!important;} */
.print{padding-top:20px;padding-left:15px;} .print{padding-top:20px;padding-left:15px;}
.layui-btn{ .layui-btn{
display: inline-block; display: inline-block;
...@@ -24,13 +23,70 @@ ...@@ -24,13 +23,70 @@
<div class="print"> <div class="print">
{!! $item !!} {!! $item !!}
</div> </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 !!}
</div>
<div class="print">
{!! $item !!}
</div>
<div class="print">
{!! $item !!}
</div>
@endforeach @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()); $(".print").width($(".edit-con").width());
if($(".edit-con").height()==280){ if($(".edit-con").height()==280){
$(".edit-con").css({"height":"307px"}) $(".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(')','');
......
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