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>
