flex 自定义表单网格线工具类

package 
{
	import com.adobe.utils.ArrayUtil;
	
	import flash.display.Graphics;
	
	import mx.core.UIComponent;

	public class FillGridUtil
	{
		private static var graphics:Graphics;
		private static var width:Number;
		private static var height:Number;
		
		/**
		 * 将画图区域用网格填充,drawCenter为UIComponet的子类
		 */ 
		public static function initLine(drawCenter:UIComponent):void
		{
			graphics = drawCenter.graphics;
			width = drawCenter.width;
			height = drawCenter.height;
			//清除由drawCenter的画布graphi所产生过的图像
			graphics.clear();
			//填充背景
//			drawCenter.graphics.beginFill(0xf2fefe);
			/*drawCenter.graphics.beginFill(0x959595);*/
			graphics.drawRect(0, 0, width, height);//画一个矩形
			graphics.endFill();
			
			//画横线
			drawHorizontalLine(8,0xeaeaea);
			drawHorizontalLine(16,0xb7babc);
			drawVerticalLine(8,0xeaeaea);
			drawVerticalLine(16,0xb7babc);
		}
		
		private static function drawHorizontalLine(spacing:Number,colorNum:uint):void{
			var i : int = 0;
			var totalLength: Number = 0;
			while(totalLength <= height){
				graphics.lineStyle(1, colorNum,0.5);
				graphics.moveTo(0, spacing * i);
				graphics.lineTo(width, spacing * i);
				i++;
				totalLength = spacing * i;
			}
		}
		
		private static function drawVerticalLine(spacing:Number,colorNum:uint):void{
			var i : int = 0;
			var totalLength: Number = 0;
			while(totalLength <= width){
				graphics.lineStyle(1, colorNum,0.5);
				graphics.moveTo(spacing * i, 0);
				graphics.lineTo(spacing * i, height );
				i++;
				totalLength = spacing * i;
			}
		}
		
		public static function returnNearNum(x:Number):Number{
			return Math.floor(x/8)*8;
		}
		
	}
}

最后效果如下图:

 

 

调用示例:

 

<mx:Canvas id="myCanvas" width="100%" height="100%" label="设计"
						   						   resize="FillGridUtil.initLine(myCanvas);">

 
 对齐到网格方法可多选组件 返回最近的交点坐标.设置其x,y即可

 

protected function myCanvas_resizeHandler(event:ResizeEvent):void
			{
				FillGridUtil.initLine(myCanvas);
			}