flex自定义的分区域状态显示控件——原创

运行结果如图：

源代码：

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

				else

					i = 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;	

					else

						StartShowMarkNumbers[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>