Le code n'est pas forcément des plus propres, et l'organisation de celui-ci est un peu fouillis, mais il ne s'agit pour le moment que d'un POC pour moi pouvoir explorer les diverses solutions qui s'offrent à moi.
Pour le moment, les controles (zoom, rotation des elements de voie) se font au clavier.
Pour ajouter un elt de voie, il suffit de cliquer dessus et de positionner la souris sur le canvas.
Vous pouvez le déplacer, et le faire tourner via les touches r et e. Vous le positionnez à l'endroit voulu en cliquant sur le canvas.
Pour supprimer un element : bouton delete de la page puis se positionner à l'endroit ou vous voulez supprimer + clic
J'ai avancé un peu sur le zoom : z pour zoomer, a pour dézoomer.
A noter qu'il ya encore un petit bug avec le zoom : il semble que tous les elements tracés ne soient pas redessinés. JE ne sais pas encore pourquoi.
J'ai utilisé la méthode qui ne fait pas appel aux fonctions de zoom du canvas. Je la ferai plus tard pour comparer.
Je cherche maintenant à traiter la translation. Une fois que ce sera fait, je la combinerai avec le zoom/dezoom. pour positionner le centre de zoom au niveau du curseur de la souris.
Il n'y a toujours pas de persistence de données. Ca viendra plus tard (et je vous demanderai peut-être de tester).
Il y a encore beaucoup de travail, mais j'avance petit à petit.
Testé avec Chromium et avec Firefox sous Xubuntu.*
# Infos sur la démo
Posté par totof2000 . En réponse au message HTML5 Canvas : défilement/zoom dans une zone de saisie.. Évalué à 2. Dernière modification le 10 juillet 2014 à 01:33.
Bonsoir.
J'ai mis en ligne une petite démo.
Le code n'est pas forcément des plus propres, et l'organisation de celui-ci est un peu fouillis, mais il ne s'agit pour le moment que d'un POC pour moi pouvoir explorer les diverses solutions qui s'offrent à moi.
Pour le moment, les controles (zoom, rotation des elements de voie) se font au clavier.
Pour ajouter un elt de voie, il suffit de cliquer dessus et de positionner la souris sur le canvas.
Vous pouvez le déplacer, et le faire tourner via les touches r et e. Vous le positionnez à l'endroit voulu en cliquant sur le canvas.
Pour supprimer un element : bouton delete de la page puis se positionner à l'endroit ou vous voulez supprimer + clic
J'ai avancé un peu sur le zoom : z pour zoomer, a pour dézoomer.
A noter qu'il ya encore un petit bug avec le zoom : il semble que tous les elements tracés ne soient pas redessinés. JE ne sais pas encore pourquoi.
J'ai utilisé la méthode qui ne fait pas appel aux fonctions de zoom du canvas. Je la ferai plus tard pour comparer.
Je cherche maintenant à traiter la translation. Une fois que ce sera fait, je la combinerai avec le zoom/dezoom. pour positionner le centre de zoom au niveau du curseur de la souris.
Il n'y a toujours pas de persistence de données. Ca viendra plus tard (et je vous demanderai peut-être de tester).
Il y a encore beaucoup de travail, mais j'avance petit à petit.
Testé avec Chromium et avec Firefox sous Xubuntu.*
Si vous avez des remarques, je suis preneur.