package { import mx.core.UIComponent; public class DashBorder extends UIComponent{ private var dashlen:Number = 5; private var gaplen:Number = 5; public function DashBorder(){ super(); } override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void{ super.updateDisplayList(unscaledWidth, unscaledHeight); var borderThickness:int = getStyle("borderThickness"); var borderColor:int = getStyle("borderColor"); var backgroundColor:int = getStyle("backgroundColor"); var backgroundAlpha:Number = getStyle("backgroundAlpha"); graphics.clear(); graphics.beginFill(backgroundColor, backgroundAlpha); graphics.drawRect(0, 0, unscaledWidth, unscaledHeight); graphics.lineStyle(borderThickness, borderColor, 1) if (getStyle("dashlen")) { this.dashlen = getStyle("dashlen"); } if (getStyle("gaplen")) { this.gaplen = getStyle("gaplen"); } drawBorder(this.x, this.y, unscaledWidth, unscaledHeight, this.dashlen, this.gaplen); } public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number, dashlen:Number, gaplen:Number): void { if((x1 != x2) || (y1 != y2)){ var incrlen:Number = dashlen + gaplen; var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); var angle:Number = Math.atan((y2 - y1) / (x2 - x1)); var steps:uint = len / (dashlen + gaplen); var dashstepx:Number = dashlen * Math.cos(angle); if (x2 < x1) dashstepx *= -1; var dashstepy:Number = dashlen * Math.sin(angle); var gapstepx:Number = gaplen * Math.cos(angle); if (x2 < x1) gapstepx *= -1; var gapstepy:Number = gaplen * Math.sin(angle); var stepcount:uint = 0; while ((stepcount++) < steps) { var dashstartx:Number; var dashstarty:Number; var dashendx:Number; var dashendy:Number; if(x1 == x2 && y1 != y2){ dashstartx = dashendx = x1; if(y2 > y1){ dashstarty = y1 + ((stepcount-1) * (dashlen + gaplen)); dashendy = dashstarty + dashlen; }else{ dashstarty = y1 - ((stepcount-1) * (dashlen + gaplen)); dashendy = dashstarty - dashlen; } }else if(y1 == y2 && x1 != x2){ dashstarty = dashendy = y1; if(x2 > x1){ dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen)); dashendx = dashstartx + dashlen; }else{ dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen)); dashendx = dashstartx - dashlen; } } graphics.moveTo(dashstartx, dashstarty); graphics.lineTo(dashendx, dashendy); } } } private function drawBorder(x1:Number, y1:Number, width:Number, height:Number, dashlen:Number, gaplen:Number) : void { var borderSides:String = getStyle("borderSides"); if (borderSides != "left top right bottom") { // Adjust metrics based on which sides we have if (borderSides.indexOf("left") != -1){ drawLine(x1, y1 + height, x1, y1, dashlen, gaplen); } if (borderSides.indexOf("top") != -1){ drawLine(x1, y1, x1 + width, y1, dashlen, gaplen); } if (borderSides.indexOf("right") != -1){ drawLine(x1 + width, y1, x1 + width, y1 + height, dashlen, gaplen); } if (borderSides.indexOf("bottom") != -1){ drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen); } } } } }
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20" backgroundGradientColors="0xFFFFFF, 0xFFFFFF" backgroundColor="0xFFFFFF" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ [Bindable] private var numValid:uint = 0; private function applyStyles():void{ nv.validate(dash.text); nv.validate(gap.text); nv.validate(thickness.text); if(numValid == 3){ var myBorderStyle:CSSStyleDeclaration = new CSSStyleDeclaration('myBorderStyle'); myBorderStyle.setStyle('dashlen', Number(dash.text)); myBorderStyle.setStyle('gaplen', Number(gap.text)); myBorderStyle.setStyle('borderThickness', Number(thickness.text)); StyleManager.setStyleDeclaration("DashBorder", myBorderStyle, true); } numValid = 0; } ]]> </mx:Script> <mx:NumberValidator id="nv" allowNegative="false" domain="real" valid="numValid++;" invalid="mx.controls.Alert.show('ERROR: dash length, gap length, and border thickness must be (positive) numbers.');"/> <mx:Form label="Choose Dashed Border Properties"> <mx:FormItem label="Dash Length"> <mx:TextInput id="dash" width="100" text="5"/> </mx:FormItem> <mx:FormItem label="Gap Length"> <mx:TextInput id="gap" width="100" text="5"/> </mx:FormItem> <mx:FormItem label="Border Thickness"> <mx:TextInput id="thickness" width="100" text="1"/> </mx:FormItem> <mx:FormItem> <mx:Button id="apply" label="Apply Styles" click="applyStyles()"/> </mx:FormItem> </mx:Form> <mx:VBox id="vb" borderSkin="DashBorder" width="250" height="20" borderColor="0xFF0000" backgroundColor="0xFFFFFF" borderSides="bottom" horizontalAlign="center" verticalAlign="middle"> </mx:VBox> <mx:VBox borderStyle="solid" borderSides="bottom" width="250" height="20"/> </mx:Application>
0票
开心
0票
板砖
0票
感动
0票
有用
0票
疑问
0票
难过
0票
无聊
0票
震惊
顶
踩