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,看疗效: