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.

๐Ÿ”” resize: 'fullscreen'

+128 -4
+1 -1
demo/flex-size/flex-size.js
··· 13 13 isSpinning = false; 14 14 }, 15 15 onResize: function( width, height ) { 16 - canvasIllo.zoom = width / 50; 16 + this.zoom = Math.min( width, height ) / 50; 17 17 }, 18 18 }); 19 19
+68
demo/fullscreen/fullscreen.js
··· 1 + // ------------------------- demo ------------------------- // 2 + 3 + var zoom = 4; 4 + var isSpinning = true; 5 + var TAU = Zdog.TAU; 6 + 7 + var illo = new Zdog.Illustration({ 8 + element: 'canvas', 9 + zoom: zoom, 10 + resize: 'fullscreen', 11 + dragRotate: true, 12 + onDragStart: function() { 13 + isSpinning = false; 14 + }, 15 + onResize: function( width, height ) { 16 + this.zoom = Math.min( width, height ) / 50; 17 + }, 18 + }); 19 + 20 + // ----- model ----- // 21 + 22 + new Zdog.Rect({ 23 + width: 20, 24 + height: 20, 25 + addTo: illo, 26 + translate: { z: -10 }, 27 + stroke: 2, 28 + color: '#E21', 29 + }); 30 + 31 + new Zdog.Ellipse({ 32 + diameter: 16, 33 + addTo: illo, 34 + translate: { z: 10 }, 35 + stroke: 4, 36 + color: '#19F', 37 + }); 38 + 39 + new Zdog.Shape({ 40 + path: [ 41 + { x: 0, z: 1 }, 42 + { x: -1, z: -1 }, 43 + { x: 1, z: -1 }, 44 + ], 45 + scale: { x: 5, z: 5 }, 46 + addTo: illo, 47 + stroke: 2, 48 + fill: true, 49 + color: '#EA0', 50 + }); 51 + 52 + new Zdog.Shape({ 53 + translate: { x: 10, y: -5 }, 54 + addTo: illo, 55 + stroke: 7, 56 + color: '#246', 57 + }); 58 + 59 + // ----- animate ----- // 60 + 61 + function animate() { 62 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 63 + illo.updateRenderGraph(); 64 + requestAnimationFrame( animate ); 65 + } 66 + 67 + animate(); 68 +
+44
demo/fullscreen/index.html
··· 1 + <!doctype html> 2 + <html lang="en"> 3 + <head> 4 + <meta charset="utf-8" /> 5 + <meta name="viewport" content="width=device-width" /> 6 + 7 + <title>fullscreen</title> 8 + 9 + <style> 10 + body { 11 + margin: 0; 12 + padding: 0; 13 + } 14 + 15 + .illo { 16 + display: block; 17 + width: 100%; 18 + height: 100%; 19 + cursor: move; 20 + background: #FED; 21 + } 22 + </style> 23 + 24 + </head> 25 + <body> 26 + 27 + <canvas class="illo" width="300" height="200"></canvas> 28 + 29 + <script src="../../js/utils.js"></script> 30 + <script src="../../js/canvas-renderer.js"></script> 31 + <script src="../../js/svg-renderer.js"></script> 32 + <script src="../../js/vector.js"></script> 33 + <script src="../../js/anchor.js"></script> 34 + <script src="../../js/path-command.js"></script> 35 + <script src="../../js/shape.js"></script> 36 + <script src="../../js/ellipse.js"></script> 37 + <script src="../../js/rect.js"></script> 38 + <script src="../../js/group.js"></script> 39 + <script src="../../js/dragger.js"></script> 40 + <script src="../../js/illustration.js"></script> 41 + <script src="fullscreen.js"></script> 42 + 43 + </body> 44 + </html>
+15 -3
js/illustration.js
··· 63 63 }; 64 64 65 65 Illustration.prototype.setSize = function( width, height ) { 66 + width = Math.round( width ); 67 + height = Math.round( height ); 66 68 if ( this.isCanvas ) { 67 69 this.setSizeCanvas( width, height ); 68 70 } else if ( this.isSvg ) { ··· 71 73 }; 72 74 73 75 Illustration.prototype.measureSize = function() { 74 - var rect = this.element.getBoundingClientRect(); 75 - this.setSize( Math.round( rect.width ), Math.round( rect.height ) ); 76 + var width, height; 77 + if ( this.resize == 'fullscreen' ) { 78 + width = window.innerWidth; 79 + height = window.innerHeight; 80 + } else { 81 + var rect = this.element.getBoundingClientRect(); 82 + width = rect.width; 83 + height = rect.height; 84 + } 85 + this.setSize( width, height ); 76 86 }; 77 87 78 88 Illustration.prototype.setResize = function( resize ) { ··· 84 94 // add/remove event listener 85 95 if ( resize ) { 86 96 window.addEventListener( 'resize', this.resizeListener ); 97 + this.onWindowResize(); 87 98 } else { 88 99 window.removeEventListener( 'resize', this.resizeListener ); 89 100 } 90 101 }; 91 102 103 + // TODO debounce this? 92 104 Illustration.prototype.onWindowResize = function() { 93 105 this.measureSize(); 94 106 this.onResize( this.width, this.height ); ··· 220 232 Illustration.prototype.dragMove = function( event, pointer ) { 221 233 var moveX = this.dragStartX - pointer.pageX; 222 234 var moveY = this.dragStartY - pointer.pageY; 223 - var displaySize = this.width; 235 + var displaySize = Math.min( this.width, this.height ); 224 236 var rotateXMove = moveY / displaySize * TAU; 225 237 var rotateYMove = moveX / displaySize * TAU; 226 238 this.dragRotate.rotate.x = this.dragStartRX + rotateXMove;