Etape 8 – Toiles et peintres

En informatique, le terme de toile (canvas en anglais) est souvent utilisé pour désigner une surface virtuelle sur laquelle il est possible de dessiner. Contrairement aux toiles réelles, totalement passives, les toiles virtuelles sont généralement actives et savent « se dessiner dessus ». Par exemple, il suffit de dire à une toile virtuelle que l'on désire dessiner un cercle de couleur, rayon et centre donnés pour qu'elle s'exécute et mette son état à jour en fonction.

Le dessin des cartes du projet se fait sur une toile virtuelle représentant une zone rectangulaire du plan, identifiée par les coordonnées de ses coins bas-gauche et haut-droit. Au moment de sa création, une toile est uniformément colorée avec une couleur de fond donnée.

Une telle toile vierge est présentée dans la figure ci-dessous, annotée avec les axes du plan et les points P_BL (pour bottom-left) et P_TR (pour top-right) désignant deux coins opposés de la zone du plan couverte par la toile.

Les toiles de ce projet sont relativement simples, dans le sens où elles ne savent dessiner que les deux types de primitives géométriques qui nous intéressent, à savoir les polylignes et les polygones à trous. Le dessin de chacune de ces primitives est toutefois paramétrable de différentes manières, comme cela a été expliqué lors de l'étape précédente.

En informatique, on désigne parfois par le terme de peintre (painter en anglais) l'entité chargée de dessiner sur une toile virtuelle.

On l'a vu, les toiles virtuelles sont plus actives que les toiles réelles et, pour compenser, les peintres virtuels sont moins actifs que leurs homologues réels. C'est-à-dire qu'ils ne modifient pas directement l'état de la toile sur laquelle ils dessinent, mais se contentent de lui demander de dessiner certaines primitives avec un style donné.

Les peintres de ce projet sont des peintres de carte qui, étant donnés une carte et une toile, dessinent cette première sur cette dernière selon une technique qui leur est propre.

La création de peintre de cartes se fait en utilisant une approche — parfois qualifiée de compositionnelle ou d'algébrique — similaire à celle utilisée pour créer les flots Java (interface Stream) ou les images continues de la série 5.

Dans cette approche, plutôt que de définir des peintres monolithiques sophistiqués, capables p.ex. de dessiner une carte telle que celle donnée dans le document d'introduction au projet, on définit d'une part des peintres très simples, appelés peintres de base, et d'autre part des opérations de dérivation ou de combinaison permettant d'obtenir de nouveaux peintres à partir de peintres existants. Un peintre sophistiqué s'obtient ensuite en appliquant ces opérations à des peintres simples.

Les peintres de base sont au nombre de trois :

1. un peintre de polygone, qui peint l'intérieur de tous les polygones de la carte avec une couleur donnée,
2. un peintre de polyligne, qui peint toutes les polylignes de la carte avec un style de ligne donné,
3. un peintre de pourtour, qui peint toutes les polylignes formant les enveloppes et les trous des polygones de la carte avec un style de ligne donné.

Deux opérations, que nous qualifierons d'opérations de dérivation ou de combinaison, permettent d'obtenir un nouveau peintre à partir de peintres existants :

1. le filtrage, qui consiste à obtenir un nouveau peintre à partir d'un peintre existant en ne fournissant à ce dernier qu'un sous-ensemble des entités de la carte à dessiner,
2. l'empilement, qui consiste à combiner deux peintres pour en obtenir un nouveau dessinant tout d'abord la carte du premire peintre puis, par dessus, la carte du second.

En utilisant judicieusement les peintres de base et ces opérations de dérivation, il est possible d'obtenir des peintres composites ayant un comportement aussi sophistiqué que nécessaire. Par exemple, il est facile d'obtenir un peintre ne dessinant que les lacs, en bleu, et les bâtiments, en noir :

1. un premier peintre de polygone paramétré avec la couleur bleue est créé,
2. ce premier peintre est filtré dans le but de ne voir que les entités de la carte possédant l'attribut natural avec la valeur water,
3. un second peintre de polygone paramétré avec la couleur noire est créé,
4. ce second peintre est filtré dans le but de ne voir que les entités de la carte possédant l'attribut building, quelle que soit la valeur associée,
5. le second peintre filtré est empilé sur le premier peintre filtré pour obtenir le peintre final.

