flex中image控件如何添加边框

最新推荐文章于 2025-06-21 22:42:54 发布

最新推荐文章于 2025-06-21 22:42:54 发布 · 302 阅读

文章标签：

#Flex #Adobe #Google #XML

flex 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在Flex中为Image组件添加可定制边框的方法。通过继承默认的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);		
		}
	}
}

ok，看疗效：