Rico on Flex

View Sample | Source Code

Degrafa supports strokes but the output is a little disappointing. A quick solution is to apply age-old Photoshop skills. And that is to create a smaller shape enclosed inside another shape to mimic a stroke. The containing shape’s background color will serve as the artificial stroke. You also need to add 2 pixels to both the height and width if you’re going to use this approach since a real stroke is an extra 1 pixel (at least in this example) border around the button, easily take care of this inside the overriden updateDisplayList function.

The result looks smoother and more consistent than Degrafa’s built in stroke. However this approach will require more code and may consume more system resource.

The smoothness of the stroke is also affected by the chosen color. It seems that the darker the color of the stroke or if it’s a complement of the button’s color, the less smooth it appears. The size of the corner radius also affects the smoothness of the stroke. You just have to experiment to find the best combination. Thicker strokes on the other hand look alright, so I guess this example only applies to 1 pixel strokes.

Another thing I noticed with Degrafa is it sometimes renders inconsistent corner radii (see screenshot above). One corner may seem off or may not be curved at all. This can be fixed, albeit inelegantly, by using a RoundedRectangleComplex to allow setting of radii for individual corners.