<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Edition des graphiques</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="GENERATOR" content="amaya 8.6, see http://www.w3.org/Amaya/" />
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body xml:lang="fr" lang="fr">

<table summary="toc">
  <tbody>
    <tr>
      <td><img alt="W3C" src="../images/w3c_home" /><img alt="Amaya"
        src="../images/amaya.gif" /></td>
      <td><p><a href="Math.html.fr" accesskey="p"><img alt="previous"
        src="../images/left.gif" /></a> <a href="Manual.html"
        accesskey="t"><img alt="top" src="../images/up.gif" /></a> <a
        href="Xml.html.fr" accesskey="n"><img alt="next"
        src="../images/right.gif" /></a></p>
      </td>
    </tr>
  </tbody>
</table>

<div id="Edition">
<h2>Edition des graphiques</h2>

<p>Amaya vous permet d'inclure des graphiques vectoriels dans des pages Web,
suivant la spécification Scalable Vector Graphics (<a
href="http://www.w3.org/TR/svg/">SVG</a>). 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.</p>

<h3><a name="L288">Création de graphiques avec la palette</a></h3>

<p>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 <strong>Graphique</strong> <img src="../images/Graph.gif"
alt="Graph" />. Le bouton Graphique affiche une palette qui reste sur l'écran
tant que vous n'avez pas cliqué sur le bouton <code>Terminer</code>.
Choisissez juste l'élément que vous désirez créer. Les graphiques disponibles
sont :</p>
<ul>
  <li>Une ligne, <code>line</code> en SVG, <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <line y1="3px" x1="0px" x2="17px" y2="20px" style="stroke: #B20000"
            stroke="1"/>
    </svg>
  </li>
  <li>Un rectangle, <code>rect</code> en SVG sans attributs <code>rx</code>
    ou <code>ry</code>, <svg xmlns="http://www.w3.org/2000/svg" width="2cm"
         height="0.6cm">
      <rect x="6px" width="22px" height="18px"
            style="fill: #FFCB69; stroke: #0071FF" stroke="1"/>
    </svg>
  </li>
  <li>Un rectangle avec des angles arrondis, <code>rect</code> en SVG, <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <rect rx="6px" stroke="1" width="23px" height="18px"
            style="fill: #E5E500; stroke: #4C00E5"/>
    </svg>
  </li>
  <li>Un cercle, <code>circle</code> en SVG, <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <circle cy="10px" cx="12px" r="10px" style="fill: #C1FFE9; stroke: red"
              stroke="1"/>
    </svg>
  </li>
  <li>Une ellipse, <code>ellipse</code> en SVG, <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <ellipse cy="10px" cx="20px" rx="15px" ry="10px" style="fill: #B795FF"
            stroke="1"/>
    </svg>
  </li>
  <li>Une polyligne, <code>polyline</code> en SVG,<svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
      <polyline points="0,16 19,0 33,16 51,6" transform="translate(4,0)"
                stroke="1" style="stroke: #0000B2; fill: #FFBC95"/>
    </svg>
  </li>
  <li>Un polygone, <code>polygon</code> en SVG, <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.7cm">
      <polygon points="0,16 13,0 26,12 43,4 44,16 15,16 12,11"
               transform="translate(2,0)" stroke="1"
               style="fill: #C8FF95; stroke: #000000"/>
    </svg>
  </li>
  <li>Les courbes ouvertes et fermées ne sont pas encore implémentées. <svg
         xmlns="http://www.w3.org/2000/svg" width="2cm" height="0.6cm">
    </svg>
  </li>
  <li>Un fragment de HTML embarqué, <code>foreignObject</code> en SVG,<svg
         xmlns="http://www.w3.org/2000/svg" width="6cm" height="45px">
      <rect y="0" x="27px" width="110px" height="45px" style="fill: #C1FFFF"
            stroke="1"/>
      <foreignObject width="120px" y="0" x="20px">

        <div xmlns="http://www.w3.org/1999/xhtml">
        <ul>
          <li>First item</li>
          <li>Second item</li>
        </ul>
        </div>
      </foreignObject>
    </svg>
  </li>
  <li>Un texte SVG, <code>text</code> en SVG<svg
         xmlns="http://www.w3.org/2000/svg" width="9.5cm" height="1.2cm">
      <text y="32px" x="14px"
            style="font-family: helvetica; font-size: 14pt; fill: #FFAA00">A
        simple text in SVG
      </text>
    </svg>
  </li>
</ul>

<p></p>

<p>Quand vous sélectionnez une forme dans la palette et que la sélection est
dans la structure HTML du 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.</p>

<p>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.</p>

<p>La création d'une forme nécessite quelques interactions directes avec
l'utilisateur:</p>
<ul>
  <li>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.</li>
  <li>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.</li>
  <li>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.</li>
