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); } }
沒有留言:
張貼留言