Salve,
Per un progetto di scuola ho dovuto creare uno script js usando i touch events. Quello che ho fatto è praticamente uno cript che permette su device touch screen di disegnare pero ho un problema. Il problema e che vorrei sincronizzare il momento del tap con l'apparire della riga colorata, se lo provate vedrete che non ce sincronizzazione tra il tap e la riga che appare. Altra cosa che devo implementare e un mouseover per avere lo stesso effetto sul browser perchè al momento funziona solo sui device. Comunque ogni idea di come migliorare lo script e bene accetta. Grazie dell'aiuto.
Codice:
Per un progetto di scuola ho dovuto creare uno script js usando i touch events. Quello che ho fatto è praticamente uno cript che permette su device touch screen di disegnare pero ho un problema. Il problema e che vorrei sincronizzare il momento del tap con l'apparire della riga colorata, se lo provate vedrete che non ce sincronizzazione tra il tap e la riga che appare. Altra cosa che devo implementare e un mouseover per avere lo stesso effetto sul browser perchè al momento funziona solo sui device. Comunque ogni idea di come migliorare lo script e bene accetta. Grazie dell'aiuto.
Codice:
HTML:
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>
Jake's Multitouch
</title>
<link rel="stylesheet" href="paint.css">
<script>
var canvas;
var ctx;
var lastPt = new Object();
var colours = ['red', 'green', 'blue', 'yellow','black'];
function init() {
var touchzone = document.getElementById("canvasbox");
touchzone.addEventListener("touchmove", draw, false);
touchzone.addEventListener("touchend", end, false);
canvas = document.getElementById('canvasbox');
ctx = canvas.getContext("2d");
}
function draw(e) {
e.preventDefault();
console.log(e);
for(var i=0;i<e.touches.length;i++) {
var id = e.touches[i].identifier;
if(lastPt[id]) {
ctx.beginPath();
ctx.moveTo(lastPt[id].x, lastPt[id].y);
ctx.lineTo(e.touches[i].pageX, e.touches[i].pageY);
ctx.strokeStyle = colours[id%4];
ctx.lineWidth = 3;
ctx.stroke();
}
lastPt[id] = {x:e.touches[i].pageX, y:e.touches[i].pageY};
}
}
function end(e) {
e.preventDefault();
for(var i=0;i<e.changedTouches.length;i++) {
var id = e.changedTouches[i].identifier;
delete lastPt[id];
}
}
</script>
</head>
<body onload="init()">
<canvas id="canvasbox">
Canvas element not supported.
</canvas>
</body>
Codice:
#canvasbox {
position: relative;
margin: auto;
width: 500px;
height: 500px;
border: 1px black solid;
}
