flex标尺的实现

效果图：

 组件类：

package org.forever.report.view
{
	import flash.geom.Point;
	
	import mx.controls.Text;
	import mx.graphics.SolidColorStroke;
	
	import spark.components.BorderContainer;
	import spark.primitives.Line;
	
	public class Ruler extends BorderContainer
	{
		private var _horizontalTrunkLine:Line;
		private var _horizontalLength:Number = 3000;
		private var _verticalTrunkLine:Line;
		private var _verticalLength:Number = 3000;
		
		public function Ruler()
		{
			this.alpha = 0.5;
			this.setStyle("borderColor","red");
			this.width = 0;
			this.height = 0;
			_horizontalTrunkLine = new Line();
			_horizontalTrunkLine.stroke = new SolidColorStroke(0x000000);
			this.x = 0;
			this.y = 0;
			_horizontalTrunkLine.xFrom = 25;
			_horizontalTrunkLine.yFrom = 25;
			_horizontalTrunkLine.xTo = _horizontalTrunkLine.xFrom + _horizontalLength;
			_horizontalTrunkLine.yTo = _horizontalTrunkLine.yFrom;
			this.addElement(_horizontalTrunkLine);
			
			for(var i:Number=0;i<_horizontalLength/5;i++){
				var _line:Line = new Line();
				var _ySpacing:Number = 5;
				_line.stroke = new SolidColorStroke(0x000000);
				_line.xFrom = i * 5 + _horizontalTrunkLine.xFrom;
				_line.yFrom = _horizontalTrunkLine.yFrom;
				_line.xTo = _line.xFrom;
				if(i%10==0){
					_ySpacing = 20;	
					var _label:spark.components.Label = new spark.components.Label();
					_label.text = String(i * 5);
					_label.x = i * 5 + _horizontalTrunkLine.xFrom+1;
					_label.y = _horizontalTrunkLine.yFrom - _ySpacing;
					this.addElement(_label);
					
				}else if(i%5==0){
					_ySpacing = 10;
				}
				_line.yTo = _horizontalTrunkLine.yFrom - _ySpacing;
				this.addElement(_line);
			}
			
			_verticalTrunkLine = new Line();
			_verticalTrunkLine.stroke = new SolidColorStroke(0x000000);
			
			_verticalTrunkLine.xFrom = 25;
			_verticalTrunkLine.yFrom = 25;
			_verticalTrunkLine.xTo = _verticalTrunkLine.xFrom;
			_verticalTrunkLine.yTo = _verticalTrunkLine.yFrom + _verticalLength;
			this.addElement(_verticalTrunkLine);
			
			for(var j:Number = 0;j<_verticalLength/5;j++){
				var _xSpacing:Number = 5;
				var _lineV:Line = new Line();
				_lineV.stroke = new SolidColorStroke(0x000000);
				if(j%10==0){
					_xSpacing = 20;
					var _labelV:spark.components.Label = new spark.components.Label();
					_labelV.text = String(j * 5);
					_labelV.x = (_verticalTrunkLine.xFrom - _xSpacing)*3;
					_labelV.y = j * 5+1 + + _verticalTrunkLine.yFrom;
					_labelV.rotation = 90;
					this.addElement(_labelV);
				}else if(j%5==0){
					_xSpacing = 10;
				}
				_lineV.xFrom = _verticalTrunkLine.xFrom - _xSpacing;
				_lineV.yFrom = j * 5 + _verticalTrunkLine.yFrom;
				_lineV.xTo = 25
				_lineV.yTo = j * 5 + _verticalTrunkLine.yFrom;
				this.addElement(_lineV);
			}
			
		}
	}
}

 测试类：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:view="org.forever.report.view.*">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<view:Ruler x="0" y="0">
	</view:Ruler>
</s:Application>