Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fixing script so that uglifyjs works

+11 -8
+4 -2
js/index.js
··· 24 24 require('./hemisphere'), 25 25 require('./cylinder'), 26 26 require('./cone'), 27 - require('./box') 27 + require('./box'), 28 + require('./texture') 28 29 ); 29 30 } else if ( typeof define == 'function' && define.amd ) { 30 31 /* globals define */ // AMD ··· 33 34 /* eslint-disable max-params */ 34 35 } )( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor, 35 36 Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect, 36 - Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box ) { 37 + Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box, Texture ) { 37 38 /* eslint-enable max-params */ 38 39 39 40 Zdog.CanvasRenderer = CanvasRenderer; ··· 53 54 Zdog.Cylinder = Cylinder; 54 55 Zdog.Cone = Cone; 55 56 Zdog.Box = Box; 57 + Zdog.Texture = Texture; 56 58 57 59 return Zdog; 58 60 } );
+7 -6
js/texture.js
··· 25 25 y3 - y1, x1 - x3, x3*y1 - x1*y3, 26 26 y1 - y2, x2 - x1, x1*y2 - x2*y1]; 27 27 let det = tp[2] + tp[5] + tp[8]; 28 - return tp.map(x => x / det); 28 + return tp.map(function(x) { return x / det;}); 29 29 } 30 30 31 31 function parsePointMap(size, map) { ··· 134 134 this.pattern = ctx.createPattern(this.img, "repeat"); 135 135 } else { 136 136 this.pattern = this.linearGrad 137 - ? ctx.createLinearGradient(...this.linearGrad) 138 - : ctx.createRadialGradient(...this.radialGrad); 137 + ? ctx.createLinearGradient.apply(ctx, this.linearGrad) 138 + : ctx.createRadialGradient.apply(ctx, this.radialGrad); 139 139 if (this.colorStops) { 140 140 for (var i = 0; i < this.colorStops.length; i+=2) { 141 141 this.pattern.addColorStop(this.colorStops[i], this.colorStops[i+1]); ··· 145 145 } 146 146 // pattern.setTransform is not supported in IE, 147 147 // so transform the context instead 148 - ctx.transform(...this.getMatrix()); 148 + ctx.transform.apply(ctx, this.getMatrix()); 149 149 return this.pattern; 150 150 }; 151 151 ··· 190 190 this.attrTransform = "gradientTransform"; 191 191 } 192 192 this.svgPattern.setAttribute("id", "texture_" + this.id); 193 + this._svgUrl = 'url(#texture_' + this.id + ')'; 193 194 194 195 this.defs = document.createElementNS(svgURI, 'defs' ); 195 196 this.defs.appendChild(this.svgPattern); 196 197 } 197 198 198 - this.svgPattern.setAttribute(this.attrTransform, `matrix(${this.getMatrix().join(' ')})`); 199 + this.svgPattern.setAttribute(this.attrTransform, 'matrix(' + this.getMatrix().join(' ') + ')'); 199 200 svg.appendChild( this.defs ); 200 - return `url(#texture_${this.id})`; 201 + return this._svgUrl; 201 202 } 202 203 203 204 // ----- update ----- //