1 Reply Latest reply on Oct 29, 2008 11:24 PM by whittenizer

    Help with custom borders

    whittenizer
      Hi all,

      I'm trying to do a drawRoundedRect with notch in each of the corners. This is basically a rounded rect with a corner radius of 3. It looks sloppy when it renders. I would love for it to look like the border for a standard button. You'll notice this notch in each of the corners for a standard button.

      Even when doing this with the degrafa engine, it still renders poorly. Anyone have any idea how to get this notched border effect?

      Thanks,

      David Whitten
        • 1. Re: Help with custom borders
          whittenizer Level 1
          Ok, after many hours of playing around with degrafa and flex, I've nailed it. I know this seems like such a small deal but it was very important to me for it to be absolutely perfect, down to the pixel. It was a matter of going through many variations of values for each of the corners. It happens that I needed two rects, one overlays the other with a slightly smaller width and height. One cannot get this notch effect with only one rect and have it look descent. Anyways, I took a screen shot of a regular button and this custom one and blew it up to 800x, and verified the correct pixelation between them both, and they were identical.

          Here is a portion of the code:

          <fills>
          <LinearGradientFill id="upFill" angle="90" >
          <GradientStop id="prop1" ratio="0" alpha="1" color="#EE9819"/>
          <GradientStop id="prop2" ratio="1" alpha="1" color="#FAE38F"/>
          </LinearGradientFill>
          </fills>

          <stroke>
          <SolidStroke color="#EE9819" alpha="1" id="BasicStroke" />
          </stroke>

          <geometry>

          <RoundedRectangleComplex height="{aheight}" width="{awidth}" bottomLeftRadius="3"
          bottomRightRadius="3" topLeftRadius="3" topRightRadius="3">
          <fill>
          <SolidFill id="backFill" alpha="1" color="#777777"/>
          </fill>

          </RoundedRectangleComplex>

          <RoundedRectangleComplex state="upSkin" x="1" y="1" height="{aheight-2}"
          width="{awidth-2}" bottomLeftRadius="2" bottomRightRadius="2" topLeftRadius="2"
          topRightRadius="1" fill="{upFill}">
          </RoundedRectangleComplex>

          </geometry>

          Happy coding