運行結果如圖：

源代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:Container xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="{ShowWidth}" height="{ShowHeight}"creationComplete="init()"><fx:Declarations><!-- 將非可視元素（例如服務、值對象）放在此處 --></fx:Declarations><fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";.ToolTip{font-size:12px;fontWeight:bold;}</fx:Style><fx:Script><![CDATA[ /** MarkNumbers，_ShowWord，_DisplayPlace，_ShowType。為必須賦值字段。ShowWidth，ShowHeight可選擇賦值*此控件分段視覺化顯示數據，*1.可按"三段"和"四段"兩種方式顯示*2.通過_ShowWord在每個顏色段上顯示說明，*3.通過_DisplayPlace設置標記顯示的位置，范圍為0-500；最好先計算好再輸入顯示；*4.存在提示顯示在數據的下層的問題；*5.控件的大小是固定的；*///-------------------------------------------------------------------------------------------[Bindable]public var ShowWidth:int = 500;//控件顯示寬度，用戶可以自定義[Bindable]public var ShowHeight:int = 20;//控件顯示高度，用戶可以自定義public var MarkNumbers : Array;//控件各個點的數值。四個或者五個，四個分三段顯示，5個分四段顯示//一下字段為自動計算private var ShowMarkNumbers:Array = new Array();//控件各段顯示的長度private var StartShowMarkNumbers:Array = new Array();//控件各段顯示的起始位置private var ShowPlace:int;//標記在控件上顯示的位置。計算為了像素//-------------------------------------------------------------------------------------------import mx.controls.Alert;import mx.controls.ToolTip;import mx.core.UIComponent;import mx.printing.FlexPrintJob;private var _sperite01:Sprite; private var _sperite02:Sprite;private var _sperite03:Sprite;private var _sperite04:Sprite;private var _sperite2:Sprite; private var txtTemp1 : TextField;private var txtTemp2 : TextField;private var txtTemp3 : TextField;private var txtTemp4 : TextField;private var fmt : TextFormat;private var tt:ToolTip = new ToolTip();private var _ShowType:Boolean = true;//true 三段顯示，false 四段顯示private var _DisplayPlace:Number;//標記顯示值private var _ShowWord:Array;//顯示在不同顏色段上的文字public function get ShowType():Boolean{return _ShowType;}public function set ShowType(value:Boolean):void{_ShowType = value;}public function get DisplayPlace():Number{return _DisplayPlace;}public function set DisplayPlace(value:Number):void{_DisplayPlace = value;} public function get ShowWord():Array{return _ShowWord;}public function set ShowWord(value:Array):void{_ShowWord = value;}private function init():void{ //-------------------------------對中間數據的處理var i:int;if(_ShowType)i = 4;elsei = 5;var long:Number = MarkNumbers[i-1] - MarkNumbers[0];for(var j:int = 1; j < i; j++){ShowMarkNumbers[j-1] =int(((MarkNumbers[j] - MarkNumbers[j-1]) / long) * ShowWidth);}Alert.show( ShowMarkNumbers[0],"");for(var n:int = 0; n < i-1; n++){if(n == 0)StartShowMarkNumbers[n] = 0; elseStartShowMarkNumbers[n] = StartShowMarkNumbers[n-1] + ShowMarkNumbers[n-1];}_DisplayPlace = ShowWidth * ( _DisplayPlace / long);//---------------------------------_sperite01 = new Sprite();//建立影片精靈 _sperite02 = new Sprite();_sperite03 = new Sprite();_sperite04 = new Sprite();_sperite2 = new Sprite();//建立影片精靈 txtTemp1 = new TextField();//建立輸出文字區域txtTemp2 = new TextField();txtTemp3 = new TextField();txtTemp4 = new TextField();var uicomponent:UIComponent = new UIComponent();uicomponent.addChild(_sperite01);uicomponent.addChild(_sperite02);uicomponent.addChild(_sperite03);uicomponent.addChild(_sperite04);uicomponent.addChild(_sperite2);uicomponent.addChild(txtTemp1);uicomponent.addChild(txtTemp2);uicomponent.addChild(txtTemp3);uicomponent.addChild(txtTemp4);this.addChild(uicomponent);doDraw();}private function doDraw():void{tt.text=_DisplayPlace.toString();tt.width = 80;tt.height = 40;tt.styleName = "ToolTip";tt.visible = false;//button1.addChild(tt);//消瘦_sperite01.graphics.beginFill(0xffffa0);_sperite01.graphics.drawRect(StartShowMarkNumbers[0], 0, int(ShowMarkNumbers[0]), ShowHeight);_sperite01.graphics.endFill();txtTemp1.autoSize = "left";txtTemp1.text = _ShowWord[0];fmt = new TextFormat();fmt.size = 14;txtTemp1.setTextFormat(fmt);txtTemp1.x = StartShowMarkNumbers[0] + (int(ShowMarkNumbers[0]) - txtTemp1.width) /2;txtTemp1.y = _sperite01.y + (_sperite01.height - txtTemp1.height) / 2;//正常范圍_sperite02.graphics.beginFill(0x98ff98);_sperite02.graphics.drawRect(StartShowMarkNumbers[1], 0, ShowMarkNumbers[1], ShowHeight);_sperite02.graphics.endFill();txtTemp2.autoSize = "left";txtTemp2.text = _ShowWord[1];fmt = new TextFormat();fmt.size = 14;txtTemp2.setTextFormat(fmt);txtTemp2.x = StartShowMarkNumbers[1] + (_sperite02.width - txtTemp2.width) /2;txtTemp2.y = _sperite02.y + (_sperite02.height - txtTemp2.height) / 2;//超重_sperite03.graphics.beginFill(0xff8080);_sperite03.graphics.drawRect(StartShowMarkNumbers[2], 0, ShowMarkNumbers[2], ShowHeight);_sperite03.graphics.endFill();txtTemp3.autoSize = "left";txtTemp3.text = _ShowWord[2];fmt = new TextFormat();fmt.size = 14;txtTemp3.setTextFormat(fmt);txtTemp3.x = StartShowMarkNumbers[2] + (_sperite03.width - txtTemp3.width) /2;txtTemp3.y = _sperite03.y + (_sperite03.height - txtTemp3.height) / 2;if(!_ShowType){//肥胖_sperite04.graphics.beginFill(0xff2020);_sperite04.graphics.drawRect(StartShowMarkNumbers[3], 0, ShowMarkNumbers[3], ShowHeight);_sperite04.graphics.endFill();txtTemp4.autoSize = "left";txtTemp4.text = _ShowWord[3];fmt = new TextFormat();fmt.size = 14;txtTemp4.setTextFormat(fmt);txtTemp4.x = StartShowMarkNumbers[3] + (_sperite04.width - txtTemp4.width) /2;txtTemp4.y = _sperite03.y + (_sperite04.height - txtTemp4.height) / 2;}//顯示標記_sperite2.graphics.beginFill(0x0000ff);_sperite2.graphics.drawRect(_DisplayPlace, 0, 5, ShowHeight);_sperite2.graphics.endFill();_sperite2.addChild(tt); _sperite2.addEventListener(MouseEvent.MOUSE_OVER,showTip);_sperite2.addEventListener(MouseEvent.MOUSE_OUT,hideTip);}//顯示提示區域private function showTip(event:MouseEvent):void{tt.visible = true;tt.x = event.localX;tt.y = event.localY;//tt.styleName = "ToolTip";this.graphics.beginFill(0x6699FF,1);this.graphics.endFill();}//隱藏提示區域private function hideTip(event:MouseEvent):void{tt.visible = false;}private function doClean():void{_sperite2.graphics.clear();}]]></fx:Script><mx:Button id="button1" click="doClean()"/></mx:Container>

轉載于:https://www.cnblogs.com/wyqx/archive/2011/07/19/2110838.html

總結

以上是生活随笔為你收集整理的flex自定义的分区域状态显示控件——原创的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。