diymall-water/WebRoot/wap/js/wDiy.js

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

;(function($){
	var app = new Object();
	/*设置 当前活动元素或指定元素的样式*/
	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.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.returnCanvasJson = function(){
		var that = this;
		return that.mainCanvas.toJSON([
					'borderColor',
					'cornerColor',
					'cornerStyle',
					'cornerSize',
					'rotatingPointOffset',
					'borderDashArray',
					'plateRATIO',
					'viewportTransform',
					'oldCutWidth',
					'oldCutHeight',
					'width',
					'height',
					'_controlsVisibility'
              ]);
	}
	//把当前画布保存成图片
	app.returnCanvasImg = function(width){
		
		var that= this;
		app.outputWidth = width || 500 ;
		app.outputHeight = app.outputWidth/app.plateRATIO;
		
		//新的缩放比例
		var afterCutRATIO = 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.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;
			}

		}
		
		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 = 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();
        
	}
	
	//canvas 检测按下
	app.dowmCanvas = function(){
		
		var canvas = this.mainCanvas;
		
		canvas.on('mouse:down',function(options){
			
			if(options.target && options.target.type=='i-text'){
				
				$(".djsy-text-edit-wrap").addClass('djsy-text-edit-ani');
				
			}else{
				$(".djsy-text-edit-wrap").removeClass('djsy-text-edit-ani');
			}
			
			if(options.target){
				$(".djys-align-wrap").removeClass('djys-align-ani');
			}else{
				$(".djys-align-wrap").addClass('djys-align-ani');
			}
			
		});
		
		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.addText = function(texts){
		var that = this;
		
		var text = new fabric.IText(texts, {
			fontSize: 30,
			textAlign:'left',
			cornerStyle:'circle',
			borderColor:'#000',
			cornerColor: '#000',
			fontFamily:'Microsoft YaHei',
			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.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);
				util.hideTip();
				
				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);
				},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获取错误')
		}
		
		//监控diy 事件
		app.dowmCanvas();
		//删除
		app.delObject();
	}
	
	//屏幕变化的时候 
	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);
				app.resizeCanvasSize();
				//app.resizeRender();
			}
			
		})
	}
	
	//层级修改
	function changeHierarchy(){
		
		$("#view_ward .djys-align-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,#djsy_color_default > span").each(function(){
				
				$(this).click(function(){
					var color = $(this).data('color');
					app.setActiveStyle('fill',color);
					mui('#djsy_text_color_panel').popover('hide');
				})
			})
		});
	}
	
	//预览效果
	function previewCanvas(){
		
	/*	$("#diy_preview").click(function(){
			var imgUrl =  app.returnCanvasImg(60);
			
			$("#previewCanvas").show();
			var img = '<img class="previewImg" src="'+ imgUrl +'"/>';
			$("#previewImgWrap").html(img);
			
		});*/
		
		$("#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);

				}
			}
		});
		
		$(".close_preview").click(function(){
			$("#previewCanvas").hide();
		})
	}
	
	//添加文字弹窗
	function popAddText(text){
		
		var title=prompt("请输入内容",text);
		if (title!=null && title!=""){
			app.addText(title);
		}
		
	}
	app.mtid = null;
	//获取分类 sdzAjax
	function getMaterialType(){
		
		if(!app.mtid){
			util.tipHtml('loading','正在加载');
			sdzAjax.getMaterialType(function(res){
				var list = res.list;
				var html = '';
				var i =0;
				res.list.forEach(function(item){
					if(i==0){
						html+='<span class="active" data-id="'+ item.id +'">'+ item.title +'</span>';
					}else{
						html+='<span data-id="'+ item.id +'">'+ item.title +'</span>';
					}
					i++;
				});
				
				$("#djsy-source-list-left").html(html);
				
				//
				app.mtid = list[0].id;
				getMaterial(app.mtid);
				changeSelectMaterialType();
				
			});
		
		}
		
	}

	function changeSelectMaterialType(){
		
		$("#djsy-source-list-left >span").each(function(){
			
			$(this).unbind('click').click(function(){
				
				$(this).addClass('active').siblings('span').removeClass('active');
				
				var id = $(this).data('id');
				
				if(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+='<li class="box_item" data-imgUrl="'+ res.list[i].img_url +'">';
					html+='<div class="dsjy_trend_wrap">';
						html+='<img src="'+res.list[i].img_url+'" />';
						html+='<span>'+res.list[i].title+'</span>';
					html+='</div>';
				html+='</li>';
			}
			
			util.hideTip();
			$("#djsy_source_contant_ul").html(html);
			
			$(".box_item").each(function(){
				
				$(this).unbind('click').click(function(){
					//添加设计图
					var imgUrl = $(this).data('imgurl');
					app.addImg(imgUrl);
					
					$(".djsy-pop-wrap").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(100),
				content:JSON.stringify(app.returnCanvasJson()),
				type:app.typeId
			}
			sdzAjax.saveDiy(data,function(data){
				alert(data.msg + '请到个人中心-我的定制查看');
				window.location.href = '/wap/user/diy';
			});
			
		});
		
		$("#diy_cart_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(100),
				content:JSON.stringify(app.returnCanvasJson()),
				type:app.typeId
			}
			sdzAjax.addCart(data,function(data){
				alert(data.msg);
				window.location.href = '/wap/shop/cart';
			});
			
		})
	}
	
	$(document).ready(function(){

		var did = $("#diyId").val();
		var typeId = $("#diytype").val();
		
		//展开功能区
		$(".add_icon").click(function(){
			$(".func_add").toggleClass("func_add_click")

			$(".djsy-position-view-wrap").addClass('djsy-position-view-ani')
			$("#djsy_full_sceen").fadeOut();
		});
		//添加图片
		$("#diy_bg_img_file").change(function(){
		
			var imgVal = $(this).val();
			if(!imgVal){
				return false;
			}
			var formData = new FormData($("#diy_bg_img_form")[0]);
			sdzAjax.uploadImg(formData,function(data){
				app.addImg(data.img_url);
				$("#diy_bg_img_file").val('');				
			});
			
		});
		
		//添加文字
		$("#djsy_add_text_btn").click(function(){
			popAddText('输入内容');
		});
		
		//设置字体
		$("#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);
				
				mui('#djsy_text_edit_popover').popover('toggle');
			});
			
		});
		
		//选择项目图片
		$("#djsy_add_source_btn").click(function(){
			
			$(".djsy-pop-wrap").show();
			getMaterialType();
			
		});
		//关闭项目图片
		$("#close_pop").click(function(){
			$(".djsy-pop-wrap").hide();
		});
		
		app.init(did,typeId);
		//屏幕自适应
		//windowResize();
		//层级修改
		changeHierarchy();
		//获得颜色
		getColor();
		//预览效果
		previewCanvas();
		//保存
		saveCanvas();
		
	});
	
	
})(jQuery);