[Résolu] Canvas et Souris

[Theotime74]

Bonjour.
Je suis actuellement en train de réaliser une carte d'un réseau en canvas et je rencontre des problèmes pour créer les interactions désiré avec le joueur.
Voici mes problèmes :
-Détecter le passage de la souris au-dessus d'une ligne (largeur variable) ou d'un disque (rayon variable) ;
-Détecter le clic de la souris sur ces lignes et disques ;
Existe-t-il un cours ou une aide détaillée à se sujet ouest-ce possible tout simplement ?

Merci de votre aide.

[Xenos]

Salut,

canvas n'as aucune notion des objets que tu dessines dedans: ce n'est pas un DOM au sens usuel, avec des éléments HTML qu'on peut sélectionner et qui viennent avec leur lot d'interactivité sans avoir rien à faire (= quand on clique un <a> le lien est suivit sans qu'on ne le code). C'est une fenêtre de rendu dans lequel tu vas placer tes images.

Donc, si tu veux que ces images deviennent "interactives", et que les composants réagissent au passage de la souris, alors il va te falloir reconstruire quasiment un navigateur web, puisque tu vas devoir gérer toi-même la logique de "où est le pointeur dans le canvas? qu'est ce qui se trouve à cet endroit? est-ce au premier plan? à l'arrière-plan? est-ce interactif?" etc.

Tu peux, du coup, choisir l'une des options suivantes:
• Te tapper ce travail à grand coupe de addEventListener('mouseover', function (e) { e.clientX/clientY }), mais tu vas déprimer avant d'avoir fait la moindre interaction viable
• Intégrer un framework qui se charge déjà de faire cette gestion, là, je n'ai pas de nom à te proposer de mémoire (mis à part celui que Prélude avait fait me semble-t-il... mais je n'ai plus le nom en tête >.> bref, faudra chercher un framework qui gère toute cela, et t'y intégrer)
• Basculer sur un DOM en sortant du canvas, c'est ce que j'ai fait et je travaille mes cartes en SVG maintenant (cf https://usometry.reinom.com ou https://beta.eclerd.com ou https://toile.reinom.com/un-systeme-solaire-anime/ ); ça évite la lourdeur d'un FW et son apprentissage souvent spécifique
• Lâcher le web et te tourner vers un SDK type Unity ou Neoaxis, qui proposent l'équivalent des frameworks canvas, mais en plus puissant (avec parfois un export vers le web et canvas)

Pour la culture, la spec de "canvas": https://html.spec.whatwg.org/multipage/s...as-element (ça sert toujours ces specs HTML )

[Roworll]

A la lecture de ton problème, je pencherai également vers le SVG, a fortiori si les formes à tracer sont simples.
SVG est bien supporté, il intègre nativement la notion d'objets manipulables via JS et au besoin, il existe même des librairies qui encapsulent pas mal de chose (svgjs, SnapSvg, RaphaelJs).

[Theotime74]

Merci pour la réponse
Maintenant que j'y pense, je ne comprend pas pourquoi je me suis embêté avec canvas alors qu'une partie des éléments graphiques de mon jeu sont déjà en svg >.<
En moins d'une heure, j'ai réglé mes problèmes.

[Prélude]

Mon "framework" est un plugin jQuery qui permet la gestion d'une carte 3D isométrique. Dispo gratos sur GitHub.

Sinon, il y a Phaser.js qui est pas mal comme framework sur un canvas. Rapide à apprendre. C'est avec ça que j'ai fait le casse-brique "Fission".

[Xenos]

T'as un visu à montrer du coup?

[Prélude]

Ah bah oui... Tout est expliqué ici : http://www.prelude-prod.fr/2017/04/fissi...r-android/

[Xenos]

Erf, désolé, je demandais à Theotime74 pour voir ce que ce "réseau" est réellement :\

[Theotime74]

Actuellement, je ne fais que prendre en main les outils pour la création de mon jeu. Mais promis, dès que l'avancement de mes travaux seront suffisant, je ferais une présentation dans la bonne rubrique.

[Xenos]

Ah, ok, je pensais que "en moins d'1h j'ai réglé mes problèmes" signifiait "j'ai mon réseau qui s'affiche et qui réagit youpi". Hâte de voir le résultat