Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🐞 invert Dragger moveX & moveY
+22
-30
+2
-2
demo/no-illo-canvas/no-illo-canvas.js
+2
-2
demo/no-illo-canvas/no-illo-canvas.js
···
85
85
dragStartRY = scene.rotate.y;
86
86
},
87
87
onDragMove: function( pointer, moveX, moveY ) {
88
-
scene.rotate.x = moveY / canvasSize * TAU + dragStartRX;
89
-
scene.rotate.y = moveX / canvasSize * TAU + dragStartRY;
88
+
scene.rotate.x = dragStartRX - ( moveY / canvasSize * TAU );
89
+
scene.rotate.y = dragStartRY - ( moveX / canvasSize * TAU );
90
90
},
91
91
});
+2
-6
demo/no-illo-svg/no-illo-svg.js
+2
-6
demo/no-illo-svg/no-illo-svg.js
···
66
66
67
67
function render() {
68
68
// clear
69
-
// translate
70
-
// ctx.clearRect( 0, 0, canvasSize, canvasSize );
71
-
// ctx.translate( canvasSize/2, canvasSize/2 );
72
-
// ctx.scale( zoom, zoom );
73
69
scene.renderGraphSvg( svg );
74
70
}
75
71
···
88
84
dragStartRY = scene.rotate.y;
89
85
},
90
86
onDragMove: function( pointer, moveX, moveY ) {
91
-
scene.rotate.x = moveY / illoSize * TAU + dragStartRX;
92
-
scene.rotate.y = moveX / illoSize * TAU + dragStartRY;
87
+
scene.rotate.x = dragStartRX - ( moveY / illoSize * TAU );
88
+
scene.rotate.y = dragStartRY - ( moveX / illoSize * TAU );
93
89
},
94
90
});
+5
-7
demo/solids/solids.js
+5
-7
demo/solids/solids.js
···
418
418
419
419
// ----- inputs ----- //
420
420
421
-
var dragStartAngleX, dragStartAngleY;
421
+
var dragStartRX, dragStartRY;
422
422
423
423
new Zdog.Dragger({
424
424
startElement: illoElem,
425
425
onDragStart: function() {
426
426
isSpinning = false;
427
-
dragStartAngleX = viewRotation.x;
428
-
dragStartAngleY = viewRotation.y;
427
+
dragStartRX = viewRotation.x;
428
+
dragStartRY = viewRotation.y;
429
429
},
430
430
onDragMove: function( pointer, moveX, moveY ) {
431
-
var angleXMove = moveY / illoSize * TAU;
432
-
var angleYMove = moveX / illoSize * TAU;
433
-
viewRotation.x = dragStartAngleX + angleXMove;
434
-
viewRotation.y = dragStartAngleY + angleYMove;
431
+
viewRotation.x = dragStartRX - ( moveY / illoSize * TAU );
432
+
viewRotation.y = dragStartRY - ( moveX / illoSize * TAU );
435
433
},
436
434
});
+5
-7
demo/tri-prism/tri-prism.js
+5
-7
demo/tri-prism/tri-prism.js
···
180
180
// ----- inputs ----- //
181
181
182
182
// click drag to rotate
183
-
var dragStartAngleX, dragStartAngleY;
183
+
var dragStartRX, dragStartRY;
184
184
185
185
new Zdog.Dragger({
186
186
startElement: canvas,
187
187
onDragStart: function() {
188
188
isSpinning = false;
189
-
dragStartAngleX = illo.rotate.x;
190
-
dragStartAngleY = illo.rotate.y;
189
+
dragStartRX = illo.rotate.x;
190
+
dragStartRY = illo.rotate.y;
191
191
},
192
192
onDragMove: function( pointer, moveX, moveY ) {
193
-
var angleXMove = moveY / canvasWidth * TAU;
194
-
var angleYMove = moveX / canvasWidth * TAU;
195
-
illo.rotate.x = dragStartAngleX + angleXMove;
196
-
illo.rotate.y = dragStartAngleY + angleYMove;
193
+
illo.rotate.x = dragStartRX - moveY / canvasWidth * TAU;
194
+
illo.rotate.y = dragStartRY - moveX / canvasWidth * TAU;
197
195
},
198
196
});
199
197
+2
-2
js/dragger.js
+2
-2
js/dragger.js
···
93
93
94
94
Dragger.prototype.dragMove = function( event, pointer ) {
95
95
event.preventDefault();
96
-
var moveX = this.dragStartX - pointer.pageX;
97
-
var moveY = this.dragStartY - pointer.pageY;
96
+
var moveX = pointer.pageX - this.dragStartX;
97
+
var moveY = pointer.pageY - this.dragStartY;
98
98
this.onDragMove( pointer, moveX, moveY );
99
99
};
100
100
+6
-6
js/illustration.js
+6
-6
js/illustration.js
···
230
230
};
231
231
232
232
Illustration.prototype.dragMove = function( event, pointer ) {
233
-
var moveX = this.dragStartX - pointer.pageX;
234
-
var moveY = this.dragStartY - pointer.pageY;
233
+
var moveX = pointer.pageX - this.dragStartX;
234
+
var moveY = pointer.pageY - this.dragStartY;
235
235
var displaySize = Math.min( this.width, this.height );
236
-
var rotateXMove = moveY / displaySize * TAU;
237
-
var rotateYMove = moveX / displaySize * TAU;
238
-
this.dragRotate.rotate.x = this.dragStartRX + rotateXMove;
239
-
this.dragRotate.rotate.y = this.dragStartRY + rotateYMove;
236
+
var moveRX = moveX / displaySize * TAU;
237
+
var moveRY = moveY / displaySize * TAU;
238
+
this.dragRotate.rotate.x = this.dragStartRX - moveRY;
239
+
this.dragRotate.rotate.y = this.dragStartRY - moveRX;
240
240
Dragger.prototype.dragMove.apply( this, arguments );
241
241
};
242
242