easyc.min.js

function EasyC(e,t){if(this.canvas=null,this.objects=[],this.resource=[],e&&(this.canvas=e),t)for(var r=0;r<t.length;r++)this.objects[r]=this.cloneObject(t[r]);return this}EasyC.prototype.cloneObject=function(e){var t={};for(var r in e)if("object"==typeof e[r])if(Array.isArray(e[r])){t[r]=[];for(var i=0;i<e[r].length;i++)t[r][i]=e[r][i]}else t[r]=this.cloneObject(e[r]);else t[r]=e[r];return t},EasyC.prototype.degreeToRadian=function(e){return e/360*(2*Math.PI)},EasyC.prototype.radianToDegree=function(e){return e/(2*Math.PI)*360},EasyC.prototype.loadImage=function(e,t){var r=new Image,i=this.resource;r.onload=function(){i.push(r),t(i.length-1)},r.src=e},EasyC.prototype.setRelative=function(e){var t={coord:{x:!1,y:!1}};e.hasOwnProperty("relative")&&1==e.relative&&(t.coord.x=!0,t.coord.y=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("coord")&&1==e.relative.coord&&(t.coord.x=!0,t.coord.y=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("coord")&&e.relative.coord.hasOwnProperty("x")&&1==e.relative.coord.x&&(t.coord.x=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("coord")&&e.relative.coord.hasOwnProperty("y")&&1==e.relative.coord.y&&(t.coord.y=!0),"circle"==e.type?(t.radius=!1,e.hasOwnProperty("relative")&&1==e.relative&&(t.radius="width"),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("radius")&&1==e.relative.radius?t.radius="width":e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("radius")&&"width"==e.relative.radius?t.radius="width":e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("radius")&&"height"==e.relative.radius&&(t.radius="height")):"shape"==e.type?(t.size={width:!1,height:!1},e.hasOwnProperty("relative")&&1==e.relative&&(t.size.width=!0,t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&1==e.relative.size&&(t.size.width=!0,t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("width")&&1==e.relative.size.width&&(t.size.width=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("height")&&1==e.relative.size.height&&(t.size.height=!0)):"triangle"==e.type?(t.size={width:!1,height:!1},t.base=!1,e.hasOwnProperty("relative")&&1==e.relative&&(t.base="width"),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("base")&&(1==e.relative.base||"width"==e.relative.base)&&(t.base="width"),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("base")&&"height"==e.relative.base&&(t.base="height")):"rectangle"==e.type?(t.size={width:!1,height:!1},e.hasOwnProperty("relative")&&1==e.relative&&(t.size.width=!0,t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&1==e.relative.size&&(t.size.width=!0,t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("width")&&1==e.relative.size.width&&(t.size.width=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("height")&&1==e.relative.size.height&&(t.size.height=!0)):"text"==e.type?(t.width=!1,t.size=!1,e.hasOwnProperty("relative")&&1==e.relative&&(t.width=!0,t.size="width"),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("width")&&1==e.relative.width&&(t.width=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&(1==e.relative.size||"width"==e.relative.size)&&(t.size="width"),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&"height"==e.relative.size&&(t.size="height")):"image"==e.type&&(t.size={width:!1,height:!1},t.crop={coord:{x:!1,y:!1},size:{width:!1,height:!1}},e.hasOwnProperty("relative")&&1==e.relative&&(t.size.width=!0,t.size.height=!0,t.crop.coord.x=!0,t.crop.coord.y=!0,t.crop.size.width=!0,t.crop.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&1==e.relative.size&&(t.size.width=!0,t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("width")&&1==e.relative.size.width&&(t.size.width=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("size")&&e.relative.size.hasOwnProperty("height")&&1==e.relative.size.height&&(t.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&1==e.relative.crop&&(t.crop.coord.x=!0,t.crop.coord.y=!0,t.crop.size.width=!0,t.crop.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("coord")&&1==e.relative.crop.coord&&(t.crop.coord.x=!0,t.crop.coord.y=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("coord")&&e.relative.crop.coord.hasOwnProperty("x")&&1==e.relative.crop.coord.x&&(t.crop.coord.x=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("coord")&&e.relative.crop.coord.hasOwnProperty("y")&&1==e.relative.crop.coord.y&&(t.crop.coord.y=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("size")&&1==e.relative.crop.size&&(t.crop.size.width=!0,t.crop.size.height=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("size")&&e.relative.crop.size.hasOwnProperty("width")&&1==e.relative.crop.size.width&&(t.crop.size.width=!0),e.hasOwnProperty("relative")&&e.relative.hasOwnProperty("crop")&&e.relative.crop.hasOwnProperty("size")&&e.relative.crop.size.hasOwnProperty("height")&&1==e.relative.crop.size.height&&(t.crop.size.height=!0)),e.relative=t},EasyC.prototype.draw=function(e,t,r){if(r||(r=this.getSortedIndexes()),t||(t=0),t>=this.objects.length)return e&&e(),!0;var i=this.canvas.getContext("2d"),a=this.objects[r[t]];if(this.setRelative(a),"triangle"!=a.type||a.corners)"rectangle"!=a.type||a.corners||(a.corners=[[-1,-1],[1,-1],[1,1],[-1,1]]);else{var s=a.base;"width"==a.relative.base?s*=this.canvas.clientWidth:"height"==a.relative.base&&(s*=this.canvas.clientHeight),a.corners=[[-Math.sin(a.angleRight/2)/(Math.sin(Math.PI-a.angleLeft/2-a.angleRight/2)/s)*Math.cos(a.angleLeft/2),Math.sin(a.angleRight/2)/(Math.sin(Math.PI-a.angleLeft/2-a.angleRight/2)/s)*Math.sin(a.angleLeft/2)],[Math.sin(a.angleLeft/2)/(Math.sin(Math.PI-a.angleLeft/2-a.angleRight/2)/s)*Math.cos(a.angleRight/2),Math.sin(a.angleLeft/2)/(Math.sin(Math.PI-a.angleLeft/2-a.angleRight/2)/s)*Math.sin(a.angleRight/2)]],a.corners.push([a.corners[0][0]+Math.sin(a.angleRight)/(Math.sin(Math.PI-a.angleLeft-a.angleRight)/s)*Math.cos(a.angleLeft),a.corners[0][1]-Math.sin(a.angleRight)/(Math.sin(Math.PI-a.angleLeft-a.angleRight)/s)*Math.sin(a.angleLeft)]);var h=this.getSizeFromPoints(a.corners);a.width=h[0],a.height=h[1];for(var l=0;l<a.corners.length;l++)a.corners[l][0]=a.corners[l][0]/(a.width/2),a.corners[l][1]=a.corners[l][1]/(a.height/2)}var o={x:0,y:0};a.x&&(o.x=a.x),a.y&&(o.y=a.y),1==a.relative.coord.x&&(o.x*=this.canvas.clientWidth),1==a.relative.coord.y&&(o.y*=this.canvas.clientHeight);var n=[1,1];a.scale&&("number"==typeof a.scale?(n[0]=a.scale,n[1]=a.scale):Array.isArray(a.scale)&&(n=a.scale));var c=0;a.rotate&&(c=a.rotate);var v=1;if(a.opacity&&(v=a.opacity),a.fill&&"url"==a.fill.substr(0,3)){var p=this,d=a.fill.slice(4,-1).split(/[ ]*,[ ]*/g);return this.loadImage(d[0],function(i){a.fill="res("+i;for(var s=1;s<4;s++){var h="";1==s?h="0":2==s?h="1":3==s&&(h="no-repeat"),d[s]&&(h=d[s]),a.fill+=", "+h}a.fill+=")",p.draw(e,t,r)}),!0}if(a.stroke&&"url"==a.stroke.fill.substr(0,3)){p=this,d=a.stroke.fill.slice(4,-1).split(/[ ]*,[ ]*/g);return this.loadImage(d[0],function(i){a.stroke.fill="res("+i;for(var s=1;s<4;s++){var h="";1==s?h="0":2==s?h="1":3==s&&(h="no-repeat"),d[s]&&(h=d[s]),a.stroke.fill+=", "+h}a.stroke.fill+=")",p.draw(e,t,r)}),!0}if("image"==a.type&&"res"!=a.src.substr(0,3)){p=this;return this.loadImage(a.src,function(i){a.src="res("+i+")",p.draw(e,t,r)}),!0}if(a.font&&"url"==a.font.substr(0,3)){p=this;var g=(d=a.font.slice(4,-1).split(/[ ]*,[ ]*/g))[0].split("/"),w=g[g.length-1].split(".")[0];return new FontFace(w,"url("+g.join("/")+")").load().then(function(i){document.fonts.add(i),a.font=w,p.draw(e,t,r)}),!1}var y=!1;a.fill&&(y=this.getFill(a));var u=!1;if(a.stroke&&a.stroke.fill&&((u={}).fill=this.getFill(a,!0),a.stroke.thick?u.thick=a.stroke.thick:u.thick=1),i.save(),i.globalCompositeOperation="source-over",i.translate(o.x,o.y),i.rotate(c),i.scale(n[0],n[1]),i.globalAlpha=v,"circle"==a.type){var z=a.radius;"width"==a.relative.radius?z*=this.canvas.clientWidth:"height"==a.relative.radius&&(z*=this.canvas.clientHeight);var f=[0,2*Math.PI];a.segment&&(f=a.segment),i.beginPath(),i.arc(0,0,z,f[0],f[1]),i.closePath()}else if("shape"==a.type||"triangle"==a.type||"rectangle"==a.type)this.drawShape(a);else if("text"==a.type){var P=a.font,O=a.align;h=a.size;"width"==a.relative.size?h*=this.canvas.clientWidth:"height"==a.relative.size&&(h*=this.canvas.clientHeight),i.textAlign=O,i.font=h+"px "+P,i.textBaseline="middle"}else if("image"==a.type){var x=this.resource[parseInt(a.src.slice(4,-1))],M=null,b=null;a.width&&(M=a.width,1==a.relative.size.width&&(M*=this.canvas.clientWidth)),a.height&&(b=a.height,1==a.relative.size.height&&(b*=this.canvas.clientHeight)),null==M&&null==b?(M=x.naturalWidth,b=x.naturalHeight):null==M?M=b*(x.naturalWidth/x.naturalHeight):null==b&&(b=M/(x.naturalWidth/x.naturalHeight));var W=[0,0,x.naturalWidth,x.naturalHeight];a.crop&&(W=a.crop,1==a.relative.crop.coord.x&&(W[0]*=x.naturalWidth),1==a.relative.crop.coord.y&&(W[1]*=x.naturalHeight),1==a.relative.crop.size.width&&(W[2]*=x.naturalWidth),1==a.relative.crop.size.height&&(W[3]*=x.naturalHeight)),i.drawImage(this.resource[parseInt(a.src.slice(4,-1))],W[0],W[1],W[2],W[3],-M/2,-b/2,M,b)}if(0!=y)if(i.fillStyle=y,"text"==a.type){M=200;a.width&&(M=a.width,1==a.relative.width&&(M*=this.canvas.clientWidth));h=a.size;"width"==a.relative.size?h*=this.canvas.clientWidth:"height"==a.relative.size&&(h*=this.canvas.clientHeight);var I=a.value.split("\n");for(l=0;l<I.length;l++)i.fillText(I[l],0,l*h,M)}else i.fill();if(0!=u)if(i.strokeStyle=u.fill,i.lineWidth=u.thick,"text"==a.type){M=200,O=a.align;a.width&&(M=a.width,1==a.relative.width&&(M*=this.canvas.clientWidth));h=a.size;"width"==a.relative.size?h*=this.canvas.clientWidth:"height"==a.relative.size&&(h*=this.canvas.clientHeight);for(I=a.value.split("\n"),l=0;l<I.length;l++)i.strokeText(I[l],0,l*h,M)}else i.stroke();i.restore(),this.draw(e,++t,r)},EasyC.prototype.getFill=function(e,t){var r=!1,i=e.fill;t&&(i=e.stroke.fill);var a=this.canvas.getContext("2d");if("#"==i.substr(0,1))r=i;else if("grad"==i.substr(0,4)){var s=i.slice(5,-1).split(/[ ]*,[ ]*/g),h=this.getSize(e),l=Math.sqrt(Math.pow(h[0],2)+Math.pow(h[1],2))/2;if("linear"==s[0]){var o=parseFloat(this.degreeToRadian(s[1]));r=a.createLinearGradient(-l*Math.cos(o),-l*Math.sin(o),l*Math.cos(o),l*Math.sin(o));for(var n=2;n<s.length;n+=2)r.addColorStop(parseFloat(s[n]),s[n+1])}else if("radial"==s[0]){r=a.createRadialGradient(0,0,1,0,0,l);for(n=1;n<s.length;n+=2)r.addColorStop(parseFloat(s[n]),s[n+1])}}else if("res"==i.substr(0,3)){var c=(s=i.slice(4,-1).split(/[ ]*,[ ]*/g))[3];r=a.createPattern(this.resource[parseInt(s[0])],c);var v=this.resource[parseInt(s[0])],p=s[1].split("/"),d=s[2].split("/");h=this.getSize(e);1==d.length?d=[parseFloat(d[0]),parseFloat(d[0])]:2==d.length&&(d=[parseFloat(d[0]),parseFloat(d[1])]),1==p.length?p=[parseFloat(p[0])*h[0]/d[0]-v.naturalWidth/2,parseFloat(p[0])*h[1]/d[1]-v.naturalHeight/2]:2==p.length&&(p=[parseFloat(p[0])*h[0]/d[0]-v.naturalWidth/2,parseFloat(p[1])*h[1]/d[1]-v.naturalHeight/2]);var g=new DOMMatrix;r.setTransform(g.scale(d[0],d[1]).translate(p[0],p[1]))}return r},EasyC.prototype.getSize=function(e){if("circle"==e.type){var t=e.radius;return"width"==e.relative.radius?t*=this.canvas.clientWidth:"height"==e.relative.radius&&(t*=this.canvas.clientHeight),[2*t,2*t]}if("shape"==e.type||"triangle"==e.type||"rectangle"==e.type){var r=e.width,i=e.height;return 1==e.relative.size.width&&(r*=this.canvas.clientWidth),1==e.relative.size.height&&(i*=this.canvas.clientHeight),[r,i]}if("text"==e.type){r=e.width,i=e.size;return 1==e.relative.width&&(r*=this.canvas.clientWidth),"width"==e.relative.size?i*=this.canvas.clientWidth:"width"==e.relative.size&&(i*=this.canvas.clientHeight),[r,i]}},EasyC.prototype.getSizeFromPoints=function(e){for(var t=[null,null],r=[null,null],i=0;i<e.length;i++)(null==t[0]||e[i][0]<t[0])&&(t[0]=e[i][0]),(null==t[1]||e[i][0]>t[1])&&(t[1]=e[i][0]),(null==r[0]||e[i][1]<r[0])&&(r[0]=e[i][1]),(null==r[1]||e[i][1]>r[1])&&(r[1]=e[i][1]);return[t[1]-t[0],r[1]-r[0]]},EasyC.prototype.drawShape=function(e){var t=this.canvas.getContext("2d"),r=e.width,i=e.height;1==e.relative.size.width&&(r*=this.canvas.clientWidth),1==e.relative.size.height&&(i*=this.canvas.clientHeight),t.beginPath();for(var a=0;a<e.corners.length;a++){var s=[e.corners[a][0]*r/2,e.corners[a][1]*i/2];0==a?t.moveTo(s[0],s[1]):t.lineTo(s[0],s[1])}t.closePath()},EasyC.prototype.getSortedIndexes=function(){for(var e=[],t=this.objects,r=0;r<t.length;r++)t[r].z||(t[r].z=0),e[r]=r;for(r=0;r<t.length-1;r++)for(var i=0;i<t.length-1-r;i++)if(t[e[i]].z>t[e[i+1]].z){var a=e[i];e[i]=e[i+1],e[i+1]=a}return e};