;(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+=''; }) $("#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'; html+='
'; html+='

'; html+='

'+res.list[i].title+'

'; html+='
'; html+=''; } $("#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 = '
{span}
' var spanContent = '' for( var item in data.colorPanel){ var span = '' for(var i=0;i 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 = ''; $("#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 = '
'; html+=''+ text +''; html+='
'; var childSpan = '' html+=childSpan; html+='
' html+='
'; 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_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)