Flex: gap between graphics

Question

I have a group with inside it 2 Graphics, I set the gap in the vertical layout of the group to 0 but there still is a gap of 1 pixel between the 2 graphics. Any idea how to get rid of this?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:Group>
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>
        <s:Graphic height="100">
            <s:Path data="M 50 0 L 50 100 Z" height="100">
                <s:stroke>
                    <s:SolidColorStroke color="#333333"/>
                </s:stroke>
            </s:Path>
        </s:Graphic>
        <s:Graphic height="1">
            <s:Path data="M 0 0 L 100 0 Z" height="1">
                <s:stroke>
                    <s:SolidColorStroke color="#333333"/>
                </s:stroke>
            </s:Path>
        </s:Graphic>
    </s:Group>
</s:Application>

Answer 1

The simple answer to your question is that the gap seems to come from the explicit height you give to the first graphic. Simply remove it and the gap will be gone.

The (IMO) better answer is that this code seems a bit convoluted for creating simple graphics.

• There is no reason you should wrap each line in a Graphics class. You can extend Graphic to create a standalone, reusable graphic class though.
• There is a Line class for drawing straight lines. Much easier than using Path

If you absolutely need the VerticalLayout, you could rewrite that code like this:

<s:Group>
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="center" />
    </s:layout>
    <s:Line height="100">
        <s:stroke>
            <s:SolidColorStroke color="#333333" />
        </s:stroke>
    </s:Line>
    <s:Line width="100">
        <s:stroke>
            <s:SolidColorStroke color="#333333" />
        </s:stroke>
    </s:Line>
</s:Group>

But if you don't really need it for some reason, it can even be reduced to this:

<s:Group>
    <s:Line height="100" horizontalCenter="0">
        <s:stroke>
            <s:SolidColorStroke color="#333333" />
        </s:stroke>
    </s:Line>
    <s:Line width="100" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#333333" />
        </s:stroke>
    </s:Line>
</s:Group>