The Artima Developer Community
Articles | Discuss | Print | Email | First Page | Previous | Next
This article is sponsored by Adobe.

Stroke of Genius: Drawing Lines in Flex 4
by Chet Haase
July 7, 2010

Advertisements

Summary
With a demo app from his book, Flex 4 Fun, Chet Haase shows how the new graphics primitives in Flex 4 use strokes to achieve different rendering effects for their outlines.

You may want to draw lines in your UI to achieve a particular effect, like borders on filled areas, outlines on empty areas, or separator lines between different elements in the interface. These may be straight or curved lines, or bounding lines around larger, filled areas. These lines can be drawn in different ways, with different colors, widths, and joins at the corners. These line properties are defined as strokes on the objects.

All of the graphics objects in Flex 4 except for BitmapImage have an optional stroke property that defines the characteristics of the object's lines, like their color and width. For the one-dimensional Line object, the stroke is all there is; it's all that you see of the object. For the rest of the objects, Path, Rect, and Ellipse, the stroke is the border line around the object's filled area.

Strokes come in three varieties: SolidColorStroke, which has a single color, and two strokes that use gradients, LinearGradientStroke and RadialGradientStroke. For now, we'll talk about solid color strokes, which is the common case for lines.

A stroke has a few properties that are necessary for specific situations, but for which the defaults are generally sufficient. For example, the joints and miterLimit properties are useful for controlling how the intersections look with multi-segment stroked objects like Path and Rect. And the scaleMode property controls how scaling on the object affects the width of the stroke. Here we'll focus on just the more common stroke properties used to achieve particular effects on the stroke.

Here is an example of two lines drawn with different strokes:

    <s:Line xFrom="20" yFrom="20" xTo="100" yTo="100">
        <s:stroke>
            <s:SolidColorStroke color="black"/>
        </s:stroke>
    </s:Line>
    <s:Line xFrom="100" yFrom="20" xTo="20" yTo="100">
        <s:stroke>
            <s:SolidColorStroke color="gray" alpha=".6" weight="10"/>
        </s:stroke>
    </s:Line>

The first object is a black line with the default weight (0) and alpha (1). The second object is a wide gray that is translucent (note that you can see the black line through the wide gray line), as seen here:

The StrokeTest application helps visualize how the various stroke parameters affect the look of our stroked primitives. This code draws a Rect object with a stroke whose properties come from the input controls in the application:

    <s:Rect x="20" y="170" width="30" height="30"
            scaleX="{Number(scaleXInput.text)}" 
            scaleY="{Number(scaleYInput.text)}">
        <s:stroke>
            <s:SolidColorStroke color="black"
                weight="{Number(weightInput.text)}"
                miterLimit="{Number(miterLimitInput.text)}"
                joints="{jointsInput.selectedItem}"
                scaleMode="{scaleModeInput.selectedItem}"/>
            </s:stroke>
    </s:Rect>

The Rect object takes its scale factors from the text input fields so that you can see how scaling in either direction affects the results. The stroke object is an instance of SolidColorStroke with a color of black. The stroke object has other properties that are bound to the values of the various controls in the GUI. Here is the application that you can play with to see how the stroke properties affect the results:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

The application is pretty simple as Flex applications go. The interesting part is in how the properties affect the look of the graphic primitive. Play with the application to get a feel for how the properties interact.

Share your opinion

Discuss this article in the Articles Forum topic, Stroke of Genius: Drawing Lines in Flex 4.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at:
http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

For more on states in Flex 4, see "Working with States in Flex 4":
http://www.artima.com/articles/flex_4_states.html

Flex.org
http://www.flex.org

About the Author

Chet Haase worked as a senior computer scientist on the Flex SDK team at Adobe Systems, Inc., during the Flex 4 release. He was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet posts regularly to his technical blog at http://graphics-geek.blogspot.com, where you can find articles, videos, demos, and plenty of source code. Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at http://chetchat.blogspot.com, and in his book When I am King..., which is available at Amazon.com.


Articles | Discuss | Print | Email | First Page | Previous | Next

This article is sponsored by Adobe.



Google
  Web Artima.com   
Copyright © 1996-2014 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us