|
|
@ -11,11 +11,18 @@
|
|
11
|
11
|
top: 0;
|
|
12
|
12
|
left: 0;
|
|
13
|
13
|
}
|
|
|
14
|
|
|
|
15
|
#status {
|
|
|
16
|
position: absolute;
|
|
|
17
|
bottom: 0;
|
|
|
18
|
right: 0;
|
|
|
19
|
}
|
|
14
|
20
|
</style>
|
|
15
|
21
|
</head>
|
|
16
|
22
|
|
|
17
|
23
|
<body>
|
|
18
|
24
|
<canvas id="stage"></canvas>
|
|
|
25
|
<span id="status"></span>
|
|
19
|
26
|
<script>
|
|
20
|
27
|
window.polyfill = {};
|
|
21
|
28
|
|
|
|
@ -29,6 +36,7 @@
|
|
29
|
36
|
window.pixl = {};
|
|
30
|
37
|
pixl.stage = document.querySelector("#stage");
|
|
31
|
38
|
pixl.ctx = stage.getContext("2d");
|
|
|
39
|
pixl.status = document.querySelector("#status");
|
|
32
|
40
|
pixl.window = {w: window.innerWidth, h: window.innerHeight};
|
|
33
|
41
|
pixl.world = {};
|
|
34
|
42
|
pixl.pos = {x: 0, y: 0};
|
|
|
@ -118,6 +126,9 @@
|
|
118
|
126
|
if (pixl.drag.start !== undefined) {
|
|
119
|
127
|
pixl.drag.current = {x: ev.clientX, y: ev.clientY};
|
|
120
|
128
|
}
|
|
|
129
|
|
|
|
130
|
var hovered = pixl.to_world({x: ev.clientX, y: ev.clientY});
|
|
|
131
|
pixl.status.textContent = hovered.x + "," + hovered.y;
|
|
121
|
132
|
});
|
|
122
|
133
|
|
|
123
|
134
|
pixl.stage.addEventListener("mouseup", function(ev) {
|