Contents | < Le Formatage Intégré des Textes | La Gestion de Couleur >
XSL-FO fournit les moyens d'afficher des images et des graphiques vectorielles par deux éléments: fo:instream-foreign-object quand vous avez le contenu inclus dans le document XSL-FO et fo:external-graphic quand l'image réside dans un dossier externe.
Un des formats soutenus pour fo:instream-foreign-object est SVG (Les graphiques scalables des vecteurs):
<fo:flow flow-name="xsl-region-body">
<fo:block font-family="Arial" font-size="14pt">SVG Graphics Example</fo:block>
<fo:block>
<fo:instream-foreign-object>
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="280">
<linearGradient id="Grad1" gradientUnits="objectBoundingBox"
x1="0" y1="0" x2="1" y2="1">
<stop stop-color="rgb(238,130,238)" offset="0"/>
<stop stop-color="blue" offset="0.2"/>
...
</linearGradient>
<!-- Linear gradient on the stroke of a rectangle -->
<rect x="20" y="20" width="440" height="80" fill="url(#Grad1)" />
<text font-family="Arial" font-size="14" x="20" y="130">
Multi-color linear gradient.
</text>
<!-- Radial gradient on the stroke of a rectangle -->
<radialGradient id="Grad2" gradientUnits="userSpaceOnUse"
cx="240" cy="210" r="220" fx="240" fy="210">
<stop stop-color="black" offset="0"/>
<stop stop-color="yellow" offset="0.2"/>
...
</radialGradient>
<rect x="20" y="150" width="440" height="80" fill="url(#Grad2)" />
<text font-family="Arial" font-size="14" x="20" y="260">
Multi-color radial gradient.
</text>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:flow>
| Pour le code source complet pour cet exemple de code voyez "Tutorial/SVG Graphics.fo" situé dans le dossier XML Documents Samples/Tutorial. |
Le résultat du rendant devrait être identique à la figure suivante.
Figure 1
Les points importants dans l'exemple ci-dessus sont:
fo:instream-foreign-object est employé pour envelopper (entourer) le graphique de SVG.
À l'intérieur de SVG, nous remplissons deux rectangles avec des gradients.
En plus de SVG, XF Rendering Server 2008 soutient XChart, un langage de XML développé par Ecrion Software pour décrire des diagrammes génériques. Le prochain exemple montre un diagramme de montagne inclus dans XSL-FO:
<fo:flow flow-name="PageBody">
<fo:block font="bold 18pt Arial">
Area Chart Example
</fo:block>
<fo:block>
<fo:instream-foreign-object>
<xc:root width="500pt" height="290pt"
xmlns:xc="http://www.ecrion.com/xc">
<xc:graph x="5pt" y="5pt" width="450pt" height="280pt">
<xc:plot-area>
<xc:serie type="area" stroke-color="black" fill-color="red"
stroke-width="1.5pt" >
<xc:data-point category="1988-07-31" value="10000.00"/>
<xc:data-point category="1988-08-31" value="9854.79"/>
...
</xc:serie>
<xc:serie type="area" stroke-color="black"
fill-color="navy" stroke-width="1.5pt">
<xc:data-point category="1988-07-31" value="9899.39"/>
...
</xc:serie>
</xc:plot-area>
<xc:value-axis orientation="vertical">
<xc:title font-weight="bold">Value</xc:title>
<xc:grid-lines stroke-color="silver"/>
<xc:axis-labels offset="4pt" format="$#,##0"/>
</xc:value-axis>
<xc:category-axis orientation="horizontal">
<xc:major-tick-marks style="outside"/>
<xc:title font-weight="bold">Date</xc:title>
<xc:grid-lines stroke-color="silver"
stroke-dash-array="2px 2px"/>
<xc:axis-labels offset="3pt"/>
</xc:category-axis>
</xc:graph>
</xc:root>
</fo:instream-foreign-object>
</fo:block>
</fo:flow>
| Pour le code source complet pour cet exemple de code voyez "Tutorial/XChart.fo" situé dans le dossier XML Documents Samples/Tutorial. |
Le résultat du rendant devrait être identique à la figure suivante.
Figure 2
Chaque document de XChart contient l'élément xc:root.
Nous ajoutons plusieurs séries de données et nous définissons l'axe horizontale et verticale.
Vous pouvez trouver plus d'informations sur le web à XChart 1.0 Language Reference.
Pour montrer une image à partir d'un dossier externe, employez fo:external-graphic. Tous les formats essentiels sont soutenus, y compris BMP, JPEG, GIF, PNG, WMF, POSTSCRIPT, TIFF, etc.
Unisys U.S. LZW Patent No. 4,558,302 utilisé pour la compression des images GIF a expiré le 20 Juin, 2003, les brevets homologues du Royaume-Uni, de la France, de l'Allemagne et d'Italie ont expiré le 18 Juin, 2004, les brevets japonais homologues ont expiré le 20 Juin, 2004 et le brevet canadien homologue a expiré le 7 Juillet, 2004. Pour plus d'informations visitez Unisys Web Site.
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="LetterPage" page-width="3in" page-height="1.8in">
<fo:region-body region-name="PageBody" margin="0.1in"/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="LetterPage">
<fo:flow flow-name="PageBody" font-family="Arial" font-size="10pt">
<fo:block font-weight="bold">
External Graphics Example
</fo:block>
<fo:block>
Text Before
<fo:external-graphic src="ecrion-logo.png"
content-height="0.7in"
vertical-align="middle" />
Text After
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
| Pour le code source complet pour cet exemple de code voyez "Tutorial/External Graphics.fo" situé dans le dossier XML Documents Samples/Tutorial. |
Le résultat du rendant devrait être identique à la figure suivante.
Figure 3
Il y a plusieurs choses à remarquer dans cet exemple:
Les urls d'image peuvent être absolus ou relatifs. Quand ils sont relatifs, la place du document XSL-FO est employée pour calculer tout le chemin jusq'à l'image. Vous pouvez employer la propriété baseUrl (voyez XF Rendering Server Programmers Reference) pour annuler cette place.
L'image peut être sélectée en utilisant les propriétés content-width et content-height. Dans cet exemple nous indiquons seulement la hauteur désirée et la largeur est calculée automatiquement par le rendeur, préservant le format de l'image.
Les graphiques intégrés peuvent être décalés verticalement en utilisant l'attribut vertical-align.
Contents | < Le Formatage Intégré des Textes | La Gestion de Couleur >