11480 sujets

JavaScript, DOM et API Web HTML5

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>