Bonjour, suite à un réalisation d'un mouse event sur ordinateur j'aurais souhaiter qu'il fonctionne sur tablette. Mais je n'arrive pas à savoir comment faire ma modif et ou j'ai vu que l'on pouvait appliquer les touchevents, mais je ne pense pas les appliquer justement. Voilà mon code :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body onload="init();">
<div id="canvasDiv" name="canvasDiv">
<canvas id="myCanvas" name="myCanvas" width="500" height="300"></canvas>
<script type="text/javascript">
document.write('<img src="'+img+'"/>');
</script>
</div>
<script type="text/javascript">
var currentPos, previousPos;
var canvas, context, started;
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x:mouseX,
y:mouseY
};
}
function clicked(evt) {
previousPos = getMousePos(canvas, evt);
started = true;
}
function released(evt) {
started = false;
}
function drawLine(previousPos, currentPos) {
context.beginPath();
context.moveTo(previousPos.x, previousPos.y);
context.lineTo(currentPos.x, currentPos.y);
context.stroke();
}
function init () {
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
started = false;
canvas.addEventListener('mousedown', clicked);
canvas.addEventListener('mouseup', released);
canvas.addEventListener('mouseout', function() {
console.log("mouse out");
released();
});
canvas.addEventListener('mousemove', function (evt) {
currentPos = getMousePos(canvas, evt);
var message = "Mouse position: " + currentPos.x + "," + currentPos.y;
// TRY TO UNCOMMENT THIS LINE !
//writeMessage(canvas, message);
// Let's draw some lines that follow the mouse pos
if (started) {
drawLine(previousPos, currentPos);
previousPos = currentPos;
}
}, false);
}
</script>
<script type="text/javascript">
var convertTouchEvent = function (ev) {
var touch, ev_type, mouse_ev;
/* console.debug("got " + ev.type +
" tt" + ev.targetTouches.length +
" ct" + ev.changedTouches.length
); */
touch = ev.targetTouches[0];
ev.preventDefault();
switch (ev.type) {
case 'touchstart':
// Make sure only one finger is on the target
if (ev.targetTouches.length != 1) {
return;
}
touch = ev.targetTouches[0];
ev_type = 'mousedown';
break;
case 'touchmove':
// Make sure only one finger is on the target
if (ev.targetTouches.length != 1) {
return;
}
touch = ev.targetTouches[0];
ev_type = 'mousemove';
break;
case 'touchend':
// Make sure only one finger is lifted from the target
// TODO AND CHECK: check that targetTouches is empty?
if (ev.changedTouches.length != 1) {
return;
}
touch = ev.changedTouches[0];
ev_type = 'mouseup';
break;
default:
return;
}
/* console.debug("fake " + ev_type); */
mouse_ev = document.createEvent("MouseEvents");
mouse_ev.initMouseEvent(
ev_type, /* type of event */
true, /* can bubble? */
true, /* cancelable? */
window, /* event view */
0, /* mouse click count */
touch.screenX, /* event's screen x-coordinate */
touch.screenY, /* event's screen y-coordinate */
touch.clientX, /* event's client x-coordinate */
touch.clientY, /* event's client y-coordinate */
ev.ctrlKey, /* control key was pressed? */
ev.altKey, /* alt key was pressed? */
ev.shiftKey, /* shift key was pressed? */
ev.metaKey, /* meta key was pressed? */
0, /* mouse button */
null /* related target */
);
this.dispatchEvent(mouse_ev);
};
var touch2mouse = function (el) {
el.addEventListener("touchstart", convertTouchEvent);
el.addEventListener("touchmove", convertTouchEvent);
el.addEventListener("touchend", convertTouchEvent);
};
</script>
</body>
</html>