flex学习笔记 皮肤（四） radiobutton皮肤

代码：

 
 

<?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 "