Question

I had to solve a problem concerning the SolidColorStroke of the flex framework. The scenario is simple, we have an visible object and we want a border around it. I built a graphics component that draws a Rect. That Rect was defined as follows

object; // the object which should get the border, defined somewhere outside, 
        // just fyi


var borderThickness:Number = 10;    
rect.x = object.x - borderThickness;
rect.y = object.y - borderThickness;
rect.width = object.width + (borderThickness * 2);
rect.height = object.height + (borderThickness * 2);
rectStroke.weight = borderThickness;

//the MXML code
<s:Rect id="rect">
  <s:stroke>
    <s:SolidColorStroke id="rectStroke" />
  </s:stroke>
</s:Rect>

I thought it should like this (just for illustration, not an exact image of what it should be, the border in this illustration is exactly around the object)

But I was wrong because the border did cover some parts of the objects on the right and on the bottom. My next thought was, that the stroke of the border doesn’t grow inside the component, but on each side of the border in equally parts. What I mean by that is that when it grows inside the component and you place it at the location x = 0, y = 0 the width in my example of the left side of the border would be from 0 to 10. The thicker the border gets, the more it grows to the inside until there is just one big rectangle.

When I say it grows equally to each part of the border I mean that if you place the rect on x = 0, y = 0 and your border is 10px thick, the left side of the border goes from -5 to 5.
I hope it’s clear what I mean.

So, as I said before I thought the border grows equally to both parts of the stroke. So I changed the calculations of the width and height to:

rect.width = object.width + borderThickness;
rect.height = object.height + borderThickness;

Now the width and height of the object is just increase the borderThickness (half of the borderThickness on every side). I thought now the border should fit exactly the object (as I expected it with my first version too…).

It look better than the first version but still some parts on the right and the left of the object are covered.

After a long time of thinking why it doesn’t work as I expect I found a solution that worked for me. It seems that the stroke doesn’t grow to equal parts on both sides, it seems that it grows by 75% to the inside and 25% to the outside. The following illustration shows what I mean by that.

The yellow line inside the border shows the actual border (when the stroke would be 1px). You can see that it is now exactly in the middle of the stroke but 75% from the inside and 25% from the outside.

My Question is, does anybody experience a similar behavior? Does anyone know why that works the way it does. Am I using it correct? Or what am I doing wrong?

The documentation of Adobe doesn’t really tell you that the SolidColorStroke works this way. If you need more code, please let me know.

kind regards
Markus

Answer 1

<s:Group width="250" height="250" x="50" y="50">
    <!--Normally borders grows inside so for ex: top should be equal to -weight of the stroke -->
    <s:Rect top="-10" left="-10" right="-10" bottom="-10">
        <s:stroke>
            <s:SolidColorStroke weight="10" color="0x00FF00"/>
        </s:stroke>
    </s:Rect>

    <s:Rect top="0" left="0" right="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke weight="1"/>
        </s:stroke>
    </s:Rect>
</s:Group>

AS Method:

        private function drawSimpleBorders(obj:UIComponent, tickness:Number = 5):void
        {
            var gr:Graphics = obj.graphics;

            gr.lineStyle(tickness,0,alpha);

            var k:Number = tickness/2;

            gr.drawRect(-k,-k, obj.width+tickness, obj.height+tickness);
        }

I tried this and had no problems, just send target and you’ll get borders.