Lignes et cercles cliquables avec HTML Canvas

Question

Je pense à faire une application où, à certains endroits, un graphique est affiché qui cartographie les gens dans le temps et l'espace. L'accès vertical est l'emplacement, l'accès horizontal est l'heure et chaque personne est identifiée par une ligne. À tout moment où la personne a fait quelque chose de significatif, il y a un plus gros point sur sa ligne. Conceptuellement, cliquer sur le point fait apparaître des données sur ce point particulier, mais cliquer n'importe où sur la ligne vous amène à un détail sur cette personne. Hypothétiquement, lorsque vous passez la souris sur la ligne, la ligne doit changer de couleur et lorsque vous passez la souris sur un point, il suffit que le point change de couleur.

Je sais que je pourrais le faire assez facilement avec flash, mais je me demandais si ces jours-ci il n'y a aucun moyen de le faire en utilisant seulement html et javascript. C'est possible? (La compatibilité n'est pas un problème, la seule machine que je vise est la mienne.)

Merci!

Answer 1

Vous pouvez le faire avec du canvas, mais il peut être plus simple d'utiliser SVG. Depuis SVG utilise DOM, vous obtenez des méthodes intégrées pour gérer des événements comme le clic etc., au lieu d'avoir à écrire votre propre code de manipulation comme vous le feriez avec canvas.

Il existe quelques bibliothèques qui rendent le travail avec SVG plus simple et compatible avec plusieurs navigateurs, comme la bibliothèque dojox.gfx de Raphael et Dojo.

Answer 2

Vous pouvez créer les points div s superposés, ce qui vous permet de gérer facilement les clics, etc. Vous devrez bien sûr trier le positionnement. Toutefois, pour mettre la ligne en surbrillance, il faudra calculer manuellement la distance de point à ligne et la redessiner.