Je reviens vers vous pour vous exposer un problème auquel je n'arrive pas à trouver la solution fonctionnelle. Dans ma page HTML, j'ai un canvas. Sur celui-ci sont affichés pour le moment, deux rectangles qui sont en réalité des boutons. Chacun de ces boutons et une instance d'un objet Bouton et il sont réunis au sein d'un tableau. Cependant, l'un des principes fondamental des boutons me pose problème. J'arrive à vérifier si l'utilisateur clique sur le bouton. Mais comment attribuer une fonction personnalisée à chaque boutons sachant qu'il sont dans un tableau ? Voici le code concerné:
var buttons = [
new Button(true, 100, 100, 300, 50, "Jouer"),
new Button(true, 100, 200, 300, 50, "Aide"),
];
Et, ce n'est pas utile ici mais, voici la fonction qui affiche tout les boutons:
function showButtons() {
var i = 0,
buttonsLength = buttons.length;
for(i; i < buttonsLength; i++) {
if(buttons[i].enabled === true) {
buttons[i].show();
}
}
}
Pour récapituler, je cherche donc un moyen d'attribuer à chacun de ces boutons, une action particulière en évitant de faire une liste abominable de if() comme j'avais fais précédemment. Pour bien vous montrer, voici l'ancienne fonction qui gérait ça:
Si tu tiens à le faire à la main absolument, tu vas probablement devoir assigner un EventListener au canvas, puis faire effectivement des calculs de coordonnée. Tes objets n'étant pas des parties de la page (ils ne font pas partie du DOM, de ce point de vue ils ne sont que des dessins dans un canvas), tu n'as aucune autre solution je pense.
Sinon tu as des lib comme PixiJS qui permettent d'avoir des éléments dans une scène en canvas, avec de meilleures performances (WebGL), et qui sont interactibles à la souris.
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
Si tu tiens à le faire à la main absolument, tu vas probablement devoir assigner un EventListener au canvas, puis faire effectivement des calculs de coordonnée. Tes objets n'étant pas des parties de la page (ils ne font pas partie du DOM, de ce point de vue ils ne sont que des dessins dans un canvas), tu n'as aucune autre solution je pense.
Sinon tu as des lib comme PixiJS qui permettent d'avoir des éléments dans une scène en canvas, avec de meilleures performances (WebGL), et qui sont interactibles à la souris.
Bonjour.
Pour ce qui est des coordonnées, il n'y a pas de problème. J'arrive à déclencher une action au clic sur le bouton. Je me demande juste comment assigner une fonction spécifique à chaque bouton en évitant cette liste immonde de if().
Utiliser la syntaxe moderne des classes (ES6, la syntaxe employée ici est antique), définir une fonction "action", et pour chaque bouton redéfinir cette méthode dans une classe fille?
Sinon, tu peux juste stocker la fonction à appeler, lorsque tu instancies tes boutons. Et l'appeler lors d'un clic dessus. C'est probablement plus simple pour ton cas.
- Edité par Genroa 6 septembre 2018 à 13:36:19
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
Le problème de la dernière solution, c'est qu'elle s'appui sur un code que je n'ai plus. De plus, les actions de tout les boutons se déclencherai en un clic sur le canvas. Auparavant, j'avais fait quelque chose d'absolument horrible. Un objet par bouton. Mais maintenant, je n'ai qu'un objet bouton et les instances dans un tableau. Ce qui me force à faire, par exemple:
if(nom === nomBouton) {// && vérification de position
nomBouton.activation();
} else if(nom === nomBouton 2) {// && vérification de position
nomBouton2.activation();
} else if // etc...
J'en reviens donc à la même suite de if() horrible dont je demande s'il est possible de l'éviter.
- Edité par 7 septembre 2018 à 15:24:20
Le problème de la dernière solution, c'est qu'elle s'appui sur un code que je n'ai plus. De plus, les actions de tout les boutons se déclencherai en un clic sur le canvas.
Normalement, chaque action de chaque bouton se déclanchera que pour son propre clique. Voici à quoi pourrait ressembler la solution que je propose:
Le constructeur Bouton:
function Button(enabled, posX, posY, width, height, text) {
this.enabled = enabled;
this.posX = posX;
this.posY = posY;
this.width = width;
this.height = height;
this.text = text;
this.show = function () {
context.fillStyle = "black";
context.fillRect(posX, posY, width, height);
context.fillStyle = "white";
context.font = height / 2 + "px Ubuntu";
context.fillText(text, posX + (width / 6), posY + (height / 1.5));
};
this.activationBouton = function (event) {
var souris = positionSouris(event);
var is_click_on_button = false;
/*
ici le code pour changer is_click_on_button à true
lorsque c'est la cas.
le code ne concerne que ce bouton, donc moins de if ✌
*/
if (is_click_on_button && this.myonclick)
this.myonclick(); //
};
Le tableau de boutons:
var buttonJouer = new Button(true, 100, 100, 300, 50, "Jouer");
var buttonAide = new Button(true, 100, 200, 300, 50, "Aide");
canvas.addEventListener("click", buttonJouer.activationBouton);
canvas.addEventListener("click", buttonAide.activationBouton);
buttonJouer.myonclick = function () { alert('Jouer') };
buttonAide.myonclick = function () { alert('Aide') };
var showButtons = function () {
[buttonJouer, buttonAide].forEach(function (button) {
if (button.enabled)
button.show();
});
};
- Edité par dilatation 7 septembre 2018 à 21:35:14
Cette solution me parait bien mais un dernier détail me bloque pour le moment. Ça ne risque pas de surcharger un peu le navigateur "d’exécuter" les vérifications de tout les boutons en même temps ?
class Button {
constructor(enabled, posX, posY, width, height, text, actionOnClick) {
this.enabled = enabled;
this.posX = posX;
this.posY = posY;
this.width = width;
this.height = height;
this.text = text;
this.actionOnClick = actionOnClick;
}
show() {
context.fillStyle = "black";
context.fillRect(posX, posY, width, height);
context.fillStyle = "white";
context.font = height / 2 + "px Ubuntu";
context.fillText(text, posX + (width / 6), posY + (height / 1.5));
};
onClick(event) {
let souris = positionSouris(event);
if (this.actionOnClick) {
this.actionOnClick(positionSouris);
}
}
}
let buttonJouer = new Button(true, 100, 100, 300, 50, "Jouer", function(evt){ alert("Jouer"); });
let buttonAide = new Button(true, 100, 200, 300, 50, "Aide", () => { alert("Aide"); }); // autre manière de définir une function ici
let buttons = [buttonJouer, buttonAide];
showButtons = function() {
for(let button of buttons) {
if (button.enabled)
button.show();
}
}
clickEvent = function(evt) {
for(let button of buttons) {
// test si l'evt est dans la zone du button
let isRightButton = true;
// si oui, on appelle son onClick:
if(isRightButton) {
button.onClick(evt);
return; // on a trouvé le bon bouton, on s'arrête
}
}
}
canvas.addEventListener("click", clickEvent);
showButtons();
Voici l'exemple (non testé) donné plus haut, en syntaxe JS moderne (ES6). Pour respecter la responsabilité de chacun, c'est la méthode déclenchée au clic (au niveau du canvas) qui doit vérifier quel bouton déclencher, et appeler la méthode onClick dessus. Les boutons n'ont pas à s'en soucier.
Pour répondre à ta question, ça n'alourdit pas le navigateur non, boucler sur quelques objets c'est rien du tout.
- Edité par Genroa 7 septembre 2018 à 18:37:04
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
Pour compléter un peu. Ton problème est un cas simplifié de test entre un rayon et une forme géométrique.
Ici c'est très simple car :
1/ Les tests sont en 2D
2/ Tu as peu de géométrie
Donc en supposant des boutons rectangulaires, et en ne tenant pas compte de superpositions de boutons et de profondeur :
Boucle sur chaque bouton, et vérifie que pour les coordonnées (x, y) de la souris (l'origine est en général le coin supérieur gauche de la fenêtre de souvenir) :
Si x => x coin haut gauche && y >= y coin haut gauche && x <= x coin bas droit && y <= y coin bas droit
alors tu lances la fonction onClick du bouton et tu quittes directement la boucle.
Tu peux même ajouter une fonction intersectPoint à ta classe Bouton par exemple, qui retourne un booléen. Comme ça plus tard tu pourras te faire une classe Bouton un peu plus générique, puis des classes qui héritent de Bouton avec des formes différentes et ont une implémentation personnalisée de intersectPoint (ou plutôt une classe Bouton, avec une propriété shape de type Shape, et des formes hériteraient de Shape, bref y'a pleins de manières de faire).
Bref, ça donnerait quelque chose du genre (c'est pareil que le code de Genroa en fait mais avec l'appel du test d'intersection) :
function clickEvent(event) {
const mouseCoord = [event.clientX, event.clientY];
for (let button of buttons) {
if (button.intersectPoint(mouseCoord)) {
button.onClick();
break;
}
}
}
Si tu avais énormément de boutons (des dizaines de milliers ou millions, peu probable dans une IHM...), il faudrait utiliser une structure accélératrice en 2D type hiérarchie de boites englobantes pour éliminer rapidement des portions entières de l'écran et donc les éléments qui s'y trouvent, mais dans ton cas c'est clairement inutile.
Juste pour info, un thread peut effectuer des dizaines de millions de test d'intersection par seconde en 3D entre un rayon et un pavé droit , même à partir d'un code javascript... Alors tester quelques rectangles en 2D, c'est vraiment peanuts.
Merci pour vos réponses complètes. Ces dernières m'ont bien éclairci la situation. Je vais donc m'atteler à mettre en pratique celle-ci dès demain. Je passe le sujet en résolu.
showButtons = function() {
for(let button of buttons) {
if (button.enabled)
button.show();
}
}
showButtons();
- Edité par Genroa il y a environ 17 heures
Attention toutefois avec ce code. Ici tu déclares une propriété showButtons à l'objet window, ce qui a pour effet de la rendre globale.
C'est exactement comme si j'écrivais :
window.showButtons = function() {
for(let button of buttons) {
if (button.enabled)
button.show();
}
}
window.showButtons();
Par ailleurs, l'ES5 n'est pas une syntaxe "antique". Même s'il date de presque 10 ans, il est toujours d'actualité et permet surtout de mieux comprendre comment le JavaScript fonctionne.
Pense également à bien indenter ta fonction de callback :
var buttons = [
new Button(args, function() {
// fonction à appeler au déclenchement du bouton
})
];
Genroa, corrige-moi si j'ai tort mais je trouve que la façon dont tu écris ce code est un peu fouillis :
Genroa a écrit:
class Button {
onClick(event) {
let souris = positionSouris(event);
if (this.actionOnClick) {
this.actionOnClick(positionSouris);
}
}
}
-
Edité par Genroa il y a environ 17 heures
On pourrait directement attribuer la fonction de callback à l'objet instancié du genre :
var Button = function(args, callback) {
this.call = callback;
};
La méthode de SpaceIn est la bonne. Il faut auparavant déterminer s'il y a intersection ou non.
Bon courage !
Actions sur des boutons
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
