/** * Loren * * imgMerge 1.0.2 * * Released on: August 1, 2018 */ (function() { function imgMergeClass(options){ // data默认值 /* * { * val:'xxxx.png', // 文字或图片 必填 * x:0, // x坐标 非必填 * y:0, // y坐标 非必填 * color:'#000', // 字体颜色 非必填 * fontSize:"12px", // 字体大小 非必填 * fontFamily:"Arial", // 字体 非必填 * fontAlign:"left", // 字体对齐 非必填 * zIndex:"", // 层级 非必填 * scale:1, // 缩放 非必填 * rotation:0, // 旋转 非必填 * } */ this.fontFamily = '"Arial", "Verdana", "sans-serif"'; // 默认参数 this.options = { canvasEl:null, cWidth:750, cHeight:1206, data:[], moveIndex:null, parentBoxEl:'', bgColor:"#ffffff" }; // 图片判断正则 this.imgReg = /.png|.jpg/i; // base64 正则 this.base64Reg = /^data:image\/(jpeg|png|gif);base64,/; // 第一次加载完成的数量 this.loadEndIndex = 0; for ( var i in options ) { this.options[i] = options[i]; } if(this.options.canvasEl){ this.canvas = this.options.canvasEl; }else{ this.canvas = document.createElement('canvas'); } if(this.options.parentBoxEl != ''){ this.viewAdaptation(); }else{ this.canvas.width = this.options.cWidth; this.canvas.height = this.options.cHeight; } this.stage = new createjs.Stage(this.canvas); this.container = new createjs.Container(); // 添加背景色 this.addBgColor(); // 默认参数合并 for ( var i in options ) { this.options[i] = options[i]; } this.dataInit(); } // 添加背景色 imgMergeClass.prototype.addBgColor = function(){ var graphics = new createjs.Graphics().beginFill(this.options.bgColor).drawRect(0, 0, this.options.cWidth, this.options.cHeight); var shape = new createjs.Shape(graphics); this.stage.addChild(shape,this.container); } // 元素初始化 imgMergeClass.prototype.dataInit = function(){ var dataLength = this.options.data.length; if(this.options.moveIndex != null){ var id = this.getIdData(this.options.moveIndex); if(id != -1){ this.options.moveIndex = id; }else if(!this.options.data[this.options.moveIndex]){ this.options.moveIndex = null; } } for(var d = 0;d= 0.05){ _this.fileImg.scaleX = scale; _this.fileImg.scaleY = scale; } }.bind(this)); this.hammer.on("pinchend", function (e) { if(!this.fileImg)return false; this.hammerData.lastScale = _this.fileImg.scaleY-1; this.hammerData.beginScale = -1; this.hammerData.isFirst = false; }.bind(this)) this.hammer.on("pan", function (e) { if(!this.fileImg)return false; var y = _this.fileImg.y + (e.deltaY - this.hammerData.oldLateY)*2; var x = _this.fileImg.x + (e.deltaX - this.hammerData.oldLateX)*2; this.hammerData.oldLateX = e.deltaX; this.hammerData.oldLateY = e.deltaY; _this.fileImg.x = x; _this.fileImg.y = y; }.bind(this)); this.hammer.on("panend", function (e) { if(!this.fileImg)return false; this.hammerData.oldLateX = 0; this.hammerData.oldLateY = 0; }.bind(this)); this.hammer.on("rotatestart", function (e) { if(!this.fileImg)return false; this.hammerData.oldAngel = e.rotation; }.bind(this)) this.hammer.on("rotatemove", function (e) { if(!this.fileImg)return false; var oldAngel = e.rotation - this.hammerData.oldAngel; this.hammerData.oldAngel = e.rotation; _this.fileImg.rotation += oldAngel; }.bind(this)); this.hammer.on("rotateend", function (e) { if(!this.fileImg)return false; }.bind(this)); this.hammer.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); this.hammer.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(this.hammer.get('pan')); this.hammer.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([this.hammer.get('pan'), this.hammer.get('rotate')]); createjs.Ticker.framerate = 30; createjs.Ticker.addEventListener("tick", this.stage); } // 元素校验 imgMergeClass.prototype.dataCheck = function(obj,index,length){ // 如果没有index 就是单独新增 // 判断是不是图片 if(this.imgReg.test(obj.val) || this.base64Reg.test(obj.val)){ var imgX = obj.x || 0; var imgY = obj.y || 0; var imgScale = obj.scale || 1; var imgRotation = obj.rotation || 0; var imgN = new Image(); imgN.src = obj.val; if(typeof index === "number"){ imgN.index = index; }else{ imgN.index = this.options.data.length-1; } imgN.data = obj; imgN.onload = function(){ var img = new createjs.Bitmap(imgN); img.x = imgX; img.y = imgY; img.scaleX = imgScale; img.scaleY = imgScale; img.rotation = imgRotation; var shapeValIndex = imgN.index; this.options.data[shapeValIndex].val = img; if(typeof index === "number"){ this.imgDataInit(img); if(this.options.moveIndex == shapeValIndex){ this.isAddImgEvent(imgN.data.moveIndex); } ++this.loadEndIndex; }else{ // 判断需不需要更新需要移动的元素 if(this.options.moveIndex){ this.fileImg = this.options.data[this.options.moveIndex].val; var fileImgW = this.fileImg.getBounds().width/2; var fileImgH = this.fileImg.getBounds().height/2; if(this.fileImg.regX != fileImgW && this.fileImg.regY != fileImgH){ this.imgDataInit(this.fileImg); } } } // 判断图片是否铺满剧中 if(imgN.data.align == 'center'){ if(imgN.width > imgN.height){ var scale = this.options.cWidth/imgN.width; }else{ var scale = this.options.cHeight/imgN.height; } if(imgN.width > this.options.cWidth || imgN.height > this.options.cHeight){ img.scaleX = scale; img.scaleY = scale; img.x -= (imgN.width - imgN.width*scale)/2; img.y -= (imgN.height - imgN.height*scale)/2; img.x += this.options.cWidth/2 - imgN.width*scale/2; img.y += this.options.cHeight/2 - imgN.height*scale/2; }else{ img.x += this.options.cWidth/2 - imgN.width*img.scaleX/2; img.y += this.options.cHeight/2 - imgN.height*img.scaleX/2; } } // 执行图片加载完成的回调 if(typeof imgN.data.callback == 'function'){ imgN.data.callback(img,imgN.width,imgN.height); } this.container.addChild(img); this.stage.update(); this.dataSort(); if(this.loadEndIndex >= length){ this.loadingEnd(); } }.bind(this); imgN.onerror = function(){ alert("图片地址错误"); } }else{ // 文字默认参数 var defaultObj = { x:0, y:0, color:'#000', fontSize:"12px", fontFamily:this.fontFamily, fontAlign:"left", val:'', scale:1, rotation:0, callback:null } for ( var i in defaultObj) { defaultObj[i] = obj[i]; } obj = defaultObj; var textN = new createjs.Text(obj.val, obj.fontSize+" "+obj.fontFamily, obj.color); textN.setTransform(obj.x,obj.y,obj.scale,obj.scale,obj.rotation); textN.textAlign = obj.fontAlign; this.container.addChild(textN); if(typeof index === "number"){ this.options.data[index].val = textN; if(this.options.moveIndex == index){ this.isAddImgEvent(obj.moveIndex); } ++this.loadEndIndex; }else{ this.options.data[this.options.data.length-1].val = textN; this.dataSort(); } if(typeof obj.callback == 'function'){ obj.callback(); } } }; imgMergeClass.prototype.imgDataInit = function (file){ var fileImgW = file.getBounds().width/2; var fileImgH = file.getBounds().height/2; var regX = fileImgW - file.regX; var regY = fileImgH - file.regY; file.regX = regX; file.regY = regY; var fileImgX = file.scaleX*regX; var fileImgY = file.scaleX*regY; file.x += fileImgX; file.y += fileImgY; return file; } // 全部元素加载完成 imgMergeClass.prototype.loadingEnd = function (){ this.dataSort(); this.update(); if(typeof this.options.firstAllLoadEnd == 'function'){ this.options.firstAllLoadEnd(); } } // 添加元素到画布 imgMergeClass.prototype.addData = function(data){ var arr = []; if(typeof data === 'object' && data.val){ arr.push(data); data = arr; } if(data instanceof Array){ for(var i = 0,dataLength = data.length;i