Measuring a GraphicElement with a Stroke in a Group

How Flex treats strokes on GraphicElements can be a little tricky. This post explains how the stroke of a GraphicElement contributes to the measured size of a spark Group.

First consider a plain old Rect with a red fill and no stroke inside of a Group:

<s:Group id="group1">
    <s:Rect id="rect1" width="50" height="50">
        <s:fill><s:SolidColor color="red" /></s:fill>
    </s:Rect>
</s:Group>

The size of group1 will obviously be equal to its contentSize (the size and position of the elements in it). In this case just the size of the Rect which is 50×50. Now if a stroke was added to that Rect what would happen?

<s:Group id="group1">
    <s:Rect id="rect1" width="50" height="50">
        <s:fill><s:SolidColor color="red" /></s:fill>
        <s:stroke><s:SolidColorStroke color="green" weight="20" alpha="0.5" /></s:stroke>
    </s:Rect>
</s:Group>

By default half of this stroke will be drawn “inside” the fill, and the other half will be drawn outside of the fill.

Notice that the Rect with a stroke visually *looks* like its 50+10+10=70 pixels wide and tall, but group1.width returns 60. This is because the size of a Rect is actually the size of its fill + half the size of its stroke (per the Flash Player behavior). In this case 50+(20/2)=60.

What happens to that extra half of the stroke then? Well it spills out the top and left of the Group. This can be seen by putting a blue background Rect in the Group to visualize the bounds of the Group. The rest of the stroke on the bottom and to the right are still in the Group.

By default, Group’s layout property is set to BasicLayout. When using x/y to position an element in BasicLayout, only half of the stroke is taken into account (per the Flash Player behavior). But when using left/top to position an element, the full stroke is taken into consideration and x/y are adjusted as needed. By default, x and y are set to 0, so the application is behaving as expected. If you set left=”0″ and top=”0″ on the Rect with the stroke, you will get the behavior you might have been expecting, with the Rect positioned by the outside of its stroke.

For example:

View Source

In this case setting left=”0″ top=”0″ will move the position of the Rect so that the top and left portion of the stroke is now inside the bounds of the Group. This is because setting top=left=0 caused rect2.x=rect2.y=10 as seen in the trace statement.

The stroke has an alpha of 0.5 so you can see how it interacts with the colors behind it.


Screenshot 1 – Example of the difference between x=0,y=0 and top=0,left=0


Screenshot 2 – Detailed description of the geometry in the x=0,y=0 case


Screenshot 3 – Detailed description of the geometry in the top=0,left=0 case

This has come up a few times on the forums and via bug posts so I wanted to explain some of the details here in hopes it might help out people who haven’t run into this yet. Check out SDK-22963 and SDK-20567 for more information.

Note: This sample requires Flex SDK 4.0.0.13729 or higher. You can get the latest SDK builds from opensource.adobe.com.

3 thoughts on “Measuring a GraphicElement with a Stroke in a Group”

  1. @Ravi Kumar – I assume you mean like the selection rectangle on Windows? I’ll put that on my list of requested blog posts.

Comments are closed.