flex中image控件如何添加边框

flex的image控件没有border属性。这困扰了我很久。毕竟，做特效后，图片如果光秃秃的，很难看。

 

google了半天，大家的说法中，我倾向于改写Image控件。找到一个东东，我修改并新增了代码。

共享如下：

 

页面代码：

<?xml version="1.0"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:marsImage="mars.display.*" 
    backgroundColor="#000000"
    layout="absolute">
    
    <marsImage:BorderImage 
        borderAlpha="{aBar.value}" 
        borderWidth="{wBar.value}" 
        borderColor="{colorTool.selectedColor}" 
        source="@Embed('../img/panda.jpg')" 
        width="258" height="229" x="180" y="62"/>
        
    <mx:Label x="180" y="327" text="请选择边框颜色" color="#FDFDFD" fontSize="16"/>
    <mx:Label x="180" y="391" text="请选择边框宽度" color="#FDFDFD" fontSize="16"/>
    <mx:Label x="377" y="391" text="请选择边框透明度" color="#FDFDFD" fontSize="16"/>
    
    <mx:ColorPicker x="305" y="327" color="#FDFDFD" id="colorTool"/>
    <mx:VSlider x="525" y="255" minimum="0" maximum="1" id="aBar" />
    <mx:HSlider x="180" y="423" minimum="0" maximum="6" id="wBar"/>
        
</mx:Application>

控件代码如下：

 

 

package mars.display
{
    import mx.controls.Image;
    //边框颜色
    [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 BorderImage extends Image
    {
        public function BorderImage()
        {
            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=contentWidth+getStyle('borderWidth');
            var height:Number=contentHeight+getStyle('borderWidth');
            graphics.drawRect(x,y,width,height);        
        }
    }
}