2016年11月22日 星期二

硬名片的研究

Ref :  http://www.mrcaca.com/js/design_model.js?v=0918

Ref :  http://www.mrcaca.com/design/A000089


<span class="control_btn" id='font_btn'>
<select class="text_font" id="text_font" >
<option value='NotoR' >思源中黑體</option>
<option value='NotoM' >思源粗黑體</option>
<option value='GenR' >日文字體 ( 柔源中圓體 )</option>
<option value='GenM' >日文字體 ( 柔源粗圓體 )</option>
</select>
</span>



//************************* View -for Editor ***********************
 var Card_view = Backbone.View.extend({
    el: $("body"),
  events: {
         "mouseover .text_div":                "blindOverLine",
         "mouseout  .text_div":                "blindOutLine",
         "mouseover .image_div":               "blindOverLine",
         "mouseout  .image_div":               "blindOutLine",
         "click .text_div":                    "clickTarget",  //click for IE
         "click .image_div":                   "clickTarget",  
         "mousedown .text_div":                "clickTarget",  //mousedown for chrome / firefoxy /safari
         "mousedown .image_div":               "clickTarget", 
         "mousedown .text_input input":        "selectTextInput",
         "click .image_input .image_val":      "selectImageInput",
         "mousedown #img_less":                "imageSizeLess",
         "mousedown #img_add":                 "imageSizeAdd",
         "mousedown #img_old":                 "imageSizeOld",
         "mousedown #move_bar_list .btn":      "changeTextPos",
         "click .add_text_btn":                "addText",
         "click .text_input .del_btn":         "delText",
         "click .cancel_btn":                  "closeLogin",
         "click #login_btn":                   "setLogin",
         "click .login_small_btn":             "changeLogin",
         "click .change_register_btn":         "changeRegister",
         "click #register_btn":                "registerCheck",
         "click #login_in_btn":                "loginCheck",
         "click .loginOut":                    "loginOut",
         "click .save_btn":                    "saveFile",
         "click .print_btn":                   "printFile",
         "click .temp_btn":                    "tempFile",
         "click .temp_del_btn":                "delTemp",
         "click .lock_upload":                 "setLogin", 
         "click .lock_txt":                    "uploadText",
         "click #alert_btn":                   "closeText",
         "change #file_input":                 "uploadFile",
         "click .image_input .del_btn":        "delImage", 
         "click .top_side_btn":                "changeSide",
         "click .temp_cancel":                 "cancelAddSide",
         "click .template_btn":                "openTemp",
         "click .temp_bottom_btn":             "nextTemp",
         "click .temp_top_btn":                "backTemp",
         "click .temp_img":                    "seTemp",                                
         "click .temp_next":                   "nextTemp",
         "click .temp_back":                   "backTemp",
         "click .temp_bg":                     "addBtmTemp",
         "click .copy_bg":                     "cloneTopSide",               
         "click .del_bottom_btn":              "delBtmSide",
         "click #align_bar_list .btn":         "textAlign", 
         "click .text_top_btn":                "inputPageBack",
         "click .text_bottom_btn":             "inputPageNext",     
         "change #text_size":                  "changeTextSize",   
         "change #text_font":                  "changeTextFont",   
         "click #color_btn":                   "openColor",   
         "click .color_select":                "changeTextColor"
      },  

 changeTextFont: function(event){  
         var data = editBar.get('live_text'); 
         updateText( 'font', data );
      },

data ->  要印出來文字的內容
'font' -> 要執行font 


//update text------------------------------------------------------------
   function updateText( type ,datas ){  
      var side = editBar.get('live_side');
      var obj  = edit_id( side );    
      if( type === 'info' ){
         var id   = datas;
         var info = $( obj.inpt + ' .text_input #' + id ).val(); 
         var data = { "textInfo" : info };
      }
      else if( type === 'size' ){
         var id   = datas;
         var size = Number( $("#text_size").val() );
         var data = { "textSize" : size };
      }
      else if( type === 'font' ){
         var id   = datas;
         var font = $("#text_font").val();
         var data = { "textFont" : font };
      }
      else if( type === 'color' ){
         var id    = editBar.get('live_text'); 
         var color = datas;
         var data  = { "textColor" : color };
         $('#color_btn').css( 'background-color', color );
      }
      else if( type === 'temp' ){
         var id    = datas.id; 
         var color = datas.color;
         var data  = { "textColor" : color };
      }

      updateData( side , id, data );
      //show update text image
      var update = textColl[side].where({ 'textID' : id });
      var text   = textFormat( update[0], 'show' );
      var url    = encodeURI( '/designAction/fontControl?' +
                   'info=' + text.info + '&size=' + text.size + '&color=' + text.color + '&font=' + text.font );            
      trimCanvas(side, text, url);  
      if( type === 'color' ){ loadUseColor(); }
   }

//----------------------------------------------------------------------------

side -> 

id -> 'datas'
data -> { "textFont" : font };

//update target position data -----------------------------------------
   function updateData( side ,id, data ){ 
     var type   = id.substring(0,5);
     var update = (type != 'image') ? textColl[side].where({ 'textID' : id }) : imgColl[side].where({ 'imageID': id });
     update[0].set(data); //set new position
   }




 //Show Text-image----------------------------------------------------
   function trimCanvas( side, text, url ){
     var img, c, ctx, image;
     var obj       = edit_id( side );
     var canvas_id = text.id + '_canvas';
     var img_html  = '<img id="'+canvas_id+'" class="text_img" />';
     var text_div  = obj.view+' .text_show #'+text.id;
     var img_dom   = obj.view + ' #' + canvas_id;
     var check     = text.info.replace(/ | /g, ""); //clean all space
     //text not null
     if( check != '' ){
       setLoading( url );
       setTargetPos( side, text.id, text.left, text.top );
       //image
       img        = new Image();
       img.src    = url;
       img.onload = function(){ 
         c                 = document.createElement('canvas'); 
         ctx               = c.getContext('2d');
         ctx.canvas.width  = img.width;
         ctx.canvas.height = img.height;
         ctx.drawImage( img, 0, 0 ); 
         
         //set color
       
         //set font-image 
         if( $( img_dom ).length === 0 ){ $( text_div ).append( img_html ); }  //init text imgage
         else                           { $( img_dom ).removeAttr("src");   }  //have text imgage
         //render text
         $( img_dom ).attr({'src':c.toDataURL()});
         setLine( side, text.id, ctx.canvas.width , ctx.canvas.height ); 
       }
     }
     //text null
     else{ $( img_dom ).remove(); }
   }



 function setLoading( url ){
     var math         = editBar.get('loading');
     var loading_init = editBar.get('loading_init');
     //first time
     if( math === 'N' ){ editBar.set({ 'loading' : 1 }); }
     //second time
     else if( !isNaN(math) ){
       var math_new = editBar.get('loading') + 1; 
       editBar.set({ 'loading':math_new }); 
     }
     // binding - loading finish
     var img    = new Image();
     img.src    = url;
     img.onload = function(){ 
         if( editBar.get('loading') > 1){ editBar.set({ 'loading' : editBar.get('loading') - 1 }); }
         //more than 2
         else if( editBar.get('loading') === 1 ){ 
            editBar.set({ 'loading':'N' }); 
            //frist loading
            if( loading_init === 'N' ){ 
               setTimeout( function(){ 
                  showBox( '關閉中' ,'close' ); 
                  lockImgMath();
                  setLive( 'textID0' ); 
               }, 1000 );
               editBar.set({ 'loading_init':'Y' }); 
            }
         }
      } 
   }


改變顏色
//-------------------------------------------------------------------------------------


  openColor: function(){  
         var color = editBar.get('color_bar'); 
         ( color === 'N' ) ? editBar.set({ 'color_bar' : 'Y'}) : editBar.set({ 'color_bar' : 'N'});
      },   





 //color data----------------------------------------------------------
   function loadListColor(){ 
      var color_code = [
            {'color' : "#006B54"},{'color' : "#272D88"},{'color' : "#632078"},{'color' : "#7A1534"},{'color' : "#B81C25"},
            {'color' : "#C8501D"},{'color' : "#EDAB14"},{'color' : "#713B1E"},{'color' : "#000000"},{'color' : "#18943D"},
            {'color' : "#013986"},{'color' : "#761D76"},{'color' : "#D01462"},{'color' : "#D61419"},{'color' : "#DF5D0E"},
            {'color' : "#F4CC54"},{'color' : "#883021"},{'color' : "#595757"},{'color' : "#719B2F"},{'color' : "#138BC8"},
            {'color' : "#8A4D93"},{'color' : "#D8497C"},{'color' : "#D93B49"},{'color' : "#EB9541"},{'color' : "#EED646"},
            {'color' : "#734831"},{'color' : "#898989"},{'color' : "#ABAF28"},{'color' : "#5FB7AB"},{'color' : "#A887B6"},
            {'color' : "#E17EA3"},{'color' : "#E3797D"},{'color' : "#EFAD7C"},{'color' : "#E6E24D"},{'color' : "#9D8668"},
            {'color' : "#B5B5B6"},{'color' : "#92BE35"},{'color' : "#8ECCEB"},{'color' : "#D7D2E6"},{'color' : "#F3C9DE"},
            {'color' : "#F6BFBC"},{'color' : "#F9CDAE"},{'color' : "#F7EF81"},{'color' : "#E6DDB1"},{'color' : "#DCDDDD"},
            {'color' : "#E1ECC9"},{'color' : "#CAE8EF"},{'color' : "#E9D5E8"},{'color' : "#FBE0EC"},{'color' : "#FBDDDB"},
            {'color' : "#FCE1C5"},{'color' : "#FFFABC"},{'color' : "#F7F6C0"},{'color' : "#FFFFFF"}              
         ];
      //loading color
      $.each( color_code , function(i, val){
          var fontData = { 'font' : val };
          var template = _.template( $( "#color_data" ).html(), fontData );
          $( ".color_area" ).append(template); 
      })
      loadUseColor();
   }






  var editBar         = new Edit_bar;      


var Edit_bar = Backbone.Model.extend({
     'defaults': { 
         'user'       : 'V',
         'file'          : 'A',
         'bg'            : { 'top' :'N', 'btm':'N' },
         'side_math'     : 1,
         'loading_init'  : 'N',
         'loading'       : 'N',
         'live_side'     : 'top',
         'live_type'     : 'N',
         'live_text'     : 'N',
         'text_ticket'   : 'N',
         'live_img'      : 'N',
         'temp'          : 'N',
         'temp_total'    : 0,
         'temp_page'     : 0,
         'temp_save'     : [],
         'align_bar'     : 'N',
         'align_save'    : [],
         'input_page'    : 'N',
         'color_bar'     : 'N',
         'open_time'     : 'N',
         'upload_txt'    : 'N'
      },
 initialize: function(){
         this.on( 'change:loading'    , function(){ loading( '.loading' ); })
         this.on( 'change:temp'       , function(){ tempShowControl(); })
         this.on( 'change:temp_page'  , function(){ loadTemp(); }); 
         this.on( 'change:align_bar'  , function(){ alignControl(); }); 
         this.on( 'change:input_page' , function(){ inputPageControl(); }); 
         this.on( 'change:color_bar'  , function(){ colorControl(); }); 
      }
  })
 //************************* Collections-Text************************
 var Text_collection = Backbone.Collection.extend({
    model:Text_model,
    initialize: function(){         

      }
  })

 var Text_model = Backbone.Model.extend({
     defaults: {
         'textID'       :'textID',
         'textInfo'     :'新增文字',
         'textSize'     : 12,
         'textColor'    :'#000000',
         'textFont'     :'NotoR',
         'textTop'      : 20,
         'textLeft'     : 20,
         'divName'      : 'N'   
    },
    initialize: function(){
     //update text info
       this.on("change:textInfo", function(event){
            //var id = event.get("textID");
       })
  }
 })
 //************************* Models image ************************
 var Image_model = Backbone.Model.extend({
  'defaults': {
         'imageID'        : 'imageID',
         'imageName'      : 'N',
         'imageFileName'  : 'jpg', 
         'initWidth'      : 100,
         'initHeight'     : 100,
         'imageWidth'     : 100,
         'imageHeight'    : 100,
         'imageTop'       : 20,
         'imageLeft'      : 20
      }
  })



changeTextColor: function(event){  
         var data = $(event.currentTarget).attr("id"); 
         updateText( 'color', data );
      }, 

//update text------------------------------------------------------------
   function updateText( type ,datas ){  
      var side = editBar.get('live_side');
      var obj  = edit_id( side );    
      if( type === 'info' ){
         var id   = datas;
         var info = $( obj.inpt + ' .text_input #' + id ).val(); 
         var data = { "textInfo" : info };
      }
      else if( type === 'size' ){
         var id   = datas;
         var size = Number( $("#text_size").val() );
         var data = { "textSize" : size };
      }
      else if( type === 'font' ){
         var id   = datas;
         var font = $("#text_font").val();
         var data = { "textFont" : font };
      }
      else if( type === 'color' ){
         var id    = editBar.get('live_text'); // 那一段文字是你要編輯的
         var color = datas;
         var data  = { "textColor" : color };
         $('#color_btn').css( 'background-color', color );
      }
      else if( type === 'temp' ){
         var id    = datas.id; 
         var color = datas.color;
         var data  = { "textColor" : color };
      }
      updateData( side , id, data );
      //show update text image
      var update = textColl[side].where({ 'textID' : id });
      var text   = textFormat( update[0], 'show' );
      var url    = encodeURI( '/designAction/fontControl?' +
                   'info=' + text.info + '&size=' + text.size + '&color=' + text.color + '&font=' + text.font );            
      trimCanvas(side, text, url);  
      if( type === 'color' ){ loadUseColor(); }
   }



====================================================================

//bind - uploadevent--------------------------------------
   function appendImg( side, data ){
      var image = imageFormat( data );
      var obj   = edit_id( side );
      //append html
      var img_Data   = { 'image' : image };
      var input_data = _.template( $( "#inputImageShow" ).html(), img_Data );  //input image
      var view_data  = _.template( $( "#imageShow" ).html(), img_Data );       //editor image
      var url        = '/designAction/showImage/' + image.name;                //url link -+'?t='+new Date().getTime()
      $( obj.inpt+" .image_input" ).append( input_data ); 
      $( obj.view+" .image_show" ).append( view_data );
      //set css style
      $( obj.view + ' .image_show #'+image.id ).append('<img src='+url+' id='+image.id+'_img class=upload_img alt=images />'); 
      $( obj.view + ' .image_show #'+image.id+' .upload_img').css({ 'width':image.img_w +'px', 'height':image.img_h+'px' }) 
      setTargetPos( side, image.id, image.left, image.top );
      bindImgDragResize( side, image.id, image.init_w, image.init_h ) ;          //bind image Event 
      setLoading( url );

      //finish loading
      var img    = new Image();
      img.src    = url;
      img.onload = function(){ setLine( side, image.id, image.img_w , image.img_h); }
   }












沒有留言:

張貼留言