Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🔔 resize: 'fullscreen'
+128
-4
+1
-1
demo/flex-size/flex-size.js
+1
-1
demo/flex-size/flex-size.js
+68
demo/fullscreen/fullscreen.js
+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
+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
+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;