Forum Programmation.web HTML5 Canvas : défilement/zoom dans une zone de saisie.

EDIT : une demo de ce que j'ai fait (voir commentaires plus bas pour explications)

Bonjour.

Toujours sur un de mes projets, j'ai pas mal avancé sur une partie de l'IHM, mais je bloque sur un point de "détail".

Petite explication : je suis en train de développer une interface permettant de créer un TCO pour modélisme ferroviaire à l'aide de canvas HTML5. J'ai organisé la "surface" de saisie en "tuiles" carrées, dans lesquelles je trace les divers éléments de voie (aiguillages, courbes, etc) …. Ma zone de saisie est composé de 3 canvas superposés :

• sur le premier canvas (au fond), j'ai tracé ma grille de "tuiles". Pour tracer ma grille je trace mes rectangles 1 à 1 à l'aide de la fonction drawrect.

• sur le second canvas, je dessine les éléments de voie (aiguillages, rails, etc …) qui sont "posés" sur le plan. Ces éléments son dessinés à l'aide de la fonction line (et/ou path, je ne me rappelle plus exacteent, mais peu importe).

• sur le canvas du dessus, je dessine les éléments de voie qui ne sont pas "posés", et qui suivent le pointeur de souris pendant le positionnement de l'élément de voie. J'utilise les mêmes fonctions de traçage que sur le second canvas, et j'efface/retrace en fonction de la position de la souris. La superposition des canvas me permet de mieux gérer le déplacement au suivi de la souris, ou la suppression d'un élément de voie qui serait déjà posé sans avoir à redessiner tout ce qui existe en dessous.

A chaque fois que je "pose" un élément sur la voie, je remplis un tableau (pas encore sauvegardé de manière persistente), contenant le type d'élément et les coordonnées de la "tuile" sur laquelle il est positionné. Ceci dans le but de pouvoir retracer mes elements lors de zoom ou défilement de la zone de saisie.

Pour l'instant, j'ai tracé une zone de saisie qui tient complètement sur le canvas. Je peux agrandir ou réduire la taille des tuiles (et donc la densité de celles-ci sur ma zone de saisie) assez facilement en modifiant une constante (par contre il me faut relire ma page donc perdre mes modifs pour le moment).
Je suis capable d'effacer et de retracer à la demande la grille ainsi que les éléments déjà positionnés.

Par contre je souhaiterais pouvoir scroller et zoomer pendant la saisie dans le cas ou le schema de mon TCO viendrait à dépasser la taille de mon canvas, un peu comme le font les outils de saisie de schéma tel que Dia ou Inkscape : mais je ne sais pas par quel bout prendre le problème. L'idée serait de :

• pouvoir déplacer la zone de saisie sur la droite ou vers le bas lorsque j'arrive vers les extrémités du canvas
• pouvoir zoomer/dézoomer (et scroller si besoin). Je voudrais pouvoir gérer le déplacement de la zone de saisie à l'aide de barres de défilementà droite et en bas du canvas.

J'hésite entre deux méthodes pour réaliser ça :

• utiliser les outils de l'API canvas pour zoomer. Ca me demanderait d'effacer le contenu des canvas (je sais faire), modifier les coordonnées de mon repère (avoir une origine aux coordonnées (-20,-20) par exemple, et éventuellement jouer sur le zoom) puis retracer la grille de tuile ainsi queles elements de voie. Ceci nécessiterait bien sur de prendre en compte ce zoom et le décalage de l'origine du repère pour la détection de la position des éléments de voie que je tracerai.

• ne pas utiliser les API du canvas, effacer le contenu de mes canvas, et redessiner en appliquant un décalage et/ou un coefficient d'agrandissement ou de réduction sur les dimensions de mes tuiles. Il me faudra également gérer un décalage de repère et prendre en compte un facteur multiplicateur pour le zoom.
  Quelle est à votre avis la méthode la plus judicieuse à utiliser, vous qui connaissez un peu mieux que moi le développement HTML ? Personnellement je suis plutôt porté vers la 2eme méthode. Il y a plus de choses à faire à la main, mais je pense qu'on garde un meilleur contrôle. En effet, j'ai l'impression que les effets de changement d'échelle/zoom/translation en html5 ne sont pas fait pour ce que je veux faire, mais plutôt pour permettre de dessiner plus facilement certains motifs en déplaçant l'origine et l'orientation du repère. Si je dois faire ainsi, je sais comment faire pour gérer le zoom mais je sèche pour le défilement.

Auriez-vous une idée ?

Note : je comptais mettre en place un petit serveur www pour que vous puissiez voir une démo et mieux comprendre ce que je décris mais je n'ai pas de serveur www sous la main. Peut-être demain ?