flex 网格 组件

import mx.containers.Canvas;

    /**
    * 带网格的canvas
    * 
    * @coder 衣旧 
    * 
    * @date 2011-10-13
    */ 
	public class GridCanvas extends Canvas
	{
		public function GridCanvas()
		{
			super();
		}
		override protected function updateDisplayList(w:Number, h:Number):void
        {
        	super.updateDisplayList(w,h);
        	fillGrid();
        }
        
        override protected function createChildren():void{
        	super.createChildren();
        }
       
		//网格线颜色 
		public var lineColor:uint = 0xCDC9C9;   
		//网格背景色       
		public var gridFillColor:uint = 0xFFFAF0;   
		//网格线粗细       
		public var lineThickness:Number = 1;   
		//网格大小 
		public var gridItemSize:Number = 20;   
		
	 	public function fillGrid():void       
		{      
			this.graphics.clear();        
			//填充背景色        
			this.graphics.beginFill(gridFillColor,1);   
			this.graphics.drawRect(0,0,this.width,this.height);   
			this.graphics.endFill();        
			this.graphics.lineStyle(lineThickness,lineColor,1);  
			var totalWidth:Number = 0;        
			this.drawHorizontalLine(gridItemSize,totalWidth);
			this.drawVerticalLine(gridItemSize,totalWidth);
		}      
	 	/**
		 * 画横线   
		 */     
		public function drawHorizontalLine(size:Number,totalSize:Number):void
		{      
			for(var i:int;totalSize+size<this.height;i++){
				this.graphics.moveTo(0,size*i);
				this.graphics.lineTo(this.width,size*i);
				totalSize = size*i;
			}
		}     
		/**
		 * 画竖线 
		 */     
		public function drawVerticalLine(size:Number,totalSize:Number):void{
			for(var i:int;totalSize+size<this.width;i++){
				this.graphics.moveTo(size*i,0);
				this.graphics.lineTo(size*i,this.height);
				totalSize = size*i;
			}
		}
	}

效果如下：

  参考:http://real-junlin.iteye.com/blog/812001