flex 4 写皮肤

时间:2023-03-08 22:09:35
flex 4 写皮肤

皮肤容器:s:SparkSkin

主机组件:  [HostComponent("spark.components.Panel")]

绘制

 <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
includeIn="normalWithControlBar, disabledWithControlBar">
<!--- @private -->
<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
</s:fill>
</s:Rect>
 <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xEAEAEA" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
<s:Ellipse id="vborder2" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:RadialGradient>
<s:GradientEntry alpha="1" color="{getStyle('contentBackgroundColor')}"/>
<s:GradientEntry alpha="1" color="#FFFFFF" ratio="0.9"/>
<s:GradientEntry alpha="1" color="0x1B8BD1"/>
</s:RadialGradient>
</s:fill>
</s:Ellipse>

Group是容器,Rect  是绘制矩形填充的图形元素

mx.graphics下的组件:

SolidColor是填充单一颜色,SolidColorStroke是单一颜色的线条

LinearGradient:是渐变的颜色填充,LinearGradientStroke:是渐变的线条

 ellipse:是绘制椭圆,RadialGradient:径向渐变。