forked from tmpvar/2d-zoom-to-cursor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.js
66 lines (50 loc) · 1.58 KB
/
demo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var fc = require('fc');
var createZoomToCursor = require('./2d-zoom-to-cursor');
var mat3 = require('gl-matrix-mat3');
var zoom = createZoomToCursor(ctx, transform)
// to unhook this behavior just stop listening to these events
// zoom detects the event type and will handle appropriately
document.addEventListener('DOMMouseScroll', zoom);
document.addEventListener('mousewheel', zoom);
document.addEventListener('mousemove', zoom)
var mat3 = require('gl-matrix-mat3');
var vec2 = require('gl-matrix-vec2');
var mouse = vec2.create();
var scale = 1;
var v2scratch = vec2.create();
var m3scratch = mat3.create();
var ctx = require('fc')(function() {
ctx.fillStyle = "red";
ctx.clear();
ctx.save();
ctx.translate(window.innerWidth/2, window.innerHeight/2);
ctx.scale(scale, scale);
// compute where the mouse is in the scene
var mat = ctx.getTransform();
mat3.invert(m3scratch, mat)
vec2.transformMat3(v2scratch, mouse, m3scratch);
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.moveTo(-50, -50);
ctx.lineTo(50, -50);
ctx.lineTo(50, 50);
ctx.lineTo(-50, 50);
for (var x=-40; x<50; x+=10) {
for (var y = -40; y<50; y+=10) {
ctx.moveTo(x+2.5, y)
ctx.arc(x, y, 2.5, 0, Math.PI*2, true);
}
}
ctx.fill();
ctx.restore();
});
require('ctx-get-transform')(ctx);
console.log(ctx.getTransform)
document.addEventListener('mousemove', function(e) {
mouse[0] = e.x;
mouse[1] = e.y;
});
document.addEventListener('mousewheel', function(e) {
scale += e.wheelDeltaY / 100;
e.preventDefault();
});