generated from vasturiano/ui-module
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
72 lines (57 loc) · 1.59 KB
/
index.html
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
65
66
67
68
69
70
71
72
<head>
<script src="//unpkg.com/d3-zoomable"></script>
<!-- <script src="../../dist/d3-zoomable.js"></script>-->
<style>
body { margin: 0; }
canvas {
width: 100%;
height: 100%;
}
#log {
font-family: sans-serif;
font-size: 14px;
position: absolute;
left: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="log">Zoom/pan with mouse wheel/drag</div>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
const canvasEl = document.getElementById('canvas');
canvasEl.width = width;
canvasEl.height = height;
const logEl = document.getElementById('log');
const zoom = zoomable()
(canvasEl)
.canvasEl(canvasEl)
.onChange(tr => {
draw();
logEl.textContent = `Zoom settings: ${JSON.stringify(tr)}`;
});
draw(); // initial draw
//
function draw() {
const ctx = canvasEl.getContext('2d');
ctx.clearRect(0,0, width, height); // wip canvas
const r = height / 4;
ctx.lineWidth = 6 / zoom.current().k; // keep stroke size constant through different zoom levels
ctx.beginPath();
ctx.arc(width / 3, height / 3, r, 0, 2 * Math.PI);
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.beginPath();
ctx.arc(width / 3 * 2, height / 3, r, 0, 2 * Math.PI);
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.beginPath();
ctx.arc(width / 2, height / 3 * 2, r, 0, 2 * Math.PI);
ctx.strokeStyle = 'blue';
ctx.stroke();
}
</script>
</body>