Flex Label组件扩展边框与背景

来源：互联网发布：阿里云黑洞触发值编辑：程序博客网时间：2024/06/13 07:35

效果预览:

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

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

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

LabelBorder.as

package
{
import mx.controls.Label;
//自定义样式
[Style(name="borderColor", type="uint", format="Color", inherit="no")]
[Style(name="borderWidth", type="Number", format="Length", inherit="no")]
[Style(name = "borderAlpha", type = "Number", format = "Length", inherit = "no")]
public class LabelBorder extends Label
{
public function LabelBorder()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
graphics.clear();
graphics.lineStyle(getStyle('borderWidth'), getStyle('borderColor'), getStyle('borderAlpha'), false);
var x:Number = -(getStyle('borderWidth') / 2);
var y:Number = -(getStyle('borderWidth') / 2);
var width:Number = textWidth + getStyle('borderWidth') + 3;
var height:Number = textHeight + getStyle('borderWidth');
graphics.drawRect(x, y, width, height);
}
}
}

LabelImage.as

package
{
import mx.controls.Label;
import flash.display.Loader;
import flash.net.URLRequest;
//自定义背景属性
[Style(name="imgPath", type="String", inherit="no")]
public class LabelImage extends Label
{
private var _loader:Loader = new Loader();
public function LabelImage()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
_loader.load(new URLRequest(getStyle('imgPath')));
addChild(_loader);
_loader.x = -15;
setChildIndex(_loader, 0);
}
}
}

LabelBorderDemo.mxml

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

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