6 Replies Latest reply on Jun 11, 2009 4:59 PM by Peter deHaan

    Ugly rounded corners...

    wicket971 Level 1

      Does anyone know how to make the rounded corners appear crisper in flex?  I've attached a screenshot showing how they are rendering now and the right side looks great, however the left side looks awful.

        • 1. Re: Ugly rounded corners...
          Peter deHaan Level 4

          wicket971,

           

          Can you post a small test case that created that button?

          For example, I'm curious whether it's a Spark Button or Halo Button, or whether it's perhaps due to the fact that the Button is falling on a half-pixel, etc.

           

          Thanks,

           

          Peter

          • 2. Re: Ugly rounded corners...
            David_F57 Level 5

            Is this a standard skin or one you have tried to create, because it looks like there is an overlap in rect areas in the jpg you supplied. Be very wary when you write skins especally when useing stroke as unfortunately the stroke command quiet happily ignores the bounding rect parameters if line thickness exceeds 1. 

            • 3. Re: Ugly rounded corners...
              wicket971 Level 1

              I've modified the base button skin that spark uses. The modified code is below:

               

              <?xml version="1.0" encoding="utf-8"?>

               

              <!--

               

                  ADOBE SYSTEMS INCORPORATED
                  Copyright 2008 Adobe Systems Incorporated
                  All Rights Reserved.

               

                  NOTICE: Adobe permits you to use, modify, and distribute this file
                  in accordance with the terms of the license agreement accompanying it.

               

              -->

               

              <!--- The default skin class for the Spark Button component. -->
              <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                    minWidth="21" minHeight="21"
                    alpha.disabled="0.5">

               

                  <!-- host component -->
                  <fx:Metadata>
                      <![CDATA[
                      /**
                       * @copy spark.skins.default.ApplicationSkin#hostComponent
                       */
                      [HostComponent("spark.components.Button")]
                      ]]>
                  </fx:Metadata>
                 
                  <fx:Script>
                  <![CDATA[        
                      /* Define the skin elements that should not be colorized.
                         For button, the graphics are colorized but the label is not. */
                      static private const exclusions:Array = ["labelElement"];
                             
                      /**
                       * @copy spark.skins.SparkSkin#colorizeExclusions
                       */       
                          override public function get colorizeExclusions():Array {return exclusions;}
                      ]]>       
                  </fx:Script>
                 
                  <!-- states -->
                  <s:states>
                      <s:State name="up" />
                      <s:State name="over" />
                      <s:State name="down" />
                      <s:State name="disabled" />
                  </s:states>
                 
                  <!-- layer 1: shadow -->
                  <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
                      <s:fill>
                          <s:LinearGradient rotation="90">
                                  <s:GradientEntry color="0xFFFFFF"
                                                 color.down="0xFFFFFF"
                                                 alpha="0.0"
                                                 alpha.down="0" />
                                  <s:GradientEntry color="0xFFFFFF"
                                                 color.down="0xFFFFFF"
                                                 alpha="0.0"
                                                 alpha.down="0.0" />
                          </s:LinearGradient>
                      </s:fill>
                  </s:Rect>
                 
                  <!-- layer 2: fill -->
                  <s:Rect left="1" right="1" top="1" bottom="1" radiusX="5" radiusY="5">
                      <s:fill>
                          <s:LinearGradient rotation="-90">
                              <s:GradientEntry color="0xE5E5E5"
                                             color.over="0xF2F2F2"
                                             color.down="0x0059ff"
                                             color.disabled="0XF2F2F2"
                                             ratio="0"
                                             alpha="1.0" />
                              <s:GradientEntry color="0xD9D9D9"
                                             color.over="0xE5E5E5"
                                             color.down="0x002d80"
                                             color.disabled="0xececec"
                                             ratio="0.50"
                                             alpha="1.0" />
                              <s:GradientEntry color="0xE5E5E5"
                                             color.over="0xF2F2F2"
                                             color.down="0x0059ff"
                                             color.disabled="0xf3f3f3"
                                             ratio="0.50"
                                             alpha="1.0" />
                              <s:GradientEntry color="0xffffff"
                                             color.over="0xffffff"
                                             color.down="0x7facff"
                                             color.disabled="0xffffff"
                                             ratio="1.0"
                                             alpha="1.0" />
                          </s:LinearGradient>
                      </s:fill>
                  </s:Rect>
                 
                 
                  <!-- layer 5: highlight stroke (all states except down) -->
                  <s:Rect left="1" right="1" top="1" bottom="1" radiusX="5" radiusY="5" excludeFrom="up,down,disabled" width="1">
                      <s:stroke>
                          <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0x0059ff" alpha.up="1" />
                              <s:GradientEntry color="0x0059ff" alpha.up="1" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect>
                 
                  <s:Rect left="1" right="1" top="1" bottom="1" radiusX="5" radiusY="5" excludeFrom="over,down,disabled" width="1">
                      <s:stroke>
                          <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0x808080" alpha.up="1" />
                              <s:GradientEntry color="0x808080" alpha.up="1" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect>
                 
                  <s:Rect left="1" right="1" top="1" bottom="1" radiusX="5" radiusY="5" excludeFrom="over,up,disabled" width="1">
                      <s:stroke>
                          <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0x0059ff" alpha.up="1" />
                              <s:GradientEntry color="0x0059ff" alpha.up="1" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect>
                 
                  <s:Rect left="1" right="1" top="1" bottom="1" radiusX="5" radiusY="5" excludeFrom="over,up,down" width="1">
                      <s:stroke>
                          <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0xbfbfbf" alpha.up="1" />
                              <s:GradientEntry color="0xbfbfbf" alpha.up="1" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect> 
                 
                 
                 
                 
                  <!-- layer 8: text -->
                  <!---
                      @copy spark.components.supportClasses.ButtonBase#labelElement
                  -->
                  <s:SimpleText id="labelElement"
                           textAlign="center"
                           verticalAlign="middle"
                           lineBreak="toFit"
                           truncation="1"
                           horizontalCenter="0" verticalCenter="1"
                           left="7" right="7" top="5" bottom="5">
                  </s:SimpleText>
                 
              </s:SparkSkin>

              • 4. Re: Ugly rounded corners...
                Peter deHaan Level 4

                wicket,

                 

                Yeah, I think this is the issue where the corners can get a bit blocky when on a half-pixel. For example, I was able to reproduce the issue with the following test case:

                <?xml version="1.0" encoding="utf-8"?>
                <!--  -->
                <s:Application name=""
                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo">
                
                 <s:VGroup left="20" right="20" top="20" bottom="20">
                  <s:HSlider id="xSl"
                    maximum="100"
                    liveDragging="true"
                    valueInterval="0.1"
                    width="100%" />
                  <s:HSlider id="ySl"
                    maximum="100"
                    liveDragging="true"
                    valueInterval="0.1"
                    width="100%" />
                  <s:Group width="100%" height="100%">
                   <s:Button label="defaultButton"
                     skinClass="CustomButtonSkin"
                     x="{xSl.value}" y="{ySl.value}"
                     width="200" height="200" />
                  </s:Group>
                 </s:VGroup>
                
                </s:Application>
                


                I'm pretty sure this is a known issue, but can you please file a bug at http://bugs.adobe.com/flex/ against the Flex SDK (and please attach the modified skin and test case, if possible).

                 

                Thanks,

                Peter

                • 5. Re: Ugly rounded corners...
                  Peter deHaan Level 4

                  Actually, I'll submit it (sorry) -- http://bugs.adobe.com/jira/browse/SDK-21768

                   

                  Please feel free to add additional comments/notes to the bug (and vote).

                   

                  Peter

                  • 6. Re: Ugly rounded corners...
                    Peter deHaan Level 4

                    test, sorry.