diymall-water/WebRoot/www/js/pcDiy.js

var util = require('./util');
var sdzAjax = require('./sdzAjax');

;(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(did,typeId){
		
		//diy 基础宽度
		app.baseWidth = $(".diy_canvas_wrap").width();
		app.baseHeight = $(".diy_canvas_wrap").height();
		
		
		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;
			
			if(typeId){
				app.typeId = typeId;
			}
			
			util.tipHtml('loading','正在加载');

			sdzAjax.getDiy({id:app.diyId,type:app.typeId},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(){
					util.hideTip();
					app.resizeCanvasSize();
					app.resizeRender();
					app.mainCanvas.renderAll.bind(app.mainCanvas)
				},function(o,obj){
					obj.hasControls = false;
					obj.lockMovementX = obj.lockMovementY = true;
					app.mainCanvas.renderAll();
				});
				
				app.bottle = {
					id:$("#bottle_id").val(),
					img_url:$("#bottle_img_url").val()
				}
				
			});
		}else{
			alert('diy获取错误')
		}
		
		app.dowmCanvas(app.mainCanvas);
		//获取产品分类
		getMaterialType();
	}

	
	//获取分类 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(){
				console.log(img.onload);
				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;
			}
			util.tipHtml('loading','正在提交');
			
			var data = {
				id :app.diyId,
				img_url:app.returnCanvasImg(200),
				content:JSON.stringify(app.returnCanvasJson()),
				type:app.typeId || ''
			}
			
			sdzAjax.saveDiy(data,function(data){
				
				alert(data.msg +'请到个人中心-我的定制中查看');
				window.location.href = '/user/diy';
				
			},function(err){
				alert(err.msg);
				window.location.href = '/login';
			});
			
		});
		
		$("#addCart").click(function(){
			//
			var obj = app.mainCanvas._objects;
			if(obj.length<=0){
				alert("请添加内容");
				return false;
			}
			
			util.tipHtml('loading','正在提交');
			
			var data = {
				id :app.diyId,
				img_url:app.returnCanvasImg(200),
				content:JSON.stringify(app.returnCanvasJson()),
				type:app.typeId || ''
			}
			
			sdzAjax.addCart(data,function(data){
				
				alert(data.msg);
				window.location.href = '/shop/cart';
				
			},function(err){
				alert(err.msg);
				//window.location.href = '/login';
			});
			
			
		})
	}

	$(document).ready(function(){
		var did =  $("#diyId").val();
		var typeId = $("#diytype").val();
		
		if(!did){
			alert("获取内容失败")
			return false;
		}
		app.init(did,typeId);
		
		$(".do-nicescroll").niceScroll();
		
		//文字显示下拉
		$(".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);
				
			});
			
		});
		
		
		//改变分类
		changeSelectMaterialType();
		//屏幕变化的时候
		windowResize();
		//自适应屏幕
		niceWindow();
		//改变元素的层级
		changeHierarchy();
		//复制
		app.cloneObject();
		//删除
		app.delObject();
		//设置颜色
		getColor()
		// 返回预览图
		previewCanvas();
		//关闭弹窗
		close_modal();
		//保存
		saveCanvas();

	});
})(jQuery)