<!-- chapterName "Lesson 6: Drawing lines and shapes" -->

<codesnippet language="xml" style="code"><![CDATA[
<!DOCTYPE document SYSTEM "rml.dtd">
<document filename="example_06.pdf">

    <template showBoundary="1">
        <pageTemplate id="main">
            <pageGraphics>
                <fill color="red"/>
                <stroke color="purple"/>
                <lines> 50 50 100 100</lines>
                <lineMode width="20"/>
                <stroke color="blue"/>
                <circle x="150" y="650" radius="25" fill="yes" stroke="yes"/>
                <lineMode width="5"/>
                <stroke color="green"/>
                <rect x="300" y="625" width="25" height="60" fill="yes" stroke="yes"/>
            </pageGraphics>
            <frame id="first" x1="100" y1="400" width="150" height="200"/>
            <frame id="second" x1="300" y1="400" width="150" height="200"/>

        </pageTemplate>

    </template>

    <stylesheet>
    </stylesheet>

    <story> 
        <para>
            The two illustrations above, and the diagonal line at the bottom of 
            the page, are fixed position graphics drawn in the pageGraphics 
            section of the pageTemplate.  Note that rml operates like a 'state 
            machine': you set the state of the pen, and it remains in that 
            state until you change it.  The two shapes both have very fat stroke
            settings.
        </para>
        <para>
            However, the black square below is defined inside an illustration tag 
            in the story.  The 'pen state' set in the pageTemplate doesn't
            apply here.
        </para>
        <!-- The <illustration> tag below defines a box -->
        <!-- inside which a rectangle is drawn.         -->
        <illustration width="50" height="100">
            <!-- note that we didn't define a pen or stroke colour in the <story> 
            yet, so they have defaulted to black-->
            <rect x="0" y="0" width="25" height="60" fill="yes" stroke="yes"/>
        </illustration>
        <para>
            This paragraph is below the illustration.  Try increasing and 
            decreasing the height of the illustration tag above, and see
            how it affects the flow of the elements in the story.
        </para>
    </story>
</document>

]]></codesnippet>


<para>This example introduces the drawing of graphics primitives like lines, circles and squares.  </para>

<para>Several of the concepts already introduced apply here.  Firstly, as with included images, graphics primitives can be either fixed into position in the &lt;pageTemplate&gt; section, or included in the &lt;story&gt; as a flowable element by wrapping them in the &lt;illustration&gt; tag.  Secondly, graphics primitives have the same styling principles as with text - you set the colour, line style etc., and the pen stays like that until you change it.  Like text state, they are also set seperately within the &lt;story&gt; and the &lt;pageTemplate&gt;.</para>

<para>The sample code draws two shapes at the top of the page and a diagonal line at the bottom.  These are defined in the &lt;pageGraphics&gt; section.  Shapes use the concept of 'stroke' and 'fill' - the stroke is the outline of the shape and the fill is the area within the stroke.  Stroke and fill are switched on and off using the parameters in the shape tags (eg fill="yes"), and the colour is set using the &lt;stroke&gt; and &lt;fill&gt; tags. </para>

<para>The &lt;lines&gt; tag uses four values which represent the x and y co-ordinates of the start and end of the line.</para>

<para>The black square within the &lt;story&gt; has to be surrounded by an &lt;illustration&gt; tag, and it is then treated as a flowable.  As with the image in the &lt;story&gt; in Lesson 5, the &lt;illustration&gt; can be smaller than the graphic it contains, and this will have an effect on the flow of the elements in the frame.</para>
