Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🔔 Illo.resize, Illo.setSize
+205
-15
+87
demo/flex-size/flex-size.js
+87
demo/flex-size/flex-size.js
···
1
+
// ------------------------- demo ------------------------- //
2
+
3
+
var zoom = 4;
4
+
var isSpinning = true;
5
+
var TAU = Zdog.TAU;
6
+
7
+
var canvasIllo = new Zdog.Illustration({
8
+
element: 'canvas',
9
+
zoom: zoom,
10
+
resize: true,
11
+
dragRotate: true,
12
+
onDragStart: function() {
13
+
isSpinning = false;
14
+
},
15
+
onResize: function( width, height ) {
16
+
canvasIllo.zoom = width / 50;
17
+
},
18
+
});
19
+
20
+
var svgIllo = new Zdog.Illustration({
21
+
element: 'svg',
22
+
zoom: zoom,
23
+
dragRotate: true,
24
+
onDragStart: function() {
25
+
isSpinning = false;
26
+
},
27
+
});
28
+
29
+
// ----- model ----- //
30
+
31
+
var model = new Zdog.Anchor({
32
+
addTo: canvasIllo,
33
+
});
34
+
35
+
new Zdog.Rect({
36
+
width: 20,
37
+
height: 20,
38
+
addTo: model,
39
+
translate: { z: -10 },
40
+
stroke: 2,
41
+
color: '#E21',
42
+
});
43
+
44
+
new Zdog.Ellipse({
45
+
diameter: 16,
46
+
addTo: model,
47
+
translate: { z: 10 },
48
+
stroke: 4,
49
+
color: '#19F',
50
+
});
51
+
52
+
new Zdog.Shape({
53
+
path: [
54
+
{ x: 0, z: 1 },
55
+
{ x: -1, z: -1 },
56
+
{ x: 1, z: -1 },
57
+
],
58
+
scale: { x: 5, z: 5 },
59
+
addTo: model,
60
+
stroke: 2,
61
+
fill: true,
62
+
color: '#EA0',
63
+
});
64
+
65
+
new Zdog.Shape({
66
+
translate: { x: 10, y: -5 },
67
+
addTo: model,
68
+
stroke: 7,
69
+
color: '#246',
70
+
});
71
+
72
+
model.copyGraph({
73
+
addTo: svgIllo,
74
+
});
75
+
76
+
// ----- animate ----- //
77
+
78
+
function animate() {
79
+
svgIllo.rotate.y += isSpinning ? +TAU/150 : 0;
80
+
canvasIllo.rotate.y += isSpinning ? +TAU/150 : 0;
81
+
svgIllo.updateRenderGraph();
82
+
canvasIllo.updateRenderGraph();
83
+
requestAnimationFrame( animate );
84
+
}
85
+
86
+
animate();
87
+
+54
demo/flex-size/index.html
+54
demo/flex-size/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>flex size</title>
8
+
9
+
<style>
10
+
html { height: 100%; }
11
+
12
+
body {
13
+
min-height: 100%;
14
+
margin: 0;
15
+
display: flex;
16
+
align-items: center;
17
+
justify-content: center;
18
+
background: white;
19
+
font-family: sans-serif;
20
+
text-align: center;
21
+
}
22
+
23
+
.illo {
24
+
display: block;
25
+
cursor: move;
26
+
background: #FED;
27
+
border-radius: 8px;
28
+
margin: 20px 2%;
29
+
width: 46%;
30
+
}
31
+
</style>
32
+
33
+
</head>
34
+
<body>
35
+
36
+
<canvas class="illo" width="200" height="200"></canvas>
37
+
<svg class="illo" width="200" height="200"></svg>
38
+
39
+
<script src="../../js/utils.js"></script>
40
+
<script src="../../js/canvas-renderer.js"></script>
41
+
<script src="../../js/svg-renderer.js"></script>
42
+
<script src="../../js/vector.js"></script>
43
+
<script src="../../js/anchor.js"></script>
44
+
<script src="../../js/path-command.js"></script>
45
+
<script src="../../js/shape.js"></script>
46
+
<script src="../../js/ellipse.js"></script>
47
+
<script src="../../js/rect.js"></script>
48
+
<script src="../../js/group.js"></script>
49
+
<script src="../../js/dragger.js"></script>
50
+
<script src="../../js/illustration.js"></script>
51
+
<script src="flex-size.js"></script>
52
+
53
+
</body>
54
+
</html>
+64
-15
js/illustration.js
+64
-15
js/illustration.js
···
26
26
element: undefined,
27
27
centered: true,
28
28
zoom: 1,
29
-
dragRotate: undefined,
29
+
dragRotate: false,
30
+
resize: false,
30
31
onPrerender: noop,
31
32
onDragStart: noop,
32
33
onDragMove: noop,
33
34
onDragEnd: noop,
35
+
onResize: noop,
34
36
});
35
37
36
38
utils.extend( Illustration.prototype, Dragger.prototype );
···
40
42
Dragger.prototype.create.call( this, options );
41
43
this.setElement( this.element );
42
44
this.setDragRotate( this.dragRotate );
45
+
this.setResize( this.resize );
43
46
};
44
47
45
48
Illustration.prototype.setElement = function( element ) {
···
59
62
}
60
63
};
61
64
65
+
Illustration.prototype.setSize = function( width, height ) {
66
+
if ( this.isCanvas ) {
67
+
this.setSizeCanvas( width, height );
68
+
} else if ( this.isSvg ) {
69
+
this.setSizeSvg( width, height );
70
+
}
71
+
};
72
+
73
+
Illustration.prototype.measureSize = function() {
74
+
var rect = this.element.getBoundingClientRect();
75
+
this.setSize( Math.round( rect.width ), Math.round( rect.height ) );
76
+
};
77
+
78
+
Illustration.prototype.setResize = function( resize ) {
79
+
this.resize = resize;
80
+
// create resize event listener
81
+
if ( !this.resizeListener ) {
82
+
this.resizeListener = this.onWindowResize.bind( this );
83
+
}
84
+
// add/remove event listener
85
+
if ( resize ) {
86
+
window.addEventListener( 'resize', this.resizeListener );
87
+
} else {
88
+
window.removeEventListener( 'resize', this.resizeListener );
89
+
}
90
+
};
91
+
92
+
Illustration.prototype.onWindowResize = function() {
93
+
this.measureSize();
94
+
this.onResize( this.width, this.height );
95
+
};
96
+
97
+
// ----- render ----- //
98
+
62
99
Illustration.prototype.renderGraph = function( item ) {
63
100
if ( this.isCanvas ) {
64
101
this.renderGraphCanvas( item );
···
80
117
this.isCanvas = true;
81
118
// update related properties
82
119
this.ctx = this.element.getContext('2d');
120
+
// set initial size
121
+
this.setSizeCanvas( element.width, element.height );
122
+
};
83
123
84
-
var pixelRatio = this.pixelRatio = window.devicePixelRatio || 1;
85
-
// sizes
86
-
this.width = element.width * pixelRatio;
87
-
this.height = element.height * pixelRatio;
124
+
Illustration.prototype.setSizeCanvas = function( width, height ) {
125
+
this.width = width;
126
+
this.height = height;
88
127
// up-rez for hi-DPI devices
128
+
var pixelRatio = this.pixelRatio = window.devicePixelRatio || 1;
129
+
this.element.width = width * pixelRatio;
130
+
this.element.height = height * pixelRatio;
89
131
if ( pixelRatio > 1 ) {
90
-
element.width = this.width;
91
-
element.height = this.height;
92
-
element.style.width = this.width / pixelRatio + 'px';
93
-
element.style.height = this.height / pixelRatio + 'px';
132
+
this.element.style.width = width + 'px';
133
+
this.element.style.height = height + 'px';
94
134
}
95
135
};
96
136
···
125
165
this.element = element;
126
166
this.isSvg = true;
127
167
this.pixelRatio = 1;
128
-
this.width = element.getAttribute('width');
129
-
this.height = element.getAttribute('height');
168
+
// set initial size from width & height attributes
169
+
var width = element.getAttribute('width');
170
+
var height = element.getAttribute('height');
171
+
this.setSizeSvg( width, height );
172
+
// remove size attributes, let size be determined by viewbox
173
+
element.removeAttribute('width');
174
+
element.removeAttribute('height');
175
+
};
130
176
131
-
var viewWidth = this.width / this.zoom;
132
-
var viewHeight = this.height / this.zoom;
177
+
Illustration.prototype.setSizeSvg = function( width, height ) {
178
+
this.width = width;
179
+
this.height = height;
180
+
var viewWidth = width / this.zoom;
181
+
var viewHeight = height / this.zoom;
133
182
var viewX = this.centered ? -viewWidth/2 : 0;
134
183
var viewY = this.centered ? -viewHeight/2 : 0;
135
-
element.setAttribute( 'viewBox', viewX + ' ' + viewY + ' ' +
184
+
this.element.setAttribute( 'viewBox', viewX + ' ' + viewY + ' ' +
136
185
viewWidth + ' ' + viewHeight );
137
186
};
138
187
···
171
220
Illustration.prototype.dragMove = function( event, pointer ) {
172
221
var moveX = this.dragStartX - pointer.pageX;
173
222
var moveY = this.dragStartY - pointer.pageY;
174
-
var displaySize = this.width / this.pixelRatio;
223
+
var displaySize = this.width;
175
224
var rotateXMove = moveY / displaySize * TAU;
176
225
var rotateYMove = moveX / displaySize * TAU;
177
226
this.dragRotate.rotate.x = this.dragStartRX + rotateXMove;