Integrer un bouton dans un canvas html5




 

Le canvas html5 ne permet pas d’emblée d’intégrer des boutons ou des images cliquables : il est donc nécessaire d’utiliser des subterfuges. Dans cet article, je vous montre les ruses vous permettant de le faire facilement et sans peine.

 

Le principe

Dans un premier, cela va consister à afficher une image dans le canvas html5.

Dans un second temps, lorsqu’un événement tel qu’un clic ou un survol sera déclenché, il suffira de lire la position de la souris par le biais des coordonnées de son pointeur.

Si les coordonnées de la souris correspondent à la position de l’image, alors le pointeur de la souris est considéré comme survolant l’image.

 

L’image dans le canvas

Le première chose à faire est de créer une page html dans laquelle est intégré un canvas html5. C’est dans ce canvas html5 qu’une image va être dessinée par le biais de javascript.

Créez un fichier nommé html5CanvasBoutonExemple.html en y insérant le code source html5 suivant :

<html>
 <body>
  <canvas id="canvasExemple" width="800" height="600" style="border:1px solid #000000;">
  </canvas> 
 </body>
</html>

Vous devez ensuite intégré une image dans ce canvas html5, image d’un bouton si possible :

Pour cet exemple, l’image a les dimensions suivantes : 200px × 196px.

L’insertion du bouton se fait au chargement de la page en javascript, il faut au préalable :
– récupérer l’objet canvas html5 créé précédemment par le biais de son id;
– récupérer l’objet canvas context;
– initialiser un objet image lié à l’image du bouton ci-dessus;
– afficher l’image dans le canvas html5 par le biais de son contexte (l’image est à peu près centrée).

window.onload = function() {
	var canvasExemple = document.querySelector('#canvasExemple');
	var canvasContextExemple = canvasExemple.getContext("2d");
	var imageBouton = new Image();
	imageBouton.src = "bouton.png";
	canvasContextExemple.drawImage(imageBouton, 300, 200);
}

 

Gestion de l’événement clic de la souris

L’image affichée dans le canvas html5 n’a d’existence propre. De ce fait, l’écoute de l’événement clic de souris ne se fera pas sur l’image mais sur l’écran tout entier.

Dans un contexte html sans canvas html5, l’écoute de l’événement clic ne se fait que sur le bouton ou l’image comme ceci :

imageBouton.addEventListener("click", fonctionAppeleeSurLeClic);

Dans le contexte de cet article, l’écoute de l’événement clic se fait sur l’écran tout entier comme ceci :

window.addEventListener("click", fonctionAppeleeSurLeClic);

Tout clic sur l’écran et quelque soit son contenu appelle donc la fonction fonctionAppeleeSurLeClic.

C’est cette fonction qui, par le biais des coordonnées du pointeur de la souris, va faire le tri : les coordonnées du pointeur sont-elles des coordonnées sur lesquelles l’image est affichée ?

Si la réponse à cette question est affirmative, il y a clic sur l’image ou le bouton.

En l’état, le code source javascript suivant ne fait pas le tri dans ce qui est cliqué de ce qui ne l’est pas :

var canvasExemple;
var canvasContextExemple;
var imageBouton;
window.onload = function() {
	canvasExemple = document.querySelector('#canvasExemple');
	canvasContextExemple = canvasExemple.getContext("2d");
	imageBouton = new Image();
	imageBouton.src = "bouton.png";
	canvasContextExemple.drawImage(imageBouton, 300, 200);

	window.addEventListener("click", fonctionAppeleeSurLeClic);
}

var fonctionAppeleeSurLeClic = function() {

}

 

Gestion du clic sur l’image du canvas

Le prérequis à cela est de connaitre :
– les dimensions de l’image qui dans l’exemple 200px × 196px;
– la position de l’image sur l’écran.

Attention, lorsque l’on parle de l’image sur l’écran ce n’est pas la positon de l’image dans le référentiel du canvas html5 mais bien dans celui de l’écran. Dans l’exemple présent, ils sont confondus puisque le canvas html5 est placé en haut à gauche de l’écran.

Imaginez que le canvas html5 soit placé bien plus à droite ou plus bas sur l’écran, le référentiel du canvas html5 dont l’origine ne serait plus en haut et à gauche de l’écran (0,0) n’aurait aucun sens.

A partir d’une fonction qui renvoie la position du pointeur de la souris et en comparant les valeurs à celles de la position de l’image et ses dimensions, il est possible d’en déduire si le pointeur de la souris est sur l’image.

Dans l’exemple, une alerte est affichée à l’écran si il y a clic sur l’image.

var fonctionAppeleeSurLeClic = function(e) {
	var positions = getMousePosition(e,canvasExemple);

	if ( positions[ 0 ] > 300 && positions[ 0 ] < 300 + 200 
	  && positions[ 1 ] > 200 && positions[ 1 ] < 200 + 196 ) {
		alert("clic sur le bouton");
	}
}

 

La fonction de lecture de la position de la souris

La fonction getMousePosition renvoie un tableau intégrant les coordonnées de la souris.

var getMousePosition = function(e,canvasElement){
    OFFSET = getOffsetPosition(canvasElement);

    mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
    mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];

    return [mouse_x,mouse_y];
}

var getOffsetPosition = function(obj){
    var offsetX = offsetY = 0;

    if (obj.offsetParent) {
        do {
            offsetX += obj.offsetLeft;
            offsetY += obj.offsetTop;
        } while(obj = obj.offsetParent);
    }
    return [offsetX,offsetY];
}

 
[important]Si vous constatez des coquilles, ou avez des remarques à faire ou des améliorations à proposer ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.[/important]

 

Le code source complet

L’exemple est imparfait puisque le bouton est rond et que le test prend en compte une zone rectangulaire.

<html>
<script>
var canvasExemple;
var canvasContextExemple;
var imageBouton;
window.onload = function() {
	canvasExemple = document.querySelector('#canvasExemple');
	canvasContextExemple = canvasExemple.getContext("2d");
	imageBouton = new Image();
	imageBouton.src = "bouton.png";
	canvasContextExemple.drawImage(imageBouton, 300, 200);

	window.addEventListener("mousedown", fonctionAppeleeSurLeClic);
}

var fonctionAppeleeSurLeClic = function(e) {
	var positions = getMousePosition(e,canvasExemple);

	if ( positions[ 0 ] > 300 && positions[ 0 ] < 300 + 200 
	  && positions[ 1 ] > 200 && positions[ 1 ] < 200 + 196 ) {
		alert("clic sur le bouton");
	}
}

var getOffsetPosition = function(obj){
    var offsetX = offsetY = 0;

    if (obj.offsetParent) {
        do {
            offsetX += obj.offsetLeft;
            offsetY += obj.offsetTop;
        } while(obj = obj.offsetParent);
    }
    return [offsetX,offsetY];
}

var getMousePosition = function(e,canvasElement){
    OFFSET = getOffsetPosition(canvasElement);

    mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
    mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];

    return [mouse_x,mouse_y];
}
</script>
<body>
 <canvas id="canvasExemple" width="800" height="600" style="border:1px solid #000000;">
 </canvas>
</body>
</html>

 

Posté dans html5Taggé bouton canvas html5, canvas html5  |  Laisser un commentaire

Répondre

*