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);		
		}
	}
}

 

 ok，看疗效： 

 

评论

11 楼 愚人陈 2014-03-15  

redsoft 写道

愚人陈 写道

redsoft 写道

边框是加上了。但却是圆角的，drawRect应该只是画个矩形而已，我找了一下也没找到圆角是在哪里出现的。请教楼主？

JointStyle 设置拐角类型, 和 gdi 类似.

graphics.lineStyle(getStyle('borderWidth'),getStyle('borderColor'),getStyle('borderAlpha'),false,"normal",null, flash.display.JointStyle.MITER);

哥，5年前的问题，我都要哭了，谢谢啊！

I noticed~

 

10 楼 redsoft 2014-02-28  

愚人陈 写道

redsoft 写道

边框是加上了。但却是圆角的，drawRect应该只是画个矩形而已，我找了一下也没找到圆角是在哪里出现的。请教楼主？

JointStyle 设置拐角类型, 和 gdi 类似.

graphics.lineStyle(getStyle('borderWidth'),getStyle('borderColor'),getStyle('borderAlpha'),false,"normal",null, flash.display.JointStyle.MITER);

哥，5年前的问题，我都要哭了，谢谢啊！

9 楼 愚人陈 2014-01-02  

redsoft 写道

边框是加上了。但却是圆角的，drawRect应该只是画个矩形而已，我找了一下也没找到圆角是在哪里出现的。请教楼主？

JointStyle 设置拐角类型, 和 gdi 类似.

graphics.lineStyle(getStyle('borderWidth'),getStyle('borderColor'),getStyle('borderAlpha'),false,"normal",null, flash.display.JointStyle.MITER);

8 楼 yfhy123 2011-01-05  

非常有用，楼主给力

7 楼 ganky 2010-09-28  

原来还真要重写控件……原控件居然没有边框设置，太不人道了

6 楼 redsoft 2009-06-10  

谢谢楼主，我还不知道javaeye上发帖这么费事。现在依照楼主的代码，边框是加上了。但却是圆角的，drawRect应该只是画个矩形而已，我找了一下也没找到圆角是在哪里出现的。请教楼主？

5 楼 forthelichking 2009-02-23  

有bug
当我把image放到tile控件的时候，宽度和高度都变得非常大。。。。
后来调试才发现，var width:Number=this.width + getStyle('borderWidth'); 这个getStyle('borderWidth')虽然是3，但是经过这么一次运算变成字符串相加了，如果this.width的宽度是48，那就变成483.。。。。

解决方法是把getStyle('borderWidth')转换成Number类型，再相加

4 楼 marshan 2009-02-13  

我记得contentWidth contentHeight 是父类的属性。你继承Image了么？

3 楼 zenggang2008 2009-02-11  

感谢仁兄提供好思路
不过我试了下出了点小问题,结果将

  var width:Number=contentWidth+getStyle('borderWidth');  
 var height:Number=contentHeight+getStyle('borderWidth');  

改为

  var width:Number=this.width + etStyle('borderWidth');  
 var height:Number=this.height + getStyle('borderWidth');  

就ok了

2 楼 marshan 2009-01-19  

you are welcome, it's my pleasure!

1 楼 tianhai110 2009-01-19  

不错,  我正在找这个,   楼主的代码我借用了