Flex 4中Spark组件利用Skin Class外观设计(5)

FXG使用fill对图形本体进行上色，使用stroke对图形边框进行上色，而fill（填充）和stroke（画笔）有三种上色方法：

fill — SolidColor（色块），RadialGradient（径向渐变），LinearGradient（线性渐变）。

stroke — SolidColorStroke（实线），RadialGradientStroke（径向渐变），LinearGradientStroke（线性渐变）。

以下是本人写的一个简单的例子：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:VGroup horizontalCenter="0" verticalCenter="0" gap="21">
        <s:HGroup gap="50">
            <s:Rect width="100" height="100">
                <s:fill>
                    <s:LinearGradient>
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <s:Ellipse width="100" height="100">
                <s:fill>
                    <s:RadialGradient>
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:RadialGradient>
                </s:fill>
            </s:Ellipse>
            <s:Rect width="100" height="100">
                <s:fill>
                    <s:SolidColor color="#bffaa00"/>
                </s:fill>
            </s:Rect>
        </s:HGroup>
        <s:HGroup gap="21">
            <s:Ellipse width="100" height="100">
                <s:stroke>
                    <s:LinearGradientStroke weight="20">
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Ellipse>
            <s:Rect width="100" height="100">
                <s:stroke>
                    <s:RadialGradientStroke weight="20">
                        <s:GradientEntry color="#00cc00"/>
                        <s:GradientEntry color="#ff4400"/>
                        <s:GradientEntry color="#004488"/>
                    </s:RadialGradientStroke>
                </s:stroke>
            </s:Rect>
            <s:Ellipse width="100" height="100">
                <s:stroke>
                    <s:SolidColorStroke color="#ffaa00" weight="20"/>
                </s:stroke>
            </s:Ellipse>
        </s:HGroup>
    </s:VGroup>
</s:Skin>

效果如下：


来自http://flex4jiaocheng.com/blog/274