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); }
}
