diymall-water/WebRoot/admin/js/adminDiy.js

;(function($){
	
	var app = new Object();
	
	/*获取 当前活动元素或指定元素的样式*/
	app.getActiveStyle = function(styleName,object){
		var canvas = this.mainCanvas;
		object = object || canvas.getActiveObject();
		if(!object) return '';
		return (object.getSelectionStyles && object.isEditing) ? (object.getSelectionStyles()[styleName] || '') : (object[styleName] || '');
	}
	/*设置 当前活动元素或指定元素的样式*/
	app.setActiveStyle = function(styleName,value,object){
		var canvas = this.mainCanvas;
		
		object = object || canvas.getActiveObject();
		if (!object) return;
		if (object.setSelectionStyles && object.isEditing) {
			var style = {};
			style[styleName] = value;
			object.setSelectionStyles(style);
			object.setCoords();
		}
		else {
			object.set(styleName, value);
		}
		object.setCoords();
		canvas.renderAll();
	}
	/*获取 当前活动或者指定元素的属性值*/
	app.getActiveProp = function(name,object){
		var canvas = this.mainCanvas;
		var object = object || canvas.getActiveObject();
		if (!object) return '';
		return object[name] || '';
	}
	/*设置 当前活动或者指定元素的属性值*/
	app.setActiveProp = function(name, value,object){
		var canvas = this.mainCanvas;
		var object = object || canvas.getActiveObject();
		if (!object) return;
		object.set(name, value).setCoords();
		canvas.renderAll();
	}
	/*调整印花控制器显示的个数*/
	app.ControlVisibility = function(canvasItem){
		var _controlsVisibility = {
				tl: !0,
				tr: !0,
				br: !0,
				bl: !0,
				ml:  0,
				mt:  0,
				mr:  0,
				mb:  0,
				mtr: !0
	      }

		for(var item in _controlsVisibility){
			canvasItem['setControlVisible'](item,_controlsVisibility[item]);
		}
	}
	//添加图片
	app.addImg = function(url){
		var that = this;
		fabric.Image.fromURL(url,function(designImg){
			
			designImg.set({
				cornerSize:15,
				cornerStyle:'circle',
				rotatingPointOffset:30,
				borderDashArray:[3,6],
				borderColor:'#000',
				cornerColor: '#000'
			});
			
			//图片宽高比
			var imgRATIO = designImg.width / designImg.height;
			//图片最大尺寸  app.oldCutWidth
			that.maxWidthImg = that.oldCutWidth*0.8;
			that.maxHeightImg = that.oldCutHeight*0.8;
			var imgWidth,imgHeight
			//app.cutWidth
			if(that.maxHeightImg*imgRATIO < that.maxWidthImg ){
				imgWidth = that.maxHeightImg*imgRATIO;
				imgHeight = that.maxHeightImg;
			}else{
				imgWidth = that.maxWidthImg;
				imgHeight = that.maxWidthImg/imgRATIO;
			}
			
			designImg.setWidth(imgWidth);
			designImg.setHeight(imgHeight);
			
			that.centerObj(designImg);
			
			that.mainCanvas.add(designImg).setActiveObject(designImg);
			
			that.mainCanvas.renderAll();
			that.mainCanvas.calcOffset();
			
		})
		
	}
	//返回当前中心店坐标
	app.transformViewPoint = function(o){
		var that = this;
		var point = that.mainCanvas.getCenter();
		if(o){
			var i ={
				x:o.x,
				y:o.y
			}
		}else{
			var i ={
				x:point.left,
				y:point.top
			}
		}
		
		// after 计算出 变换之后 中心点坐标
		var after = fabric.util.transformPoint(i, fabric.util.invertTransform(that.mainCanvas.viewportTransform));
		
		return after;
	}
	//当前元素居中
	app.centerObj = function(obj){
		var that = this;
		
		console.log(obj)
		
		var afterPoint = app.transformViewPoint();
		obj.set('left',afterPoint.x - obj.width*obj.scaleX/2);
		obj.set('top',afterPoint.y - obj.height*obj.scaleY/2);
		
		obj.setCoords();
	}
	
	
	//添加文字
	app.addText = function(texts){
		var that = this;
		
		var text = new fabric.IText(texts, {
			fontSize: 30,
			textAlign:'left',
			cornerStyle:'circle',
			borderColor:'#000',
			cornerColor: '#000',
			fontFamily:'微软雅黑',
			cornerSize:15,
			rotatingPointOffset:30,
			borderDashArray:[3,6]
		});

		text.on('editing:entered',function(){
			app.textFlage = true;
	
		});
		
		text.on('editing:exited',function(){
			app.textFlage = false;
		
		});
		
		app.ControlVisibility(text);
		that.centerObj(text);
		that.mainCanvas.add(text).setActiveObject(text);
		that.mainCanvas.renderAll();
		
	}
	
	app.delObject = function(){
		var that = this;
		$("#diy_del_object").click(function(){
			
			if(that.mainCanvas.getActiveGroup()){
				alert('请选择单个对象删除');
				return false;
			}
			var obj = that.mainCanvas.getActiveObject();
			if(!obj||obj=='undefined'){return false;}
			that.mainCanvas.remove(obj);
			that.mainCanvas.renderAll();
		});
	}
	app.cloneObject = function(){
		var that = this;
		$("#diy_clone_object").click(function(){
			
			if(that.mainCanvas.getActiveGroup()){
				alert('请选择单个对象复制');
				return false;
			}
			
			var obj = that.mainCanvas.getActiveObject();
			if(!obj||obj=='undefined'){return false;}
			
			var point = that.mainCanvas.getCenter();
			obj.clone(function(obj){
				
				that.centerObj(obj);
				that.mainCanvas.add(obj).setActiveObject(obj);
				
			},["cornerSize","_controlsVisibility","cornerStyle","rotatingPointOffset","borderDashArray","borderColor","cornerColor","fill"]);
		});
	}

	//canvas 检测按下
	app.dowmCanvas = function(canvas){
		
		canvas.on('mouse:down',function(options){
			
			if(options.target && options.target.type=='i-text'){
				
				$("#editor-panel").show();
				
			}else{
				$("#editor-panel").hide();
				$(".diy_top_nav_item").removeClass('active');
			}
			
		});
		canvas.on('mouse:up',function(options){
			if(options.target){
			}
		});
		
		canvas.on('object:selected',function(options){
			var group = canvas.getActiveGroup();
			if(group){
				
				group.set({
					cornerSize:15,
					cornerStyle:'circle',
					rotatingPointOffset:30,
					borderDashArray:[3,6],
					borderColor:'#000',
					cornerColor: '#000'
				})
			}
		})
	}

	//把当前画布保存成图片
	app.returnCanvasImg = function(width){
		
		var that= this;
		app.outputWidth = width || 500 ;
		app.outputHeight = app.outputWidth/app.plateRATIO;
		
		//新的缩放比例
		var afterCutRATIO = util.numDiv(app.outputWidth,app.oldCutWidth);
		//中心点坐标
		var point = that.mainCanvas.getCenter(); 
		//之前缩放比例
		var zoomNum = that.mainCanvas.getZoom();
		//执行新的缩放
		that.mainCanvas.zoomToPoint(new fabric.Point(point.left,point.top),afterCutRATIO);
		//生成剪切图片
		var dataURL = that.mainCanvas.toDataURL({
			  format: 'png',
			  left: point.left -app.outputWidth/2 ,
			  top: 	point.top - app.outputHeight/2,
			  width: app.outputWidth,
			  height: app.outputHeight
		});
		//缩放回原来大小
		that.mainCanvas.zoomToPoint(new fabric.Point(point.left,point.top),zoomNum);
		
		return dataURL;
		
	}
	app.returnCanvasJson = function(){
		var that = this;
		return that.mainCanvas.toJSON([
					'borderColor',
					'cornerColor',
					'cornerStyle',
					'cornerSize',
					'rotatingPointOffset',
					'borderDashArray',
					'plateRATIO',
					'viewportTransform',
					'oldCutWidth',
					'oldCutHeight',
					'width',
					'height',
					'_controlsVisibility'
              ]);
	}

	//绘制剪切区域
	app.cutArea = function(width,height,win){
		
		if(app.cutCanvas){
			$("#cutCanvas").remove();
		}
	
		app.cutCanvas = document.createElement('canvas');
		app.cutCanvas.width = width;
		app.cutCanvas.height= height;
		app.cutCanvas.id = 'cutCanvas';
			
		$(app.cutCanvas).css({
			position:'absolute',
			top:0,
			left:0,
			width:width,
			height:height
		});
		
		var cutCtx = app.cutCanvas.getContext('2d');
		
		cutCtx.fillStyle = 'rgba(173,173,173,0.8)';
		cutCtx.fillRect(0,0,width,height);
		
		
		//剪切区域的最大高度 和宽度
		app.maxWidth = app.baseWidth*0.8;
		app.maxHeight = app.baseHeight*0.8;
		
		if(!win){
			
			if(app.maxHeight*app.plateRATIO < app.maxWidth){
				
				app.cutWidth = app.maxHeight*app.plateRATIO;
				app.cutHeight = app.maxHeight;
			}else {
				app.cutWidth = app.maxWidth;
				app.cutHeight = app.maxWidth/app.plateRATIO;
			}
			
			if(!app.oldCutWidth){
				//存储之前剪切大小
				app.oldCutWidth = app.cutWidth;
				app.oldCutHeight = app.cutHeight;
				
				app.mainCanvas.set('oldCutWidth',app.oldCutWidth);
				app.mainCanvas.set('oldCutHeight',app.oldCutHeight);
			}
			
		}
		
		cutCtx.clearRect((width-app.cutWidth)/2,(height-app.cutHeight)/2, app.cutWidth, app.cutHeight);
		$("#diy").after(app.cutCanvas);
		
	}
	//变换屏幕变换时，让canvas 元素居中
	app.resizeCanvasSize = function(){
		
		var canvas = this.mainCanvas;
		
		app.centerLeft = canvas.getWidth()/2;
		app.centerTop = canvas.getHeight()/2;
		
		canvas.setWidth(app.baseWidth);
		canvas.setHeight(app.baseHeight);
		
		var point = canvas.getCenter();
		//抛弃选择中的组
		canvas.discardActiveGroup();
		
		app.resizeLeft = point.left - app.centerLeft,
		app.resizeTop = point.top - app.centerTop;
		
		var zoomNum = canvas.getZoom();
		//console.log(zoomNum)
		
		var objects = canvas.getObjects();
		//console.log(objects[0])
		for (var i in objects) {
			
			objects[i].left = objects[i].left + app.resizeLeft/zoomNum;
	        objects[i].top = objects[i].top + app.resizeTop/zoomNum;
	        objects[i].setCoords();
		}
	
		canvas.renderAll();
	    canvas.calcOffset();
	}
	
	app.cutRATIO = null;
	//自适应屏幕 缩放
	app.resizeRender = function(){
		
		var that = this;
		//缩放比例
		var afterCutRATIO = util.numDiv(app.cutWidth,app.oldCutWidth);
		
		if(app.cutRATIO == afterCutRATIO){
			return false;
		}else{
			app.cutRATIO = afterCutRATIO;
		}
		var point = that.mainCanvas.getCenter();
		that.mainCanvas.zoomToPoint(new fabric.Point(point.left,point.top),app.cutRATIO);
		
		that.mainCanvas.renderAll();
		that.mainCanvas.calcOffset();
        
	}
	
	app.init = function(w,h,did){
		
		//diy 基础宽度
		app.baseWidth = $(".diy_canvas_wrap").width();
		app.baseHeight = $(".diy_canvas_wrap").height();
		
		if(!$("#diy")[0]){return false;};
		
		app.mainCanvas = new fabric.Canvas('diy',{
			selectionColor: 'rgba(0,0,0,0.1)',
			controlsAboveOverlay:true,
			preserveObjectStacking:true,
			backgroundColor:'rgba(255,255,255,0)',
			selctionBorderColor:'#000',
			selectionDashArray:[3,6],
			selectionLineWidth: 1
		});
		
		if(did){
			app.diyId = did;
			sdzAjax.getDiy(app.diyId,function(data){
				console.log(data);
				var json = JSON.parse(data.diy.content);
				app.plateRATIO = json.plateRATIO;
				app.oldCutWidth = json.oldCutWidth;
				app.oldCutHeight = json.oldCutHeight;
				
				app.cutArea(app.baseWidth,app.baseHeight);
				
				app.mainCanvas.loadFromJSON(json,function(){
					
					app.resizeCanvasSize();
					app.resizeRender();
					app.mainCanvas.renderAll.bind(app.mainCanvas);
					
				});

				app.diyTitle = data.diy.title;
				app.diyRemark = data.diy.remark;
				app.use_number = data.diy.use_number;
				app.festival_id = data.diy.festival_id;
				app.industry_id = data.diy.industry_id;
				app.purpose_id = data.diy.purpose_id;
				app.style_id = data.diy.style_id;
				app.subject_id = data.diy.subject_id;
				
				app.bottle = {
					id:$("#bottle_id").val(),
					img_url:$("#bottle_img_url").val()
				}
				
			})
			
		}else{
			//计算出 板式宽度高度比例
			app.plateRATIO = w/h;
			app.mainCanvas.set('plateRATIO',app.plateRATIO);
			
			app.mainCanvas.setWidth(app.baseWidth);
			app.mainCanvas.setHeight(app.baseHeight);
			app.cutArea(app.baseWidth,app.baseHeight);
			
		}
	
		app.dowmCanvas(app.mainCanvas);
		
		return app.mainCanvas;
	}

	
	//获取分类 sdzAjax
	function getMaterialType(){
		
		sdzAjax.getMaterialType(function(res){
			var list = res.list;
			var html = '';
			res.list.forEach(function(item){
				html+='<option value="'+ item.id +'">'+ item.title +'</option>';
			})
			
			$("#diy_color_select").html(html);
			
			//
			getMaterial(list[0].id);
		});
	}
	//素材分类 ID
	app.mtid = null;
	//change select
	function changeSelectMaterialType(){
		
		$("#diy_color_select").change(function(){
			
			var id = $(this).val();
			id && id != app.mtid && getMaterial(id);
			app.mtid = id;
		})
	}
	//获取分类下面内容
	function getMaterial(id){
		
		sdzAjax.getMaterial(id,function(res){

			var html ='';
			for(var i=0;i<res.list.length;i++){
				html+='<div class="box_item" data-imgUrl="'+ res.list[i].img_url +'">';
					html+='<div class="c">';
						html+='<p><img src="'+res.list[i].img_url+'" /></p>';
						html+='<p>'+res.list[i].title+'</p>';
					html+='</div>';
				html+='</div>';
			}
			
			$("#diy_box_content").html(html);
			$(".do-nicescroll").getNiceScroll().resize();
			
			$(".box_item").each(function(){
				
				$(this).unbind('click').click(function(){
					//添加设计图
					var imgUrl = $(this).data('imgurl');
					app.addImg(imgUrl);
				})
			})
		})
	}
	
	//屏幕变化的时候 
	function windowResize(){
		
		$(window).resize(function(e){
			if(app.mainCanvas){
				app.baseWidth = $(".diy_canvas_wrap").width();
				app.baseHeight = $(".diy_canvas_wrap").height();
				//变换剪切区域
				app.cutArea(app.baseWidth,app.baseHeight,true);
				app.resizeCanvasSize();
				
			}
			
		})
	}
	//适应屏幕 
	function niceWindow(){
		$("#diy_resize").click(function(){
			app.cutArea(app.baseWidth,app.baseHeight);
			app.resizeRender();
		})
	}
	
	//层级修改
	function changeHierarchy(){
		
		$("#view_ward .click_show_item").each(function(){
			$(this).click(function(){
				
				var key = $(this).data('key');
				switch(key)
				{
				case 0://上一层
					var obj = app.mainCanvas.getActiveObject();
					if(!obj||obj=='undefined'){return false;};
					app.mainCanvas.bringForward(obj);
					app.mainCanvas.renderAll();
					break;
				case 1: //下一层
					var obj = app.mainCanvas.getActiveObject();
					if(!obj||obj=='undefined'){return false;};
					app.mainCanvas.sendBackwards(obj);
					app.mainCanvas.renderAll();
					break;
				case 2: //置顶
					var obj = app.mainCanvas.getActiveObject();
					if(!obj||obj=='undefined'){return false;};
					app.mainCanvas.bringToFront(obj);
					app.mainCanvas.renderAll();
					break;
				default: //置底
					var obj = app.mainCanvas.getActiveObject();
					if(!obj||obj=='undefined'){return false;};
					app.mainCanvas.sendToBack(obj);
					app.mainCanvas.renderAll();
				}
			})
		})
	}
	
	//颜色遍历
	function getColor(){
		
		sdzAjax.getColor(function(data){
			var html = ''
			var divContent = '<div class="djsy-color-panel-item">{span}</div>'
			var spanContent = '<span data-color="{color}" style="background-color:{color}"></span>'
			for( var item in data.colorPanel){
				var span = ''
				for(var i=0;i<data.colorPanel[item].length;i++){
					span+=spanContent.replace(/{color}/g,data.colorPanel[item][i]);
				}
				html+=divContent.replace("{span}",span);
			}
	
			$("#djsy_text_color_panel_content").html(html);
			
			$("#djsy_text_color_panel_content .djsy-color-panel-item > span").each(function(){
				
				$(this).click(function(){
					var color = $(this).data('color');
					app.setActiveStyle('fill',color);
					$(".color-span  >i").css('background-color',color);
				})
			})
		});
	}
	
	//预览效果
	function previewCanvas(){
		$("#diy_preview").click(function(){
			
			var imgUrl =  app.returnCanvasImg(200);
			
			var previewCanvas = document.createElement('canvas');
			var ctx = previewCanvas.getContext("2d");
			
			var img = new Image();
			
			img.src = app.bottle.img_url;
			console.log(app.bottle);
			img.onload = function(){
				
				previewCanvas.width = img.width;
				previewCanvas.height = img.height;
				
				ctx.drawImage(img,0,0,img.width,img.height);

				var imgBotte = new Image();
				imgBotte.src = imgUrl;
				imgBotte.onload = function(){

					imgBotte.height = img.height*0.54;
					imgBotte.width = imgBotte.height*app.plateRATIO;

					ctx.drawImage(imgBotte,(img.width-imgBotte.width)/2,img.height*0.3,imgBotte.width,imgBotte.height);
					var imgBotteUrl = previewCanvas.toDataURL();
					
					$("#previewCanvas").show();
					var imgEle = '<img class="previewImg" src="'+ imgBotteUrl +'"/>';
					$("#previewImgWrap").html(imgEle);

				}
			}

		})
	}
	
	//关闭弹窗
	function close_modal(){
		$(".close_modal").click(function(){
			$(".GlobalModalsWrapper").hide();
		})
	}
	
	
	//保存diy
	function saveCanvas(){
		
		$("#diy_save_diy_btn").click(function(){
			
			var obj = app.mainCanvas._objects;
			if(obj.length<=0){
				alert("请添加内容");
				return false;
			}
			if(app.diyId){
				var data = {
					id :app.diyId,
					img_url:app.returnCanvasImg(200),
					content:JSON.stringify(app.returnCanvasJson())
				}
			}else{
				var data = {
					img_url:app.returnCanvasImg(200),
					content:JSON.stringify(app.returnCanvasJson()),
					bottle_id:app.bottle.id
				}
			}
			console.log(data);
			
			util.tipHtml('loading','正在提交');
			sdzAjax.saveDiy(data,function(data){
				
				util.hideTip();
				
				if(app.diyTitle){
					$("#diy_title").val(app.diyTitle);
				}
				
				if(app.diyRemark){
					$("#diy_remark").val(app.diyRemark);
				}
				
				if(app.use_number){
					$("#use_number").val(app.use_number);
				}
				
				$("#update_diy").show();
				var diyId = data.did;
				
				sdzAjax.editDiy(function(data){
					
					console.log(data);
					var div = '';
					$.each(data,function(k,val){
						//console.log(k)
						if(k=='festival_list'){
							div+=createHtml('节日',val,'festival_id',app.festival_id);
						}else if(k=='industry_list'){
							div+=createHtml('行业',val,'industry_id',app.industry_id);
						}else if(k=='purpose_list'){
							div+=createHtml('用途',val,'purpose_id',app.purpose_id);
						}else if(k=='style_list'){
							div+=createHtml('风格',val,'style_id',app.style_id);
						}else if(k=='subject_list'){
							div+=createHtml('专题',val,'subject_id',app.subject_id);
						}
					});

					$("#category_list").html(div);
					
					//保存
					$("#btn_update_diy").click(function(){
								
						var dataObj = {};
						dataObj.title = $("#diy_title").val();
						dataObj.remark =  $("#diy_remark").val();
						dataObj.use_number= $("#use_number").val();
						dataObj.id = diyId;
						dataObj.subject_id = parseInt($("#subject_id").val());
						dataObj.festival_id = parseInt($("#festival_id").val());
						dataObj.purpose_id = parseInt($("#purpose_id").val());
						dataObj.style_id = parseInt($("#style_id").val());
						dataObj.industry_id = parseInt($("#industry_id").val());
						
						if(!dataObj.title){
							alert('请输入标题');
							return false;
						}
						if(!dataObj.remark){
							alert('请输入简介');
							return false;
						}
						if(!dataObj.use_number){
							alert('请输入使用次数');
							return false;
						}
						if(!dataObj.subject_id){
							alert('请选择专题');
							return false;
						}
						if(!dataObj.festival_id){
							alert('请选择节日');
							return false;
						}
						
						if(!dataObj.purpose_id){
							alert('请选择用途');
							return false;
						}
						if(!dataObj.style_id){
							alert('请选择风格');
							return false;
						}
						if(!dataObj.industry_id){
							alert('请输入行业');
							return false;
						}
						
						sdzAjax.upDateDiy(dataObj,function(data){
							//console.log(data);
							window.location.href = '/admin/diy';
						});
						
						
					});
					
				});
				
			});
			
			
		});
	}
	//返回html
	function createHtml(text,val,key,initVal){
		
		var html = '<div class="category_item clearfix">';
				html+='<span class="category_item_title">'+ text +'</span>';
				html+='<div class="category_item_content clearfix">';
					var childSpan = '<select class="form_input" id="'+ key +'">';
					for(var i=0;i<val.length;i++){
						if(initVal!='undefined'&&initVal == val[i].id){
							childSpan+='<option value="'+ val[i].id +'" selected="selected">' + val[i].title + '</option>';
						}else{
							childSpan+='<option value="'+ val[i].id +'">' + val[i].title + '</option>';
						}
					}
					childSpan+='</select>'
					html+=childSpan;
				html+='</div>'
			html+='</div>';
				
		return html;
	}
	
	//判断diy id 存在
	function hasDiyId(){
	
		var did =  $("#diyId").val();
		
		if(did){
			$("#plate_input").remove();
			app.init(null,null,did);
		}else{
			//获取瓶子列表
			getBottle();
			$("#plate_input").show();
		}
	}
	
	//获取瓶子列表
	function getBottle(){
		
		sdzAjax.getBottle(function(res){
			console.log(res.bottle_list);
			var bottle_list = app.bottle_list = res.bottle_list;
			
			var html= '<select id="select_bottle" class="form_input">';
				html+='<option value="">-选择瓶子-</option>'
			for(var i = 0;i<bottle_list.length;i++){
				html += '<option value="'+ i +'">' + bottle_list[i].title + bottle_list[i].diy_width +'mm *'+bottle_list[i].diy_height + 'mm </option>';
			}
			html+='</select>';
			
			$("#select_bottle_content").html(html);
		});
		
	}
	
	$(document).ready(function(){
		
		$(".do-nicescroll").niceScroll();
		var mainCanvas = null;
		
		//判断有无diy
		hasDiyId();

		//新建画布
		$("#save_plate_btn").click(function(){
			
			var bottleVal = $("#select_bottle").val();
			
			console.log(bottleVal);
			if(!bottleVal){
				alert('请选择瓶子');
				return false;
			}
			
			app.bottle = app.bottle_list[bottleVal];
			app.init(app.bottle.diy_width,app.bottle.diy_height);
		
			$("#plate_input").hide();
			
		});
		
		//文字显示下拉
		$(".diy_top_nav_item").each(function(){
			
			$(this).click(function(){
				
				if($(this).hasClass('active')){
					$(".diy_top_nav_item").removeClass('active');
				}else{
					$(".diy_top_nav_item").removeClass('active');
					$(this).addClass('active');
				}
			})
			
		});
		
		//添加文字
		$("#add_text_btn").click(function(){
			
			var title=prompt("请输入内容","这是标题");
			if (title!=null && title!=""){
				app.addText(title);
			}
			
		})
		
		//上传图片
		$("#diy_bg_img_file").change(function(){
			var imgVal = $(this).val();
			if(!imgVal){
				return false;
			}
			var formData = new FormData($("#diy_bg_img_form")[0]);
			formData.append("image", imgVal);
			sdzAjax.uploadImg(formData,function(data){
				app.addImg(data.img_url);
				$("#diy_bg_img_file").val('');				
			});
		});
		
		
		//设置字体
		$("#changeFont > li").each(function(){
			
			$(this).click(function(){
				var fontVal = $(this).data('val');
				
				app.setActiveStyle('fontFamily',fontVal);
				$("#showFont").text(fontVal);
				
				var className = $(this).find('div')[0].className;
				$("#showFont").removeClass().addClass(className);
				
			});
			
		});
		
		//获取分类
		getMaterialType();
		//改变分类
		changeSelectMaterialType();
		//屏幕变化的时候
		windowResize();
		//自适应屏幕
		niceWindow();
		//改变元素的层级
		changeHierarchy();
		//复制
		app.cloneObject();
		//删除
		app.delObject();
		//设置颜色
		getColor()
		// 返回预览图
		previewCanvas();
		//关闭弹窗
		close_modal();
		//保存
		saveCanvas();

	});
})(jQuery)