flex的image

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

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

共享如下：

页面代码：

Flex代码

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

<?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>

控件代码如下：

Flex代码

1. package mars.display
2. {
3. import mx.controls.Image;
4. //边框颜色
5. [Style(name="borderColor", type="uint", format="Color", inherit="no")]
6. //边框宽度
7. [Style(name="borderWidth", type="Number", format="Length", inherit="no")]
8. //边框透明度
9. [Style(name="borderAlpha", type="Number", format="Length", inherit="no")]
11. public class BorderImage extends Image
12. {
13. public function BorderImage()
14. {
15. super();
16. }
18. override protected function updateDisplayList(w:Number, h:Number):void{
19. super.updateDisplayList(w,h);
20. graphics.clear();
22. graphics.lineStyle(getStyle('borderWidth'),getStyle('borderColor'),getStyle('borderAlpha'),false);
24. var x:Number=-(getStyle('borderWidth')/2);
25. var y:Number=-(getStyle('borderWidth')/2);
26. var width:Number=contentWidth+getStyle('borderWidth');
27. var height:Number=contentHeight+getStyle('borderWidth');
28. graphics.drawRect(x,y,width,height);
29. }
30. }
31. }

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，看疗效：

 

 

转自：http://marshan.iteye.com/blog/260606