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.

๐Ÿ›  revise Illo setSizeSvg

+35 -30
+4
demo/flex-size/flex-size.js
··· 22 22 var svgIllo = new Zdog.Illustration({ 23 23 element: 'svg', 24 24 zoom: zoom, 25 + resize: true, 25 26 dragRotate: model, 26 27 onDragStart: function() { 27 28 isSpinning = false; 29 + }, 30 + onResize: function( width, height ) { 31 + this.zoom = Math.min( width, height ) / 50; 28 32 }, 29 33 }); 30 34
-2
demo/patties/index.html
··· 25 25 margin: 0px auto 20px; 26 26 cursor: move; 27 27 } 28 - 29 - svg.illo { max-width: 600px; } 30 28 </style> 31 29 32 30 </head>
-1
demo/strutter/index.html
··· 26 26 cursor: move; 27 27 } 28 28 29 - svg.illo { max-width: 600px; } 30 29 </style> 31 30 32 31 </head>
+1 -1
demo/strutter/strutter.js
··· 15 15 var midnight = '#424'; 16 16 17 17 var illo = new Zdog.Illustration({ 18 - element: illoElem, 18 + element: '.illo', 19 19 zoom: zoom, 20 20 rotate: { y: -TAU/8 }, 21 21 translate: { y: 4 },
-2
demo/template/index.html
··· 25 25 margin: 0px auto 20px; 26 26 cursor: move; 27 27 } 28 - 29 - svg.illo { max-width: 600px; } 30 28 </style> 31 29 32 30 </head>
+30 -24
js/illustration.js
··· 69 69 } 70 70 }; 71 71 72 - Illustration.prototype.measureSize = function() { 73 - var width, height; 74 - if ( this.resize == 'fullscreen' ) { 75 - width = window.innerWidth; 76 - height = window.innerHeight; 77 - } else { 78 - var rect = this.element.getBoundingClientRect(); 79 - width = rect.width; 80 - height = rect.height; 81 - } 82 - this.setSize( width, height ); 83 - }; 84 - 85 72 Illustration.prototype.setResize = function( resize ) { 86 73 this.resize = resize; 87 74 // create resize event listener ··· 99 86 100 87 // TODO debounce this? 101 88 Illustration.prototype.onWindowResize = function() { 102 - this.measureSize(); 89 + this.setMeasuredSize(); 103 90 this.onResize( this.width, this.height ); 104 91 }; 105 92 93 + Illustration.prototype.setMeasuredSize = function() { 94 + var width, height; 95 + var isFullscreen = this.resize == 'fullscreen'; 96 + if ( isFullscreen ) { 97 + width = window.innerWidth; 98 + height = window.innerHeight; 99 + } else { 100 + var rect = this.element.getBoundingClientRect(); 101 + width = rect.width; 102 + height = rect.height; 103 + } 104 + this.setSize( width, height ); 105 + }; 106 + 106 107 // ----- render ----- // 107 108 108 109 Illustration.prototype.renderGraph = function( item ) { ··· 135 136 this.height = height; 136 137 // up-rez for hi-DPI devices 137 138 var pixelRatio = this.pixelRatio = window.devicePixelRatio || 1; 138 - this.element.width = width * pixelRatio; 139 - this.element.height = height * pixelRatio; 139 + this.element.width = this.canvasWidth = width * pixelRatio; 140 + this.element.height = this.canvasHeight = height * pixelRatio; 140 141 if ( pixelRatio > 1 ) { 141 142 this.element.style.width = width + 'px'; 142 143 this.element.style.height = height + 'px'; ··· 154 155 var ctx = this.ctx; 155 156 ctx.lineCap = 'round'; 156 157 ctx.lineJoin = 'round'; 157 - ctx.clearRect( 0, 0, this.width, this.height ); 158 + ctx.clearRect( 0, 0, this.canvasWidth, this.canvasHeight ); 158 159 ctx.save(); 159 160 if ( this.centered ) { 160 161 ctx.translate( this.width/2, this.height/2 ); ··· 178 179 var width = element.getAttribute('width'); 179 180 var height = element.getAttribute('height'); 180 181 this.setSizeSvg( width, height ); 181 - // remove size attributes, let size be determined by viewbox 182 - element.removeAttribute('width'); 183 - element.removeAttribute('height'); 184 182 }; 185 183 186 184 Illustration.prototype.setSizeSvg = function( width, height ) { ··· 192 190 var viewY = this.centered ? -viewHeight/2 : 0; 193 191 this.element.setAttribute( 'viewBox', viewX + ' ' + viewY + ' ' + 194 192 viewWidth + ' ' + viewHeight ); 193 + if ( this.resize ) { 194 + // remove size attributes, let size be determined by viewbox 195 + this.element.removeAttribute('width'); 196 + this.element.removeAttribute('height'); 197 + } else { 198 + this.element.setAttribute( 'width', width ); 199 + this.element.setAttribute( 'height', height ); 200 + } 195 201 }; 196 202 197 203 Illustration.prototype.renderGraphSvg = function( item ) { ··· 230 236 var moveX = pointer.pageX - this.dragStartX; 231 237 var moveY = pointer.pageY - this.dragStartY; 232 238 var displaySize = Math.min( this.width, this.height ); 233 - var moveRX = moveX / displaySize * TAU; 234 - var moveRY = moveY / displaySize * TAU; 235 - this.dragRotate.rotate.x = this.dragStartRX - moveRY; 236 - this.dragRotate.rotate.y = this.dragStartRY - moveRX; 239 + var moveRY = moveX / displaySize * TAU; 240 + var moveRX = moveY / displaySize * TAU; 241 + this.dragRotate.rotate.x = this.dragStartRX - moveRX; 242 + this.dragRotate.rotate.y = this.dragStartRY - moveRY; 237 243 Dragger.prototype.dragMove.apply( this, arguments ); 238 244 }; 239 245