2 Replies Latest reply on Nov 4, 2011 12:01 PM by acheek24

    Mobile Button cornerRadius

    acheek24

      Any reason cornerRadius is not supported when using a Spark Button in a mobile project?  I've also tried modifying the skin's ellipseRadiusSize property with no luck.  Trying to make a square-cornered button.  Thanks for any help.

        • 1. Re: Mobile Button cornerRadius
          Jason Szeto Level 3

          ButtonSkin.layoutCornerEllipseSize only affects how the button's background color is drawn. In order to get the borders and shadows to have square corners, you'll need to provide your own fxg border skins. In the ButtonSkin constructor, it sets the upBorderSkin and downBorderSkin. In your ButtonSkin subclass, override these values with your own fxg files.

           

          Next, copy the built in versions of the fxg skins (Button_up.fxg, Button_down.fxg) and modify them. Notice that most of the shapes are Paths. The border, for example is a rounded rectangle with a hole cut out of it. This simulates a stroke (since strokes have a lot of anti-aliasing issues). Here's an example of a square one:

           

          <s:Path data="M 0 0 L 220 0 L 220 65 L 0 65 L 0 0 M 1 64 L 219 64 L 219 1 L 1 1 L 1 64">

           

          You'll need to do the same thing for the shadows, except you'll have to shrink the size by 2 px for each shadow.

          • 2. Re: Mobile Button cornerRadius
            acheek24 Level 1

            Thanks, I was actually just in the Button_up.fxg as we speak.  I will create my own and go from there.