Flex Label组件扩展边框与背景

效果预览:

由于Label控件没有borderStyle属性,也就是它不支持边框与背景图.所以我们可以通过扩展Label控件来实现边框与背景图!其他不支持边框或者背景的控件如:Text、Image用同样方法可以扩展它。下面运用到自定义Flex控件的[Style]元素标签。

下表描述了[Style]元数据标签的属性：

选项	类型	描述
name	String	(必须) 指定样式名称。
type	String	指定样式属性值的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用packageName.className。
arrayType	String	如果type是Array，那么arrayType指定Array元素的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用 packageName.className。
format	String	指定属性单元。比如，如果你指定类型为”Number”，你可能指定format=”Length”表示该样式定义像素长度。或者，你指定type=”uint”，设置format=”Color”，表示该样式定义一个RGB颜色。
enumeration	String	指定该样式属性可能的枚举列表值。
inherit	String	指定该属性是否为继承的。有效的值为yes和no。该属性引用CSS继承结构，而非面向对象的继承结构。所有的子类都自动用面向对象的继承从超类继承定义的样式属性。一些样式属性以CSS继承的方式继承样式属性。如果你在父容器上定义了一个可继承的样式属性，它的孩子都会继承该样式属性。比如，如果你把一个Panel容器的fontFamily定义成Times，该容器的所有孩子都会使用Times作为fontFamily，除非它们覆盖了这个属性。如果设置了非可继承的样式，比如在父容器上设置textDecoration，那么只有这个父容器而非它的孩子使用这个样式。更多关于可继承的样式属性的信息，请阅读 关于样式继承。
states	String	对于皮肤属性，你可以使用这个样式指定组件多种状态中的一种状态。例如，Slider.thumbSkin样式的定义使用下面的[Style]元数据标签：[Style(name="thumbSkin", type="Class", inherit="no", states="disabled, down, over, up")] 这一行说明你可以使用Slider.thumbSkin样式指定Slider控件的disable, down, over, 和 up 的状态。更多信息，请阅读 创建皮肤.

LabelBorder.as

1. package 
2. {
3.     import mx.controls.Label;
4.     //自定义样式
5.     [Style(name="borderColor", type="uint", format="Color", inherit="no")]  
6.     [Style(name="borderWidth", type="Number", format="Length", inherit="no")]  
7.     [Style(name = "borderAlpha", type = "Number", format = "Length", inherit = "no")] 
8.    
9.     public class LabelBorder extends Label
10.     {
11.         public function LabelBorder()
12.         {
13.             super();
14.         }
15.        
16.         override protected function updateDisplayList(w:Number, h:Number):void
17.         {
18.             super.updateDisplayList(w, h);
19.             graphics.clear();
20.             graphics.lineStyle(getStyle('borderWidth'), getStyle('borderColor'), getStyle('borderAlpha'), false);
21.             var x:Number = -(getStyle('borderWidth') / 2);
22.             var y:Number = -(getStyle('borderWidth') / 2);
23.             var width:Number = textWidth + getStyle('borderWidth') + 3;
24.             var height:Number = textHeight + getStyle('borderWidth');
25.             graphics.drawRect(x, y, width, height);
26.         }
27.     }
28. }

LabelImage.as

1. package 
2. {
3.     import mx.controls.Label; 
4.     import flash.display.Loader;
5.     import flash.net.URLRequest;
6.     //自定义背景属性
7.     [Style(name="imgPath", type="String", inherit="no")]  
8.    
9.     public class LabelImage extends Label
10.     {
11.         private var _loader:Loader = new Loader();
12.        
13.         public function LabelImage()
14.         {
15.             super();
16.         }
17.        
18.         override protected function updateDisplayList(w:Number, h:Number):void
19.         {
20.             super.updateDisplayList(w, h);
21.             _loader.load(new URLRequest(getStyle('imgPath')));
22.             addChild(_loader);
23.             _loader.x = -15;
24.             setChildIndex(_loader, 0);
25.         }
26.     }
27. }

LabelBorderDemo.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:jian="*" layout="absolute">
3.     <jian:LabelBorder 
4.         x="180" y="62"
5.         text="这里是扩展的自定义标签"
6.         borderAlpha="{aBar.value}"   
7.         borderWidth="{wBar.value}"   
8.         borderColor="{colorTool.selectedColor}" />
9. <jian:LabelImage text="这里是自定义背景标签" imgPath="mood.gif" x="180" y="100" />
10.           
11.     <mx:Label x="500" y="10" text="边框颜色:" />  
12.     <mx:Label x="500" y="50" text="边框透明度:" />  
13.     <mx:Label x="500" y="100" text="边框宽度:" />  
14.       
15.     <mx:ColorPicker id="colorTool" x="570" y="10" color="#FDFDFD" />  
16.     <mx:HSlider id="aBar" x="500" y="70" minimum="0" maximum="1" value="1" snapInterval="0.1" liveDragging="true"/>  
17.     <mx:HSlider id="wBar" x="500" y="120" minimum="0" maximum="6" snapInterval="1" value="1" liveDragging="true"/> 
18. </mx:Application>

转载自：http://www.gnria.com/flex/flex-label-border.html