Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🛠 revise Illo setSizeSvg
+35
-30
+4
demo/flex-size/flex-size.js
+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
-2
demo/patties/index.html
-1
demo/strutter/index.html
-1
demo/strutter/index.html
+1
-1
demo/strutter/strutter.js
+1
-1
demo/strutter/strutter.js
-2
demo/template/index.html
-2
demo/template/index.html
+30
-24
js/illustration.js
+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