Canvas, gérer les z-index ?

[Kassak]

Hello !

Je suis en face d'un petit problème avec les canvas.

J'utilise la librairie canvasengine qui propose pas mal de ptites fonctions sympas, et après avoir adapté le code, j'ai pu, à partir d'un json, généré une map en 2d (ou 3d) isométrique.

J'ai directement les tuiles en iso, une image carré donc, et la est le problème.

Dans ma boucle où je dessine ma map ( _tile.drawImage() ), je gère aussi les évènements sur chaque case. Mais du fait que les tuiles s'empilent, l'évènement onclick par exemple est plutôt moisi, je peux cliquer sur une tuile mais c'est en faites celle d'à coté qui est détectée.

Cela est dû au fait que mes images sont carrés et donc lorsque je les empile, puisqu'il n'y a pas de notion de z-index, elles se superposent et ce n'est pas toujours celle que je veux qui est détectée quand je click.

Avez vous une solution à me proposer ? Merci

[Xenos]

V1.1.0: "Add zIndex method in Element Class"
Je ne connais pas canvas engine, donc je ne saurai pas t'aider plus, mais à vue de nez, il existe une méthode qui fait ce z-indexing.
Dans la documentation sur la méthode zIndex, tu devrais trouver.

[Kassak]

J'ai déjà vu cette méthode mais dans mon cas je ne pense pas que je puisse l'utiliser.

Je voulais savoir si il y a un autre moyen, en canvas pur ou jsais pas, une bidouille ^^

[Xenos]

Je ne vois pas pourquoi tu ne pourrais pas, mais bon, admettons.
La seule solution que je vois alors, c'est de définir la taille de ton objet sur l'écran [x;y], d'ajouter un paramètre à chaque objet [z] et lors d'un clic sur n'importe quel objet, faire un test pour savoir si le point de clic est dans une des cases, puis prendre parmi ces cases, celle dont la valeur z est la plus grande ou petit.
Mais là, il faudra que tu trouve, mathématiquement, et que tu code une fonction prenant en entrée ta case (forme mathématique parfaite genre losange, carré, etc?), et les coordonnées du point de clic; cette fonction doit alors renvoyer "true" si le point est dans la case.

Mais la vache, ca sera lourd... Essaye de voir pourquoi tu ne peux pas utiliser zIndex, et de faire en sorte de pouvoir l'utiliser.

Pour ma part, je n'utiliserai pas, sur eclerd, canvas, car je trouve que les textes sont moches dessus, et que c'est justement pas génialement gérable. Je préfère le DOM.

[Kassak]

Parceque je suis en train de modifier la librairie pour qu'elle gère l'isométrique, du coup les comportements liés ne sont pas attendus. Du plus il y avait une erreur dans la fonction zindex.. ^^

Moi ce que je cherche à faire depuis tout à l'heure, c'est que j'ai mon _tile, que j'aimerais transformer en _tile_losange... je pense que c'est possible en canva (transform() ? ) mais alors là.. je patoge !

[Xenos]

Transformer un carré dont les cotés de longueur L sont selon les axes x et y pour en faire un losange de hauteur H et de longueur L se fait ainsi:
- Tourner le carré d'un 8e de tour (rotate 45°)
- Modifier l'échelle du résultat (scale(h, v))
Avec h = H/((√2)*L) et v = V/((√2)*L)


Avec L la longueur du coté du carré initial, H la longueur AC dans l'image ci-dessus et V la longueur DB.

[Kassak]

Mais dans mon cas, ma tuile est directement en iso. C'est juste qu'elle est dans une image carré.

[Ter Rowan]

je dirais deux options :

1) les éléments cliquables sont les carrés à l'intérieur du losange. Ainsi si tu cliques sur les bords, rien ne se passe, si tu cliques au milieu de la cellule, ça marche

2) une seule zone cliquable : la carte entière. Quand tu captes l'événement javascript tu regardes où est le pointeur de la souris, tu en déduis la case, coté js : plus compliqué que 1 ) car il faut la formule mais plus léger pour le navigateur (un seul événement pas autant qu'il y a de cases) et pas de "trous"

[Xenos]

Alors ton problème est mathématique: il te faut détecter si un point [x;y] est dans un losange.
Supposons que le carré fasse [2*u;2*v] de cotés (u demi-longueur horizontale, v demi-longueur verticale), et qu'il soit centré en [X;Y].
Le point de clic est [x;y].
On pose [a;b] = ([x;y]-[X;Y])/([u;v]), c'est à dire que [a;b] ont les coordonnées du point dans le repère "réaligné" (centré, renormé) sur le carré.

Alors le clic est dans le losange si et seulement si:

Code :

|a+b| < 1 and |a-b| < 1

avec |x| la valeur absolue de x.
Si le clic est dans le carré, tu fais ce que tu veux sur la case; sinon, tu fais remonter l'évènement à un autre carré, et ainsi de suite.