</ul>

<p>Vous pouvez insérer une image dans un graphique. Choisissez l'entrée
<strong>Image</strong> du menu <strong>XHTML</strong> ou cliquez sur le
bouton <img alt="Image " src="../images/Image.gif" longdesc="longdesc.htm" />
de la barre de boutons, puis procédez <a
href="ImageMaps.html.fr#Adding">comme dans une page HTML</a>.</p>

<p>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.</p>

<h3><a name="L292">Déplacer les graphiques</a></h3>
<ul>
  <li>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton gauche</strong> de la souris dans
    la forme, vous pourrez déplacer cette forme.</li>
  <li>En éditant les attributs.</li>
</ul>

<h3><a name="Retailler">Retailler les graphiques</a></h3>
<ul>
  <li>Par manipulation directe - en combinant la <strong>touche
    Control</strong> et le <strong>bouton du milieu</strong> ou le
    <strong>bouton droit</strong> de la souris à l'intérieur de la forme,
    vous pourrez redimensionner cette forme.</li>
  <li>En éditant les attributs.</li>
</ul>

<h3><a name="Peindre">Peindre les graphiques</a></h3>

<p>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 <code>black</code>, et le contour est par défaut
<code>transparent</code>. Mais vous pouvez changer ces valeurs :</p>
<ul type="square">
  <li>Soit en éditant les attributs SVG <code>fill</code> et
    <code>stroke</code> (<span style="color: #E55500">exemple,</span><span
    style="color: #E55500">fill=" #C8FF95" stroke=" #000000"</span>),</li>
  <li>Soit en éditant l'attribut SVG <code>style</code> avec les propriétés
    <code>fill</code> et <code>stroke</code> (<span
    style="color: #E55500">exemple, style="fill: #C8FF95; stroke:
    #000000"</span>)</li>
</ul>

<p>La palette affichée par l'entrée de menu <strong>Style/Couleurs</strong>
vous permet d'engendrer l'attribut SVG <code>style</code>. 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.</p>

<p>Un élément <code>text</code> SVG est considéré comme une forme graphique,
donc la propriété <code>fill</code> peint l'intérieur du caractère et la
propriété <code>stroke</code> 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
<code>text</code>.</p>

<div id="page_body">
<h2>Gestion de librairies graphiques SVG</h2>
<ul>
  <li>Utilisation d'une librairie d'objets graphiques SVG
    <p><img alt="Use SVG library" src="../images/scenario_graphique.png"
    /></p>
    <p>Pour coller un élément graphique d'une librairie SVG dans un document,
    vous devez:</p>
    <ol>
      <li>Déplacer le curseur d'insertion à l'endroit où vous désirez insérer
        cet élément.</li>
      <li>Cliquer sur le bouton <strong>Librairie</strong> . Le bouton
        <strong>Librairie</strong> (<img alt="SVG Library button"
        src="../images/SVGLibrary.gif" />) affiche la librairie graphique
        standard.</li>
      <li>Choisir un élément graphique en cliquant sur sa représentation
        graphique.</li>
      <li>Sélectionner le mode de "copie": vous pouvez choisir de copier ou
        de référencer l'élément graphique.
        <ul>
          <li>En mode "Copie", vous éditez la définition SVG explicite de
            l'élément graphique.</li>
          <li>En mode "Référence", vous éditez un élément &lt;use&gt;
            référençant la définition explicite de l'élément. ( <a
            href="http://www.w3.org/TR/SVG/struct.html#UseElement">Regarder
            la spécification SVG</a>)</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>Ajouter un nouvel objet graphique à une librairie
    <p><img alt="Add new model in a library"
    src="../images/enrichissement_lib.png" /></p>
  </li>
</ul>
</div>

<p>Pour ajouter des éléments SVG à une librairie, vous devez :</p>
<ol>
  <li>Sélectionner des éléments SVG dans un document.</li>
  <li>Presser les touches <code>Control</code> key "l" <code>Control</code>
    key "a" ("l" comme librairie "a" comme ajout) ou utiliser le menu pour
    ouvrir le dialogue d'ajout.</li>
  <li>Sélectionner un titre de librairie dans lequel vous souhaitez ajouter
    la sélection.</li>
  <li>Confirmer ou choisir de créer une nouvelle librairie dans laquelle vous
    souhaitez ajouter la sélection.</li>
</ol>

<p></p>
</div>

<p><a href="Math.html.fr"><img alt="previous" src="../images/left.gif"
/></a><a href="Manual.html"><img alt="top" src="../images/up.gif" /></a><a
href="Xml.html.fr#page_body"><img alt="next" src="../images/right.gif"
/></a></p>
<hr />
</body>
</html>
