代码:
- <?xml version="1.0" encoding="utf-8"?>
- <!--
- ADOBE SYSTEMS INCORPORATED
- Copyright 2008 Adobe Systems Incorporated
- All Rights Reserved.
- NOTICE: Adobe permits you to use, modify, and distribute this file
- in accordance with the terms of the license agreement accompanying it.
- -->
- <!--- The default skin class for a Spark RadioButton component.
- @see spark.components.RadioButton
- @see spark.components.RadioButtonGroup
- @langversion 3.0
- @playerversion Flash 10
- @playerversion AIR 1.5
- @productversion Flex 4
- -->
- <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5">
- <fx:Metadata>
- <![CDATA[
- /**
- * @copy spark.skins.spark.ApplicationSkin#hostComponent
- */
- [HostComponent("spark.components.RadioButton")]
- ]]>
- </fx:Metadata>
- <s:states>
- <s:State name="up" />
- <s:State name="over" stateGroups="overStates" />
- <s:State name="down" stateGroups="downStates" />
- <s:State name="disabled" stateGroups="disabledStates" />
- <s:State name="upAndSelected" stateGroups="selectedStates" />
- <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
- <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
- <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
- </s:states>
- <s:Group verticalCenter="0" width="13" height="13">
- <!-- drop shadow -->
- <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">
- <s:stroke>
- <s:LinearGradientStroke rotation="90" weight="1">
- <s:GradientEntry color="0x000000"
- color.downStates="0xFFFFFF"
- alpha="0.011"
- alpha.downStates="0" />
- <s:GradientEntry color="0x000000"
- color.downStates="0xFFFFFF"
- alpha="0.121"
- alpha.downStates="0.57" />
- </s:LinearGradientStroke>
- </s:stroke>
- </s:Ellipse>
- <!-- fill -->
- <s:Ellipse left="2" top="2" right="2" bottom="2">
- <s:fill>
- <s:LinearGradient rotation="60">
- <s:GradientEntry color="0xAEB3B9" alpha="1.0"
- color.over="0x96D3FB"
- />
- <s:GradientEntry color="0xF2F2F2" alpha="1.0"
- color.over="0xBBE5FD"
- />
- <s:GradientEntry color="0xFFFFFF" alpha="0.8"
- color.over="0xDFF3FE"
- />
- </s:LinearGradient>
- </s:fill>
- </s:Ellipse>
- <!-- layer 6: highlight stroke (all states except down) -->
- <s:Ellipse left="2" right="2" top="2" bottom="2">
- <s:stroke>
- <s:LinearGradientStroke rotation="45" weight="1">
- <s:GradientEntry color="0x8E8F8F"
- color.over="0x84CDF9" alpha.over="0.33"
- color.selectedStates="0x919292" alpha.selectedStates="1.0"/>
- <s:GradientEntry color="0x919292" alpha="0.12" alpha.over="0.0396"
- color.selectedStates="0x919292" alpha.selectedStates="1.0"/>
- <s:GradientEntry color="0xf4f4f4" alpha="0.12" alpha.over="0.0396"
- color.selectedStates="0x919292" alpha.selectedStates="1.0"/>
- </s:LinearGradientStroke>
- </s:stroke>
- </s:Ellipse>
- <s:Rect left="5" top="1" right="5" height="1">
- <s:fill>
- <s:SolidColor color="0xFFFFFF"
- color.downStates="0x939393"
- alpha.overStates="0.22" />
- </s:fill>
- </s:Rect>
- <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
- <s:Ellipse left="0" top="0" right="0" bottom="0">
- <s:stroke>
- <s:LinearGradientStroke rotation="90" weight="1">
- <s:GradientEntry color="0x919292" alpha="1.0"
- color.over="0x5586A3"
- />
- </s:LinearGradientStroke>
- </s:stroke>
- </s:Ellipse>
- <!-- dot -->
- <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. -->
- <s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate"
- data="M 0 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0">
- <s:fill>
- <!--- @private
- Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. -->
- <s:LinearGradient id="dotFill" rotation="225">
- <s:GradientEntry color="0x1898D1" alpha="1.0"/>
- <s:GradientEntry color="0x1898D1" alpha="0.9"/>
- <s:GradientEntry color="0xf4f4f4" alpha="0.5"/>
- </s:LinearGradient>
- </s:fill>
- </s:Path>
- <s:Path left="3" top="3" includeIn="selectedStates"
- data="M 1 0 Q 5 0 6 3 Q 5 5 3 6 Q 0 5 0 3 Q 1 0 3 0 ">
- <s:stroke>
- <s:LinearGradientStroke>
- <s:GradientEntry color="0x183348" alpha="1.0" />
- <s:GradientEntry color="0x183348" alpha="1.0" />
- <s:GradientEntry color="0x183348" alpha="1.0" />
- </s:LinearGradientStroke>
- </s:stroke>
- </s:Path>
- </s:Group>
- <!-- Label -->
- <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
- <s:Label id="labelDisplay"
- textAlign="start"
- verticalAlign="middle"
- maxDisplayedLines="1"
- left="18" right="0" top="3" bottom="3" verticalCenter="2" />
- </s:SparkSkin>
效果:
关键是dot的画法:
path的data属性:
- spark.primitives.Path.data(value:String):void
- 包含路径段的压缩表示的字符串。这是设置 segments 属性的一种替代方式。设置此属性会覆盖 segments array 属性中存储的任何值。
- 该值是用于描述每个路径段的以空格分隔的字符串。每个段条目都有一个表示段类型的字符和两个或更多段参数。
- 如果段命令是大写的,则这些参数是绝对值。如果段命令是小写的,则这些参数是相对值。
- 下表显示这些段的语法: 段类型 命令 参数 示例
- Move M/m x y M 10 20 - 将直线移到 10, 20。
- Line L/l x y L 50 30 - 直线到 50, 30。
- 水平线 H/h x H 40 = 水平线到 40。
- 垂直线 V/v y V 100 - 垂直线到 100。
- QuadraticBezier Q/q controlX controlY x y Q 110 45 90 30 - 曲线到 90, 30,控制点位于 110, 45。
- CubicBezier C/c control1X control1Y control2X control2Y x y C 45 50 20 30 10 20 - 曲线到 10, 20,第一个控制点位于 45, 50,而第二个控制点位于 20, 30。
- 闭合路径 Z/z 无 关闭路径。
- 语言版本:
- 3.0
- Player 版本:
- Flash 10, AIR 1.5
- 产品版本:
- Flex 4
利用M和Q呼出一个圆,然后用stroke填充他
data="M 1 0 Q 5 0 6 3 Q 5 5 3 6 Q 0 5 0 3 Q 1 0 3 0 "