Flex实现仪表盘控件

最近，应公司项目要求，研发一套图谱控件。涵盖折线图、棒图、饼图、仪表盘等多种类型图谱。现将仪表控件实现方式与大家分享，本文中不足之处欢迎大家指出，互相学习、共同进步

先来看一下最终效果：

仪表控件结构上可以分为容器、表盘、指针、标注标签四部组成，之所以这么分是因为我希望表盘、标注、标注标签能够单独的变化，这样就可以通过开发不同样式的表盘、指针、标注标签等，让它们自由组合，实现仪表控件的灵活配置。

源码下载

这里的容器指的就是我们的仪表组件名称，其实现代码如下：

protected override function createChildren():void
		{
			super.createChildren();
			
			// 创建表盘
			this._meterBoard = MeterBoardBase.newInstance();
			this.addChild(this._meterBoard);
			
			// 创建刻度
			this._scaleLabels = ScaleLabelsBase.newInstance();
			this._scaleLabels.minValue = this._minValue;
			this._scaleLabels.maxValue = this._maxValue;
			this.addChild(this._scaleLabels);
			
			// 创建指针
			this._indicator = IndicatorBase.newInstance();
			this.addChild(this._indicator);
			
			// 初始化动画器
			this._animate = new Animate();
			this._animate.duration = 1000;
			this._animate.addEventListener(EffectEvent.EFFECT_UPDATE, this.onIndicatorUpdate);
		}
		
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			if (null != this._meterBoard)
			{
				this._meterBoard.setActualSize(unscaledWidth, unscaledHeight);
				this._meterBoard.x = this._meterBoard.y = 0;
			}
			
			if (null != this._indicator)
			{
				this._indicator.setActualSize(unscaledWidth, unscaledHeight);
				this._indicator.x = this._indicator.y = 0;
			}
			
			if (null != this._scaleLabels)
			{
				this._scaleLabels.setActualSize(unscaledWidth, unscaledHeight);
				this._scaleLabels.x = this._scaleLabels.y = 0;
			}
		}

其中我们使用_animate实现仪表盘指针转动的动画效果，确保无论指针的值的跳变量为多少，指针均能在正确的时间旋转到正确的刻度，这里我们设置的是1000毫秒。

接着来我们实现表盘的绘制，这里我们的表盘采用的半圆的形式，指针的旋转角度为0-180度。具体实现代码如下：

protected override function draw(unscaledWidth:Number, unscaledHeight:Number):void
		{
			this.graphics.clear();
			
			var radius:Number = this.getRadius(unscaledWidth, unscaledHeight);
			var ptCenter:Point = this.getCenterPoint(unscaledWidth, unscaledHeight);
			
			// 绘制表盘边框
			GeomUtil.drawSector(this.graphics, 0xf7f7f7, ptCenter.x, ptCenter.y, 0, radius * 0.8, -182, 1);
			GeomUtil.drawSector(this.graphics, 0x000000, ptCenter.x, ptCenter.y, radius * 0.78, radius * 0.8, -182, 1);
			GeomUtil.drawSector(this.graphics, 0x808080, ptCenter.x, ptCenter.y, radius * 0.76, radius * 0.78, -182, 1);
			
			// 绘制表盘样式
			var boardStyles:Array = DataParseUtil.parseMeterBoardData(this._boardDatas);
			if (DataObjectUtil.arrayValid(boardStyles))
			{
				for each (var pieData:PieData in boardStyles)
				{
					GeomUtil.drawSector(this.graphics, pieData.color, ptCenter.x, ptCenter.y, radius * 0.6, radius * 0.7, pieData.angle, pieData.start);
				}
			}
		}

GeomUtil是我定义的一个几乎工具类，用于实现几何图形的画法。GeomUtil中的drawSector方法用于绘制扇形，drawSector(graphics:Graphics, color:uint, x:Number, y:Number, r:Number, R:Number, angle:Number, startA:Number)，参数graphics为绘图对象，color表示扇形区域的颜色，x,y为扇形所在圆的圆心坐标，r为扇形内径，R为扇形外径，angle表示扇形跨越的角度，startA是扇形的起始角度。

接着我们实现指针类，其绘制方法如下：

protected override function draw(unscaledWidth:Number, unscaledHeight:Number):void
		{
			this.graphics.clear();
			
			// 计算指针轴半径及中心点
			var radius:Number = unscaledHeight / 12;
			var ptCenter:Point = new Point(unscaledWidth / 2, unscaledHeight * 9 / 10);
			
			// 绘制指针
			var matrix:Matrix = new Matrix();
			
			// 获得指针的三个顶点坐标
			var ptEnd1:Point = Point.polar(radius, GeomUtil.convertToRadians(180 - this._degree - 30));
			var ptEnd2:Point = Point.polar(radius, GeomUtil.convertToRadians(180 - this._degree + 30));
			var ptEnd3:Point = Point.polar(radius + Math.min(ptCenter.x, ptCenter.y) * 0.68, GeomUtil.convertToRadians(180 - this._degree));
			ptEnd1.y = 0 - ptEnd1.y;
			ptEnd2.y = 0 - ptEnd2.y;
			ptEnd3.y = 0 - ptEnd3.y;
			ptEnd1.offset(ptCenter.x, ptCenter.y);
			ptEnd2.offset(ptCenter.x, ptCenter.y);
			ptEnd3.offset(ptCenter.x, ptCenter.y);
			
			// 绘制指针
			this.graphics.lineStyle(1, 0x0698c8, 0.9);
			this.graphics.beginFill(0x0698c8, 0.7);
			this.graphics.moveTo(ptEnd1.x, ptEnd1.y);
			this.graphics.lineTo(ptEnd3.x, ptEnd3.y);
			this.graphics.lineTo(ptEnd2.x, ptEnd2.y);
			this.graphics.lineTo(ptEnd1.x, ptEnd1.y);
			this.graphics.endFill();
			
			var degree:Number = 180 - this._degree;
			var offsetHor:Number = Math.cos(GeomUtil.convertToRadians(degree)) * radius / 5;
			var offsetVer:Number = Math.sin(GeomUtil.convertToRadians(degree)) * radius / 5;
			
			// 绘制指针轴
			matrix = new Matrix();
			matrix.createGradientBox(radius * 2, radius * 2, 0, offsetHor, 0 - offsetVer);
			matrix.translate(ptCenter.x - radius, ptCenter.y - radius);
			this.graphics.lineStyle(1, 0x585858, 0.8);
			this.graphics.beginGradientFill(GradientType.RADIAL, [0xfbfbfb, 0x7b7b7b], [1, 1], [0x00, 0xFF], matrix);
			this.graphics.drawCircle(ptCenter.x, ptCenter.y, radius);
			this.graphics.endFill();
		}

好了，我们的仪表控件关于绘制方面的内容就介绍完了。标注标签的实现等就不再一一给出代码了，稍后会给出整个控件的源代码，有兴趣的朋友下载后自己看吧。