Improve the mouse-tracking demo A LOT.
Chris Pressey
10 years ago
| 16 | 16 |
</canvas>
|
| 17 | 17 |
</div>
|
| 18 | 18 |
|
|
19 |
<p id="info"></p>
|
|
20 |
|
| 19 | 21 |
<div>
|
| 20 | |
<button id="dump">Dump</button>
|
|
22 |
<button onclick="mt.start();">Record</button>
|
|
23 |
<button onclick="mt.stop();">Stop</button>
|
|
24 |
<button onclick="mt.replay();">Replay</button>
|
|
25 |
<button onclick="mt.clear();">Clear</button>
|
| 21 | 26 |
</div>
|
| 22 | 27 |
|
| 23 | 28 |
<p>As the mouse is moved across the canvas, its position
|
| 24 | |
at each point in time is recorded. Clicking the "Dump" button displays
|
| 25 | |
these events in the Javascript console.</p>
|
|
29 |
at each point in time is recorded. Clicking the "Replay" button replays
|
|
30 |
these events, showing a red square where the pointer was.</p>
|
| 26 | 31 |
|
| 27 | 32 |
</body>
|
| 28 | 33 |
<script>
|
| 29 | 34 |
var mt = MouseTracker(document.getElementById('canvas'));
|
| 30 | |
mt.start();
|
| 31 | |
document.getElementById('dump').onclick = function (e) { mt.dump(); }
|
| 32 | 35 |
</script>
|
| 5 | 5 |
elem.onmousemove = function(event) {
|
| 6 | 6 |
events.push(event);
|
| 7 | 7 |
};
|
|
8 |
elem.style.background = "blue";
|
|
9 |
};
|
|
10 |
|
|
11 |
self.stop = function() {
|
|
12 |
elem.onmousemove = null;
|
|
13 |
elem.style.background = "white";
|
|
14 |
};
|
|
15 |
|
|
16 |
self.clear = function() {
|
|
17 |
events = [];
|
| 8 | 18 |
};
|
| 9 | 19 |
|
| 10 | 20 |
self.offset = function() {
|
|
| 19 | 29 |
}
|
| 20 | 30 |
|
| 21 | 31 |
return [left, top];
|
|
32 |
};
|
|
33 |
|
|
34 |
self.replay = function() {
|
|
35 |
var i = 0;
|
|
36 |
var t = 0.0;
|
|
37 |
var base = events[0].timeStamp;
|
|
38 |
var offs = self.offset();
|
|
39 |
var interval;
|
|
40 |
interval = setInterval(function() {
|
|
41 |
t += 0.01;
|
|
42 |
s = "z";
|
|
43 |
var x = undefined;
|
|
44 |
var y = undefined;
|
|
45 |
var sec;
|
|
46 |
while (i < events.length && ((events[i].timeStamp - base) / 1000.0) < t) {
|
|
47 |
x = events[i].pageX - offs[0];
|
|
48 |
y = events[i].pageY - offs[1];
|
|
49 |
sec = (events[i].timeStamp - base) / 1000.0;
|
|
50 |
s += " (" + i + ") " + x + ", " + y + " @ " + sec;
|
|
51 |
i++;
|
|
52 |
}
|
|
53 |
if (x !== undefined) {
|
|
54 |
var ctx = elem.getContext("2d");
|
|
55 |
ctx.clearRect(0, 0, elem.width, elem.height);
|
|
56 |
ctx.fillStyle = "red";
|
|
57 |
ctx.fillRect(x - 4, y - 4, 8, 8);
|
|
58 |
}
|
|
59 |
//document.getElementById('info').innerHTML = s;
|
|
60 |
if (i >= events.length) {
|
|
61 |
clearInterval(interval);
|
|
62 |
return;
|
|
63 |
}
|
|
64 |
}, 10);
|
| 22 | 65 |
};
|
| 23 | 66 |
|
| 24 | 67 |
self.dump = function() {
|