08-05-2017, 03:50 PM
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 )
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 )