6 Replies Latest reply on May 6, 2011 1:35 PM by Shongrunden

    SolidColorStroke thickness not uniform when greater than 1

    Teriath Level 1

      I'm having some issues using the SolidColorStroke to add a border around a rectangle greater than one pixel thick. For some reason it's rendering weird. I have the rects in a horizontal list and on the first rect the left and top edges are one pixel thick and the right and bottom are two, and on all the other rects the top is one pixel thick and all other sides are two. I assumed that setting the weight to whatever value would uniformly set the thickness to ALL sides of the rect to that value but it doesn't look like it's working that way. Is there something I'm missing?

       

      This is the rect code I'm using.

       

      <s:Rect width="101" height="71">
           <s:stroke>
                <s:SolidColorStroke color="0x009DE0" weight="2"/>
           </s:stroke>
           <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
           </s:fill>
      </s:Rect>
      
        • 1. Re: SolidColorStroke thickness not uniform when greater than 1
          CleanCoder Level 2

          As a test, try setting your rect's x/y coords to half pixels (ex. 10.5, 10.5) just to see if that corrects the way the stroke appears.

          • 2. Re: SolidColorStroke thickness not uniform when greater than 1
            Teriath Level 1

            Wow, that actually fixed it...I assume this means that flex is just being stupid and not accounting for the border in positioning the rect. That's a pretty bad bug in my opinion.

            • 3. Re: SolidColorStroke thickness not uniform when greater than 1
              CleanCoder Level 2

              Its been a known issue for a while, if you search there are a few articles out there that explain it a little more in depth. Aside from the half pixel hack, the only other way around it that I know of is to not use SolidColorStroke (or GraphicsStroke for that matter) and create the impression of a stroke by using 2 overlapping fills. The second fill basically punches out a hole in the first fill, leaving only the outer edges of the first fill. This also requires drawing using the Graphics API (I dont think it can be done with GraphicElements). Look into UIComponent's source and check out the "drawRoundRect()" function.

              • 4. Re: SolidColorStroke thickness not uniform when greater than 1
                Shongrunden Adobe Employee

                This seems to work fine for me in the released 4.5 SDK:

                 

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                               xmlns:s="library://ns.adobe.com/flex/spark">

                 

                    <s:Rect x="10" y="10" width="101" height="71">

                        <s:stroke>

                            <s:SolidColorStroke color="0x009DE0" weight="2"/>

                        </s:stroke>

                        <s:fill>

                            <s:SolidColor color="0xFFFFFF"/>

                        </s:fill>

                    </s:Rect>

                 

                </s:Application>

                 

                Can you provide a similar application that demonstrates the non-uniform thickness?

                 

                In general working with strokes can be tricky to get pixel aligned, this post may help explain a little:

                http://flexponential.com/2010/03/14/measuring-a-graphicelement-with-a-stroke-in-a-group/

                • 5. Re: SolidColorStroke thickness not uniform when greater than 1
                  Teriath Level 1

                  For one thing the coordinates of each rect is (0,0) not (10,10), that was just an example that the other person gave. The other thing, which you're missing, is that the rects are inside of a horizontal list.

                   

                  ItemRenderer example, put this in TestItemRenderer.mxml:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/mx">
                       <s:Rect width="101" height="71">
                            <s:stroke>
                                 <s:SolidColorStroke color="0x009DE0" weight="2"/>
                            </s:stroke>
                            <s:fill>
                                 <s:SolidColor color="0xFFFFFF"/>
                            </s:fill>
                       </s:Rect>
                  </s:ItemRenderer>
                  

                   

                   

                  Application example:

                   

                  <?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">
                       
                       <fx:Script>
                            <![CDATA[
                                 import mx.collections.ArrayList;
                                 
                                 [Bindable] private var _data:ArrayList = new ArrayList([0, 1, 2]);
                            ]]>
                       </fx:Script>
                       
                       <s:List x="32" y="32" borderAlpha="0" dataProvider="{_data}" itemRenderer="TestItemRenderer">
                            <s:layout>
                                 <s:HorizontalLayout gap="8"/>
                            </s:layout>
                       </s:List>
                       
                  </s:Application>

                   

                   

                  Although I'm not using 4.5. I'm using 4.1.0

                  • 6. Re: SolidColorStroke thickness not uniform when greater than 1
                    Shongrunden Adobe Employee

                    Ah yes I see now.  The blog post I mentioned is the explanation for this.

                     

                    You can see the behavior here:

                     

                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                   xmlns:s="library://ns.adobe.com/flex/spark">

                     

                        <s:Rect x="0" y="0" width="101" height="71">

                            <s:stroke>

                                <s:SolidColorStroke color="0x009DE0" weight="2"/>

                            </s:stroke>

                            <s:fill>

                                <s:SolidColor color="0xFFFFFF"/>

                            </s:fill>

                        </s:Rect>

                     

                    </s:Application>

                     

                    If you use top/left instead of x/y you will see the full stroke since top/left/right/bottom accounts for the full stroke.

                     

                     

                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                   xmlns:s="library://ns.adobe.com/flex/spark">

                     

                        <s:Rect top="0" left="0" width="101" height="71">

                            <s:stroke>

                                <s:SolidColorStroke color="0x009DE0" weight="2"/>

                            </s:stroke>

                            <s:fill>

                                <s:SolidColor color="0xFFFFFF"/>

                            </s:fill>

                        </s:Rect>

                     

                    </s:Application>