linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
l_samenv
2020-12-04 09:05:06 +01:00
parent 172042e731
commit 9e1d3b4e07
54 changed files with 47695 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
client/touchtest.html Normal file
View File

@ -0,0 +1,84 @@
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent" />
</head>
<body>
<canvas id=inp width='300' height='500' style="border:1px solid #000000;"></canvas>
<div id=out style="width: 300px;"></div>
<script>
var canvas=document.getElementById("inp");
var rect = canvas.getBoundingClientRect();
console.log(rect);
// Setup canvas and expose context via ctx variable
ctx=canvas.getContext("2d");
function strt(touch) {
return {i:touch.identifier,x:touch.pageX,y:touch.pageY}
}
function stre(event) {
if (event.touches) {
t = {};
for (var i=0; i<event.touches.length;i++) {
id=event.touches[i].identifier.toString();
t[id] = strt(event.touches[i]);
}
tc = [];
for (var i=0; i<event.changedTouches.length;i++) {
id=event.touches[i].identifier.toString();
t[id]['changed'] = 1;
}
for (var i=0; i<event.targetTouches.length;i++) {
id=event.touches[i].identifier.toString();
t[id]['target'] = 1;
}
}
return {type:event.type,x:event.pageX,y:event.pageY,t:t};
}
var styles=["rgba(0, 0, 200, 1)", "rgba(0, 255, 0, 1)", "rgba(255, 0, 0, 1)"]
canvas.addEventListener('touchstart', function(event) {
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
ctx.beginPath();
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 5, 0, 2*Math.PI, true);
ctx.lineWidth = 2.0;
ctx.strokeStyle = styles[i];
ctx.stroke();
}
}, false);
canvas.addEventListener('touchmove', function(event) {
document.getElementById("out").innerHTML = JSON.stringify(stre(event));
event.preventDefault();
for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
ctx.beginPath();
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 1, 0, 2*Math.PI, true);
ctx.lineWidth = 2.0;
ctx.strokeStyle = styles[i];
ctx.stroke();
}
}, false);
canvas.addEventListener('touchend', function(event) {
for (var i = 0; i < event.changedTouches.length; i++) {
var touch = event.changedTouches[i];
ctx.beginPath();
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 50, 0, 2*Math.PI, true);
ctx.lineWidth = 2.0;
ctx.strokeStyle = styles[i];
ctx.stroke();
}
}, false);
canvas.addEventListener('click', function(event) {
console.log(event);
ctx.beginPath();
ctx.arc(event.clientX-rect.left, event.clientY - rect.top, 2, 0, 2*Math.PI, true);
ctx.lineWidth = 2.0;
ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
ctx.stroke();
}, false);
</script>
</body></html>