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

最新推荐文章于 2013-11-27 09:22:39 发布

shilei22

最新推荐文章于 2013-11-27 09:22:39 发布

阅读量92

点赞数

分类专栏： FLEX 文章标签： Flex XML Blog

本文链接：https://blog.csdn.net/shilei22/article/details/83775096

版权

FLEX 专栏收录该内容

93 篇文章 0 订阅

订阅专栏

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>