Flex 自定义组件外观

核心提示： 清单 6. ProgrammaticSkin 的 updateDisplayList 实现代码 overrideprotectedfunctionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{varg:Gra

清单 6. ProgrammaticSkin 的 updateDisplayList 实现代码

override　protected　function　updateDisplayList(unscaledWidth:Number,　
unscaledHeight:Number):void　{　
　var　g:Graphics　=　this.graphics;　
　g.clear();　
　g.beginFill(0x000000,　0);　
　g.drawRect(0,　0,　unscaledWidth,　unscaledHeight);　
　g.endFill();　
　g.lineStyle(1,　0x000000,　0.1);　
　var　squareSize:Number　=　15;　
　var　numRows:Number　=　unscaledHeight　/　squareSize;　
　var　numCols:Number　=　unscaledWidth　/　squareSize;　
　for(var　row:Number　=　0;　row<　numRows;　row++)　{　
　g.moveTo(0,　row　*　squareSize);　
　g.lineTo(unscaledWidth,　row　*　squareSize);　
　}　
　for(var　col:Number　=　0;　col<　numCols;　col++)　{　
　g.moveTo(col　*　squareSize,　0);　
　g.lineTo(col　*　squareSize,　unscaledHeight);　
　}　
　}　

清单 6 中的 unscaledWidth 和 unscaledHeight 代表了 Canvas 画布实际的宽和高，画布内的 Graphics 对象默认的绘画原点是画布左上角（0,0）点。代码 drawRect(0, 0, unscaledWidth, unscaledHeight) 用于绘画整个画布的边框，lineStyle(1, 0x000000, 0.1) 设置将要画的线的样式，黑色、透明度 0.1、粗细 1，squareSize 定义网格的大小（网格为正方形）。通过 unscaledHeight / squareSize 和 unscaledWidth / squareSize 获得画布允许的行数和列数，moveTo 移动绘画原点，lineTo 表示从原点到目标点画线。For 循环代表每画一行（列），原点向下（右）移动 squareSize 的距离，再从原点平行画直线到画布右边缘（底边缘）。那么网格效果就出来了 . 效果如图 7 所示 .