flex 圆形按钮皮肤的制作

要做一个圆形按钮，在flex4里最直接的方法就是为button写一个皮肤。先看下样子：



下面是皮肤的代码：

<?xml version="1.0" encoding="utf-8"?>

<!--
   round button
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
		
		
        ]]>
    </fx:Metadata>
	<fx:Script>
		<![CDATA[
						
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
			{
				bg.width = bg.height = Math.max(unscaledWidth, unscaledHeight) - 2;
				
				var cc:Number = Number(getStyle("chromeColor"));
				if(isNaN(cc))
				{
					cc = 0xff0000;
				}
				
				bgFill.color = borderStroke.color = cc;
				
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
			
		]]>
	</fx:Script>
	
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
	<!--背景-->
    <s:Ellipse id="bg" width="100%" height="100%" left="1" right="1" top="1" bottom="1">
		<s:fill>
			<s:SolidColor id="bgFill" color="0xffffff" alpha=".6" alpha.over=".8" alpha.down="1"/>
		</s:fill>
	</s:Ellipse>

	<!--边框-->
    <s:Ellipse id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke id="borderStroke" color="0" />
        </s:stroke>
    </s:Ellipse>
    
	<!--文本-->
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="5" right="5" top="2" bottom="2">
    </s:Label>
    
</s:SparkButtonSkin>

使用方式：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:VGroup>
		<s:TextInput id="ti"/>
		<mx:ColorPicker id="cp"/>
		<s:Button skinClass="skins.RoundButtonSkin" label="{ti.text}" chromeColor="{cp.selectedColor}"/>
	</s:VGroup>
</s:Application>

s:SparkButtonSkin是sdk4.5+才有的，之前的请改成s:SparkSkin

评论

2 楼 pr0608 2015-01-13  

在你的皮肤上改了一下，变成透明无边框的皮肤了！
终于搞定了 button 去掉边框的问题。
thanks!

<!--图片样式-->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
<s:fill>
<s:BitmapFill source.up="@Embed('com/actec/gis/assets/image/map/圈选2.png')"
  source.down="@Embed('com/actec/gis/assets/image/map/圈选3.png')"
  source.over="@Embed('com/actec/gis/assets/image/map/圈选1.png')" />
</s:fill>
</s:Rect>
<!--背景-->
<s:Ellipse id="bg" width="100%" height="100%" left="0" right="0" top="0" bottom="0"> 
<s:fill> 
<s:SolidColor id="bgFill" color="0" alpha="0" alpha.over="0" alpha.down="0"/> 
</s:fill> 
</s:Ellipse>   

<!--边框--> 
<s:Ellipse id="border" left="0" right="0" top="0" bottom="0"> 
<s:stroke> 
<s:SolidColorStroke id="borderStroke" color="0" alpha="0" alpha.over="0" alpha.down="0"/> 
</s:stroke> 
</s:Ellipse> 

1 楼 穷困潦倒赊账度日 2012-12-21  

抢个沙发