raidiun.github.io/tt.html at master · raidiun/raidiun.github.io · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				margin:0;
				}
			</style>
		<script>
			var tid = 0;
			function getTouchID() {
				return(tid++);
				}

			var tolerance = 50;

			function Touch(touch) {
				this.tid = getTouchID();
				this.to = touch;
				this.updated = true;
				}

			Touch.prototype.update = function(touch) {
				this.to = touch;
				this.updated = true;
				}

			Touch.prototype.matches = function(touch) {
				if(Math.abs(this.to.clientX-touch.clientX)<tolerance && Math.abs(this.to.clientY-touch.clientY)<tolerance) {
					return(true);
					}
				else {
					return(false);
					}
				}

			function clearUpdated() {
				for(tTouchKey in trackedTouches) {
					trackedTouches[tTouchKey].updated = false;
					}
				}

			function cleanTracked() {
				for(tTouchKey in trackedTouches) {
					if(trackedTouches[tTouchKey].updated == false) {
						trackedTouches = trackedTouches.splice(tTouchKey,1);
						}
					}
				}

			function identifyTouch(touch) {
				for(tTouchKey in trackedTouches) {
					if(trackedTouches[tTouchKey].matches(touch)) {
						trackedTouches[tTouchKey].update(touch);
						return(trackedTouches[tTouchKey]);
						}
					}
				var eol = trackedTouches.push(new Touch(touch)) - 1;
				return(trackedTouches[eol]);
				}

			var trackedTouches = [];

			function onCanvasTouchEv(e) {
				ctx.fillStyle="#000";
				ctx.fillRect(0,0,canvas.width,canvas.height);

				var bcr = canvas.getBoundingClientRect();
				bcr.width = bcr.right - bcr.left;
				bcr.height = bcr.bottom - bcr.top;

				clearUpdated();

				var idx = e.touches.length;
				while(idx) {
					idx--;
					var identifiedAs = identifyTouch(e.touches[idx]);

					var x = canvas.width*(e.touches[idx].clientX - bcr.left)/bcr.width;
					var y = canvas.height*(e.touches[idx].clientY - bcr.top)/bcr.height;

					drawTouch(identifiedAs,x,y);
					}

				cleanTracked();

				if(trackedTouches.length == 0) {
					tid=0;
					}
				}

			function drawTouch(id,x,y) {
				ctx.fillStyle="#fff";
				ctx.beginPath();
				ctx.arc(x-20,y-20,20,0,2*Math.PI);
				ctx.closePath();
				ctx.fill();
				ctx.fillStyle="#aaa";
				ctx.font="20px Verdana";
				ctx.fillText(String(id.to.identifier),x-20,y-20);
				}

			</script>
		</head>
	<body>
		<canvas id="canv" width="500" height="1000" style="width:100%;height:100%;"/>
		<script>
			var canvas = document.getElementById("canv");
			canvas.addEventListener("touchstart",onCanvasTouchEv);
			canvas.addEventListener("touchmove",onCanvasTouchEv);
			canvas.addEventListener("touchend",onCanvasTouchEv);
			var ctx = canvas.getContext("2d");
			</script>
		</body>
	</html>