# Image Rendering Reference

## Navigation:

Index General Information Elements Utils Examples

## Drawing Example

This example shows different ways of drawing elements, with different borders, background colors and thickness and it also shows how fields are placed onto drawn elements like lines or rectangles.

- Template: templates/example5.xsl
- Record: records/empty.xml

## Drawing Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<field border="2" height="30" width="150" x="10" y="20" >
<label font-size="18" >
Bordered field
</label>
</field>
<rect height="50" width="200" x="10" y="80" >
</rect>
<field background-color="black" border="2" border-color="white" height="30" valign="center" width="180" x="20" y="90" >
<label align="center" color="white" >
Label
</label>
</field>
<rect border="5" fill="false" height="50" width="50" x="10" y="150" >
</rect>
<line thickness="5" x-from="10" x-to="210" y-from="220" y-to="220" >
</line>
<rect border="5" height="20" width="300" x="10" y="250" >
</rect>
<line color="white" x-from="20" x-to="300" y-from="260" y-to="260" >
</line>
<line thickness="3" x-from="220" x-to="380" y-from="20" y-to="240" >
</line>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Advanced Drawing Example

This example shows the usage drawing elements like triangles, ellipses and polygons.

- Template: templates/example12.xsl
- Record: records/empty.xml

## Advanced Drawing Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="800" rotation="270" width="480" >
<polygon border="4" fill="false" points="104,248 160,279 208,303 250,322 267,314 256,297 235,284 212,270 217,250 251,243 285,241 332,247 367,248 392,248 420,245 428,239 425,231 411,229 385,228 368,228 339,224 306,219 298,209 321,203 357,198 387,191 431,185 443,176 433,165 409,167 372,174 344,177 293,186 293,180 321,170 351,157 406,140 408,136 404,128 393,125 377,128 328,144 311,149 269,161 265,156 279,144 313,126 329,116 328,108 311,107 286,118 268,125 231,145 210,150 182,153 160,157 132,162 118,168 109,178" >
</polygon>
<triangle border="5" x1="50" x2="200" x3="400" y1="750" y2="550" y3="750" >
</triangle>
<ellipse height="150" width="270" x="180" y="400" >
</ellipse>
<ellipse border="10" fill="false" height="100" width="100" x="30" y="400" >
</ellipse>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Rounded Rectangle/Field Example

This exapmle shows the usage of rounded corners in rectangles and fields with text.

- Template: templates/example14.xsl
- Record: records/empty.xml

## Rounded Rectangle/Field Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="800" width="480" >
<field border="8" corner-radius="25" height="200" rounded-corners="TOP_LEFT,BOTTOM_RIGHT" valign="center" width="300" x="50" y="50" >
<label align="center" font-size="40" >
Test Label
</label>
</field>
<field border="2" corner-radius="10" height="80" rounded-corners="TOP_RIGHT,TOP_LEFT,BOTTOM_RIGHT" width="200" x="10" y="300" >
<text align="center" font-size="20" >
Multiple lines inside a rounded field
</text>
</field>
<rect corner-radius="50" height="100" rounded-corners="TOP_RIGHT,TOP_LEFT,BOTTOM_RIGHT,BOTTOM_LEFT" width="250" x="20" y="400" >
</rect>
<rect border="5" corner-radius="70" fill="false" height="150" rounded-corners="TOP_RIGHT" width="300" x="100" y="600" >
</rect>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image