design.js

var tag={
    hbisAct:0,//是否画布区域
    isClick:0,
    step_:2,//按键移动速度
    init:function(){
       
        if($("#templateid").val()){
            //编辑
            tag.getInfo();
        }else{
            //新增
            tag.editUi();
        }
        tag.handle();
        
    },
    getInfo:function(){
        
        $.ajax({
            url : '/ajax/getTemplateDetail?t_id='+$("#templateid").val(),
            type: 'get',
            success: function(resp) {
                if (resp.err_code == 0) {
                    $(".designName").val(resp.data.template_name)
                    var abobj=eval('('+resp.data.template_extend.attribute+')');
                    $(".tag-border").val(abobj.lableBorder);
                    $(".tag-bgm").val(abobj.lableBg);
                    $(".tag-size").val(abobj.lableSize);
                    $(".edit-box").html(resp.data.template_extend.html);
                    $("textarea").attr("readonly",false)
                    tag.editUi();
                    
                }else{
                    layer.msg(resp.err_msg,{time:2000});
                    tag.editUi();
                    $("#templateid").val("");
                }
            },
            error: function(err) {
                console.log(err)
            }
        })
    },
    base64:function(url,callback){
             function getBase64Image(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var dataURL = canvas.toDataURL("image/png");  // 可选其他值 image/jpeg
                return dataURL;
            }
            
            function main(src, cb) {
                var image = new Image();
                image.src = src + '?v=' + Math.random(); // 处理缓存
                // 支持跨域图片
                image.crossOrigin = '';
                image.onload = function(){
                    var base64 = getBase64Image(image);
                    cb && cb(base64);
                }
            }
            main(url, function(base64){
                callback(base64)
            });
    },
    editUi:function(){
          //图片logo转base64  
          tag.base64("http://img.ichunt.com/images/ichunt/label/new_logo.png",function(base64){
            $(".logobase64").css({"background":"url("+base64+") 0% 0% / 100% 100% no-repeat","filter": "brightness(0%)"})
              
          })   
          $("body").attr("onselectstart","return false");
           // 基本实例化:
          $('#colorpicker').colorpicker();
      
          //编辑画布渲染样式 
         
           var gezilist=$(".tag-size").val().split("*");
           var gnum=(Number(gezilist[0])/20)*(Number(gezilist[1])/20);
           var html="";
           $(".edit-con").width(Number(gezilist[0]));
           $(".edit-con").height(Number(gezilist[1]));
           for(var i=0;i<gnum;i++){
               if($(".tag-fz").val()){
                html+='<div class="gezi border0"></div>';
                
               }else{
                if((i+1)%(Number(gezilist[0])/20)==0){
                if((i+1)==gnum){
                    html+='<div class="gezi right0 bottom0"></div>';
                }else{
                    html+='<div class="gezi right0"></div>';
                }
               }else if((i+1)>=(gnum-Number(gezilist[0])/20)){
                html+='<div class="gezi bottom0"></div>';
               }else{
                html+='<div class="gezi"></div>';
               }
               }
           }
           $(".edit-con .gezi").remove();
           $(".edit-con").prepend(html);
           $(".edit-con").css({"backgroundColor":$(".tag-bgm").val()})
           if($(".tag-border").val()){
            $(".edit-con").css({"border":$(".tag-border").val()})
           }else{
            $(".edit-con").css({"border":"1px solid #ccc"})
           }
        
           
           
           
           
    },
    itemedit:function(){
       var ele=$(".huabuitem.act");
       $(".tools.act").removeClass("act");
       $(".tool"+ele.attr("type")).addClass("act");
       //基础属性高度宽度 X Y坐标等渲染
       $(".tools.act .zbx").val(ele.attr("x"));//X坐标
       $(".tools.act .zby").val(ele.attr("y"));//Y坐标
       $(".tools.act .kdw").val(ele.attr("w"));//宽度w
       $(".tools.act .gdh").val(ele.attr("h"));//高度h
       $(".tools.act .xsnd").val(ele.attr("xsnd"));//线色浓度
       $(".tools.act .xys").val(ele.attr("xys"));//线样式
       $(".tools.act .xtys").val(ele.attr("xtys"));//线条颜色
       $(".tools.act .tcys").val(ele.attr("tcys"));//填充颜色
       $(".tools.act .tccj").val(ele.attr("tccj"));//图层层级
       $(".tools.act .fx").val(ele.attr("fx"));//方向
       $(".tools.act .zt").val(ele.attr("zt"));//字体
       ele.css({fontFamily:ele.attr("zt")})
       $(".tools.act .zh").val(ele.attr("zh"));//字号
       $(".tools.act .wenben").val(ele.attr("wenben"));//文本类容
       $(".tools.act .zsnd").val(ele.attr("zsnd"));//字色浓度
       ele.css({fontWeight:ele.attr("zsnd")})
       $(".tools.act .zjj").val(ele.attr("zjj"));//字间距
       $(".tools.act .ztys").val(ele.attr("ztys"));//字体颜色
       $(".tools.act .zhg").val(ele.attr("zhg"));//字行高
       for(var i=0;i<$(".tools.act .sjglgroup").length;i++){
           var current_=(i+1);
           if(typeof(ele.attr("sjgl"+current_))=="undefined"){
            $(".tools.act .sjgl").val("");
            $(".tools.act .sjgl").next().val("").show();
            $(".tools.act .sjgl").parents(".sjglgroup").find("span").find("select").val("/");
            break;
           }
           if(ele.attr("sjgl"+current_)){
                if(ele.attr("sjgl"+current_).indexOf("||zdyxkpoiop")!=-1){
                    //非自定义
                    if(current_==1){
                        $(".tools.act .sjgl"+current_).val(ele.attr("sjgl"+current_).split("||zdyxkpoiop")[0]);
                    }else{
                        $(".tools.act .sjgl"+current_).val(ele.attr("sjgl"+current_).slice(1).split("||zdyxkpoiop")[0]);
                        $(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val(ele.attr("sjgl"+current_)[0])
                    }
                    $(".tools.act .sjgl"+current_).next().val("").hide();
                }else{
                    //自定义
                    $(".tools.act .sjgl"+current_).val("");
                    if(current_==1){
                        $(".tools.act .sjgl"+current_).next().val(ele.attr("sjgl"+current_));
                    }else{
                        $(".tools.act .sjgl"+current_).next().val(ele.attr("sjgl"+current_).slice(1));
                        $(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val(ele.attr("sjgl"+current_)[0])
                    }
                    $(".tools.act .sjgl"+current_).next().show();
                }
           }else{
            $(".tools.act .sjgl"+current_).val("");
            $(".tools.act .sjgl"+current_).next().val("").show();
            $(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val("/")
           } 
       }
       
    },
    handle:function(){
        //画布设置监听渲染UI
        $(".edit-seclect select,.tag-bgm").change(function(){
            
        })
        $(".edit-seclect select,.edit-seclect input").bind('input propertychange', function() {
            tag.editUi();
       })
        //工具栏拖拽
        $(".tag-tools .items").on({
            mousedown: function(e){
            var type_=$(this).attr("type");
            var html=$(this).find(".zctem").addClass("zanshiUi").clone(true);
            $(this).find(".zctem").removeClass("zanshiUi");
            var el=$(this);
            var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
            $("body").append(html);
            $(".huabuitem").removeClass("act");
            $(document).on('mousemove.drag', function(e){
                 $(".zanshiUi").css({"width":$(".zanshiUi").attr("w")});
                 $(".zanshiUi").css({"height":$(".zanshiUi").attr("h")});
                 $(".zanshiUi").show().offset({top: e.pageY+1, left: e.pageX+1});
                 tag.isClick=1;
                
            });
            }
        })
       
        //鼠标移入画布
        $("body").on("mouseover",".edit-con",function(e){
            tag.hbisAct=1;
        })
        //双击删除工具
        $("body").on("dblclick",".huabuitem",function(e){
           $(this).remove();
        })
        $("body").on("mouseout",".edit-con",function(e){
            tag.hbisAct=0;
        })
        //画布监听鼠标松开
        $("body").on("mouseup",".edit-con",function(e){
            var x,y;
            x=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标  
            y=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 
            if(tag.isClick==0){return}
            $(document).off('mousemove.drag');
            //工具栏拖动放下
            var zanshiUi=$(".zanshiUi");
                var html=zanshiUi.removeClass("zanshiUi").removeClass("zctem").addClass("huabuitem act").clone();
                zanshiUi.remove();
                if(tag.hbisAct){
                    //在画布区域
                    $(".edit-con").append(html);
                    //工具编辑栏 
                    $(".huabuitem.act").css({"left":x,"top":y}).attr("x",x).attr("y",y);
                    tag.itemedit();
                }    
            
            tag.isClick=0;            
        })
       
        //全局监听鼠标松开
        $(document).mouseup(function(e){
            $(document).off('mousemove.drag');
            $(".zanshiUi").remove();
                      
         })
        //监听画布已有工具
        $(document).on("mousedown",".huabuitem",function(e){
            var self=$(this);
            var x,y;
            x=e.pageX-$(".edit-con").offset().left; //获取当前鼠标相对div的X坐标  
            y=e.pageY-$(".edit-con").offset().top; //获取当前鼠标相对div的Y坐标
            var left= self.position().left;
            var top=self.position().top;
            if(!$(this).hasClass("act")){
                $(".huabuitem").removeClass("act");
                self.addClass("act");
            }
            tag.itemedit();
            $(document).on('mousemove.drag', function(e){
                var x2,y2;
                x2=e.pageX-$(".edit-con").offset().left-x+left; 
                y2=e.pageY-$(".edit-con").offset().top-y+top;
                var gezilist=$(".tag-size").val().split("*");
                if(x2<0){
                    x2=0;
                }
                if(y2<0){
                    y2=0;
                }
                if(x2>gezilist[0]-self.width()){
                    x2=gezilist[0]-self.width();
                }
                if(y2>gezilist[1]-self.height()){
                    y2=gezilist[1]-self.height();
                }
                self.css({top:y2, left:x2});
                self.attr("x",x2);
                self.attr("y",y2);
                tag.itemedit();
            })
            
        })    
        $("body").on("mousemove","textarea",function(){
                $(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(){
            var ele=$(".huabuitem.act");
            var name_=$(this).attr("class").split(" ")[0];
            var self=$(this);
            var val_=self.val();
            switch(name_) {
                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.css({left:Number(val_)});
                    break;
                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.css({top:Number(val_)})
                    break;
                case "kdw":
                    ele.attr("w",val_);
                    ele.css({width:val_})
                    break;
                case "gdh":
                    ele.attr("h",val_);
                    ele.css({height:val_})
                    break;
                case "xsnd":
                    ele.attr("xsnd",val_);
                    ele.css({borderWidth:val_})
                    break;
                case "xys":
                    ele.attr("xys",val_);
                    ele.css({borderStyle:val_})
                    break;
                case "xtys":
                    ele.attr("xtys",val_);
                    ele.css({borderColor:val_})
                    break;
                case "tcys":
                    ele.attr("tcys",val_);
                    ele.css({backgroundColor:val_})
                    break;
                case "tccj":
                    ele.attr("tccj",val_);
                    ele.css({zIndex:val_})
                    break;
                case "fx":
                    ele.attr("fx",val_);
                    if(val_){
                        ele.addClass("xuanzhuan");
                    }else{
                        ele.removeClass("xuanzhuan");
                    }
                    break;
                case "zt":
                    ele.attr("zt",val_);
                    ele.css({fontFamily:val_})
                    break;
                case "zh":
                    ele.attr("zh",val_);
                    ele.css({fontSize:val_+"px"})
                    break;
                case "wenben":
                    ele.attr("wenben",val_).text(val_);
                    ele.val(val_)
                    break;
                case "zsnd":
                    ele.attr("zsnd",val_);
                    ele.css({fontWeight:val_})
                    break;
                case "zjj":
                    ele.attr("zjj",val_);
                    ele.css({letterSpacing:val_+"px"})
                    break;
                case "ztys":
                    ele.attr("ztys",val_);
                    ele.css({color:val_})
                    break;
                case "zhg":
                    ele.attr("zhg",val_);
                    ele.css({lineHeight:val_+"px"})
                    break;
               case "imagesurl":
                var reader = new FileReader();
                var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
                var file = self[0].files[0];
                var imgUrlBase64;
                if (file) {
                    //将文件以Data URL形式读入页面  
                    imgUrlBase64 = reader.readAsDataURL(file);
                    reader.onload = function (e) {
                      //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
                      if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                            alert( '上传失败，请上传不大于2M的图片！');
                            return;
                        }else{
                            //执行上传操作
                            console.log(file)
                             ele.css({"background":"url("+reader.result+") 0% 0% / 100% 100% no-repeat"})
                             ele.css({"backgroundColor":"#ccc"})
                        }
                    }
                 }  
                   
                    break;
                case "sjgl":
                    //ele.attr("sjgl1",val_);
                    var parent_=self.parents(".group-value");
                    var datatypes="";
                    for(var i=0;i<parent_.find(".sjglgroup").length;i++){
                        var elp=parent_.find(".sjgl"+(i+1));
                        var qz_="";
                        if(i>0){
                            qz_=elp.parents(".sjglgroup").find("span select").val();
                        }
                        if(elp.val()){
                            ele.attr("sjgl"+(i+1),qz_+elp.val()+"||zdyxkpoiop");
                            datatypes+=qz_+"<<<"+elp.val()+">>>";
                        }else{
                            var nextval_=elp.next().val();
                            if(nextval_){
                                ele.attr("sjgl"+(i+1),qz_+nextval_);
                                datatypes+=qz_+nextval_;
                            }else{
                                ele.attr("sjgl"+(i+1),elp.next().val());
                            }
                        }
                        ele.attr("datatypes",datatypes)
                    }
                    break;
                default:
                    break;
            }
       });
       //多文本单向监听
       $(document).on("input propertychange","textarea",function(){
            $(this).attr("wenben",$(this).val()).text($(this).val())
       });
       //数据关联联动
       $(".sjglbox select").bind('input propertychange', function() {
            var val_=$(this).val();
            if(!val_){
                $(this).next().show()
            }else{
                $(this).next().hide()
            }
       })
       //页面提交
       $(".submitx").click(function(){
           var obj={
                  lableSize:$(".tag-size").val(),
                  lableBg:$(".tag-bgm").val(),
                  lableBorder:$(".tag-border").val()
           }
           if(!$(".designName").val()){
            layer.msg("请输入模板名称",{time:2000})
            return;
           }
           $(".edit-con .gezi").remove();
           $(".edit-con .huabuitem").removeClass("act");
           $(".edit-con").removeClass("init-border");
           if(!$(".tag-border").val()){
            $(".edit-con").css({"border":"0px"})
           }
           $("textarea").attr("readonly",true);
           obj.htmlp=String($(".edit-box").html());
           obj.designName=$(".designName").val();
           if($("#templateid").val()){
            obj.t_id =$("#templateid").val()
           }
            $.ajax({
                url : '/ajax/add_template',
                type: 'post',
                data: obj,
                success: function(resp) {
                    if (resp.err_code == 0) {
                        layer.msg("提交成功",{time:2000});
                        setTimeout(function(){
                            window.location.href="/web/labelList"
                        },2000)
                        
                    }else{
                        layer.msg(resp.err_msg,{time:2000});
                        tag.editUi();
                    }
                },
                error: function(err) {
                    console.log(err)
                }
            })
          
           
       })
    }
        
}
$(function(){
    tag.init();
})