En procédant de manière similaire, on peut obtenir sans trop de difficultés un peintre capable de dessiner des cartes aussi détaillées que celle d'Interlaken présentée dans le document d'introduction au projet.

La première interface à définir, nommée p.ex. Canvas, représente une toile. Elle est extrêmement simple et ne contient que deux méthodes (abstraites) :

1. une méthode, nommée p.ex. drawPolyLine, permettant de dessiner sur la toile une polyligne donnée (de type PolyLine) avec un style de ligne donné (du type défini lors de l'étape précédente),
2. une méthode, nommée p.ex. drawPolygon, permettant de dessiner sur la toile un polygone donné (de type Polygon) avec une couleur donnée (du type défini lors de l'étape précédente).

Comme cela a été dit plus haut, la seule mise en œuvre concrète de toile à écrire dessine les primitives qu'on lui demande de dessiner dans une image discrète. Ce dessin étant loin d'être trivial, il sera fait à l'aide d'une partie de la bibliothèque Java nommée Java2D et décrite rapidement à la section suivante.

Cette mise en œuvre concrète de la toile se fait naturellement dans une classe implémentant l'interface des toiles définie ci-dessus et nommée p.ex. Java2DCanvas. Son constructeur prend les arguments suivants :

• les points, en coordonnées du plan (donc les coordonnées projetées), correspondant aux coins bas-gauche et haut-droite de la toile,
• la largeur et la hauteur de l'image de la toile, en pixels,
• la résolution de l'image de la toile, en points par pouce,
• la couleur de fond de la toile.

En plus des méthodes drawPolyLine et drawPolygon, cette classe doit offrir une méthode, nommée p.ex. image, permettant d'obtenir l'image de la toile, de type BufferedImage.

Il est fortement conseillé, dans le constructeur de cette classe, d'utiliser la méthode de changement de repère écrite lors de l'étape précédente pour calculer le changement entre le repère du plan et celui de l'image, et de le stocker dans un attribut. Cela simplifie l'écriture des méthodes drawPolyLine et drawPolygon, qui peuvent l'utiliser pour transformer les coordonnées des points des lignes ou polygones qu'elles reçoivent en coordonnées à passer aux méthodes de Java2D.

Java2D est constitué d'un ensemble de classes permettant de dessiner et manipuler des images en deux dimensions (2D). Pour des raisons historiques, ces classes se trouvent dans le paquetage nommé java.awt (AWT signifiant Abstract Window Toolkit) et ses sous-paquetages.

La plupart des concepts de Java2D sont identiques à ceux du langage de description de page PostScript, prédécesseur du format PDF développé dans les années 80 par Adobe. Ce langage offrait un modèle graphique 2D d'une très grande sophistication pour l'époque, dont l'influence a été telle qu'aujourd'hui encore la plupart des modèles graphiques 2D — p.ex. celui de SVG ou encore de l'élément canvas de HTML 5 — s'en inspirent très largement.

Seul un petit sous-ensemble de concepts de Java2D est nécessaire pour écrire la classe ci-dessus, et est décrit succinctement ci-dessous. Pour comprendre en détail le fonctionnement des différentes classes et méthodes, reportez-vous à leur documentation en suivant les liens donnés et étudiez l'exemple donné plus bas.

La seconde interface à définir est une interface fonctionnelle, nommée p.ex. Painter, représentant un peintre. Sa méthode abstraite, nommée p.ex. drawMap, prend en argument une carte et une toile, son but étant de dessiner la première sur la seconde.

En dehors de sa méthode abstraite, l'interface des peintres offre un certain nombre de méthodes statiques permettant d'obtenir des peintres de base de l'un des trois types décrits plus haut — polygone, polyligne ou pourtour. Nous vous proposons d'offrir un total de sept méthodes :

1. la première, nommée p.ex. polygon, prend en argument la couleur de dessin et retourne un peintre dessinant l'intérieur de tous les polygones de la carte qu'il reçoit avec cette couleur,
2. la deuxième, nommée p.ex. line, prend en argument un style de ligne (du type défini à l'étape précédente) et retourne un peintre dessinant toutes les lignes de la carte qu'on lui fournit avec ce style,
3. la troisième, nommée de la même manière que la deuxième, prend en arguments les cinq paramètres de dessin d'une ligne et retourne un peintre dessinant toutes les lignes de la carte qu'on lui fournit avec le style correspondant,
4. la quatrième, nommée de la même manière que la deuxième, ne prend en argument que la largeur du trait et la couleur et utilise les valeurs par défaut données dans l'étape précédente pour les autres paramètres de style,
5. la cinquième, nommée p.ex. outline, est identique à la deuxième mais dessine les pourtours de l'enveloppe et des trous de tous les polygones de la carte qu'on lui fournit,
6. la sixième est l'équivalent de la troisième pour la cinquième,
7. la septième est l'équivalent de la quatrième pour la cinquième.

De plus, l'interface des peintres offre trois méthodes par défaut permettant d'obtenir des peintres dérivés de peintres existants :

1. une méthode nommée p.ex. when prenant en argument un prédicat de type Predicate<Attributed<?>> et retournant un peintre se comportant comme celui auquel on l'applique, si ce n'est qu'il ne considère que les éléments de la carte satisfaisant le prédicat,
2. une méthode nommée p.ex. above prenant en argument un autre peintre et retournant un peintre dessinant d'abord la carte produite par ce second peintre puis, par dessus, la carte produite par le premier peintre,
3. une méthode nommée p.ex. layered ne prenant aucun argument et retournant un peintre utilisant l'attribut layer attaché aux entités de la carte pour la dessiner par couches, c-à-d en dessinant d'abord tous les entités de la couche –5, puis celle de la couche –4, et ainsi de suite jusqu'à la couche +5.

Réfléchissez bien avant de programmer ces méthodes, dont le code est court (entre 5 et 10 lignes au maximum) mais pas évident à écrire. De plus, n'hésitez pas à utiliser les méthodes when et above ainsi que le filtre produit par la méthode onLayer de l'étape précédente pour écrire la méthode layered.

Notez finalement que les peintres étant représentés par une interface fonctionnelle, l'utilisation judicieuse de fonctions anonymes (lambdas) permet de réduire considérablement la quantité de code à écrire.

Le fonctionnement des peintres, filtres et toiles n'étant pas des plus évidents à comprendre, un exemple de leur utilisation permet de clarifier les choses. L'extrait de programme ci-dessous construit, en s'aidant des classes définies à l'étape précédente, le peintre décrit plus haut et l'utilise pour dessiner une carte très simple de Lausanne et sa région.

// Le peintre et ses filtres
Predicate<Attributed<?>> isLake =
    Filters.tagged("natural", "water");
Painter lakesPainter =
    Painter.polygon(Color.BLUE).when(isLake);

Predicate<Attributed<?>> isBuilding =
    Filters.tagged("building");
Painter buildingsPainter =
    Painter.polygon(Color.BLACK).when(isBuilding);

Painter painter = buildingsPainter.above(lakesPainter);

Map map = …; // Lue depuis lausanne.osm.gz

// La toile
Point bl = new Point(532510, 150590);
Point tr = new Point(539570, 155260);
Java2DCanvas canvas =
    new Java2DCanvas(bl, tr, 800, 530, 72, Color.WHITE);

// Dessin de la carte et stockage dans un fichier
painter.drawMap(map, canvas);
ImageIO.write(canvas.image(), "png", new File("loz.png"));

L'image obtenue est la suivante :

Pour tester cette étape et la précédente, nous vous conseillons d'écrire un petit programme principal permettant de dessiner, dans un fichier, la carte de Lausanne donnée en exemple ci-dessus.

Attention : l'image visible plus haut est redimensionnée par votre navigateur afin de tenir dans les marges de ce document, donc pour comparer l'image que vous obtenez avec la nôtre, pensez à télécharger cette dernière sur votre ordinateur via ce lien.