Edition des graphiques

Amaya vous permet d'inclure des graphiques vectoriels dans des pages Web, suivant la spécification Scalable Vector Graphics (SVG). Les éléments SVG sont gérés comme des composants structurés, de la même façon que les éléments HTML. Donc vous pouvez manipuler les graphiques SVG comme n'importe quelle autre partie des documents HTML. Toutes les fonctions d'édition fournies par Amaya pour éditer le texte sont aussi disponibles pour éditer le graphique. Il y a aussi quelques fonctions de contrôle supplémentaires pour créer des éléments SVG.

Création de graphiques avec la palette

Pour créer un nouvel élément SVG dans un document, vous devez juste placer le point d'insertion (caret) à la position où vous voulez l'insérer, et cliquer le bouton Graphique . Le bouton Graphique affiche une palette qui reste sur l'écran tant que vous n'avez pas cliqué sur le bouton Terminer. Choisissez juste l'élément que vous désirez créer. Les graphiques disponibles sont :

• Une ligne, line en SVG,
• Un rectangle, rect en SVG sans attributs rx ou ry,
• Un rectangle avec des angles arrondis, rect en SVG,
• Un cercle, circle en SVG,
• Une ellipse, ellipse en SVG,
• Une polyligne, polyline en SVG,
• Un polygone, polygon en SVG,
• Les courbes ouvertes et fermées ne sont pas encore implémentées.
• Un fragment de HTML embarqué, foreignObject en SVG,
• Un texte SVG, text en SVG

Quand vous sélectionnez une forme dans la palette et que la sélection est dans la structure HTMLdu document, Amaya crée un nouvel élément SVG juste au début de la sélection courante et la forme choisie dans ce nouvel élément SVG. Amaya crée les dessins SVG comme des blocs, entre deux paragraphes. Si vous souhaitez afficher un dessin en ligne, vous devez aujourd'hui laisser Amaya le créer entre deux paragraphes, et éditer le source ensuite pour le déplacer.

Quand l'élément sélectionné est un élément SVG, la nouvelle forme est ajoutée au dessin SVG. La nouvelle forme est ajoutée après et peut couvrir les éléments précédents.

La création d'une forme nécessite quelques interactions directes avec l'utilisateur:

• Pour créer un rectangle, vous devez tout d'abord sélectionner la position du coin gauche en cliquant avec le bouton gauche de la souris. Laissez le bouton appuyé et déplacez la souris jusqu'à la position du coin opposé, puis lâchez le bouton. La forme est maintenant définie.
• Pour créer un cercle ou une ellipse, vous devez tout d'abord sélectionner la position du centre en cliquant avec le bouton gauche de la souris. Laissez le bouton appuyé et déplacez la souris vers la droite et/ou vers le bas, puis lâchez le bouton. La forme est maintenant définie.
• Pour une polyligne ou un polygone, entrez chaque point en cliquant la position correspondante avec le bouton gauche de la souris. Pour indiquer le dernier point, cliquez avec le bouton du milieu.

Vous pouvez insérer une image dans un graphique. Choisissez l'entrée Image du menu Éléments ou cliquez sur le bouton de la barre de boutons, puis procédez comme dans une page HTML.

Pour insérer des expressions mathématiques dans un dessin SVG, vous devez juste cliquer dans la palette Math alors que la sélection est dans le dessin SVG. Amaya engendrera un foreingObject pour embarquer les balises MathML.

Déplacer les graphiques

• Par manipulation directe - en combinant la touche Control et le bouton gauche de la souris dans la forme, vous pourrez déplacer cette forme.
• En éditant les attributs.

Retailler les graphiques

• Par manipulation directe - en combinant la touche Control et le bouton du milieu ou le bouton droit de la souris à l'intérieur de la forme, vous pourrez redimensionner cette forme.
• En éditant les attributs.

Peindre les graphiques

Avec Amaya, vous pouvez peindre (c.a.d., remplir ou tracer le contour) des éléments SVG avec une couleur simple. La couleur de remplissage par défaut est black, et le contour est par défaut transparent. Mais vous pouvez changer ces valeurs :

• Soit en éditant les attributs SVG fill et stroke (exemple,fill=" #C8FF95" stroke=" #000000"),
• Soit en éditant l'attribut SVG style avec les propriétés fill et stroke (exemple, style="fill: #C8FF95; stroke: #000000")

La palette affichée par l'entrée de menu Style/Couleurs vous permet d'engendrer l'attribut SVG style. Dans la palette Amaya, un clic avec le bouton gauche de la souris engendre la propriété stroke et un clic avec le bouton du milieu ou droit de la souris engendre la propriété fill.

Un élément text SVG est considéré comme une forme graphique, donc la propriété fill peint l'intérieur du caractère et la propriété stroke peint le bord du caractère. Amaya applique la propriété fill aux caractères, mais pas la propriété stroke. Ceci explique que'un clic avec le bouton gauche de la souris n'a pas d'effet immédiat et un clic avec le bouton du milieu ou droit de la souris peint l'élément text.