Flex中的TextInput （2）：画出边框---Graphics

来源：互联网发布：淘宝转化率计算编辑：程序博客网时间：2024/05/18 12:05

让我们尝试从零构建Flex3中的TextInput控件。

用Graphics画出立体感：逐一测试draw3dBorder函数中的各个画图部分，可以知道TextInput控件边框是如何一步一步画出来的。

Test3DBorder.as

package {import flash.display.Graphics;import flash.display.Sprite;import mx.utils.ColorUtil;/** * 该例代码改编自FlexSDK中的TextInput控件 * 基本忠于SDK中的源代码 */public class Test3DBorder extends Sprite{//定义高度和宽度public var w:int;public var h:int;public function Test3DBorder(){w = 200;h = 20;drawBorder();}public function drawBorder():void{//定义边框颜色var borderColor:uint;var borderColorDrk1:uintvar borderColorDrk2:uintvar borderColorLt1:uintvar borderInnerColor:uint;//设定边框颜色borderColor = 0xb7babc;borderColorDrk1 =ColorUtil.adjustBrightness2(borderColor, -40);borderColorDrk2 =ColorUtil.adjustBrightness2(borderColor, +25);borderColorLt1 = ColorUtil.adjustBrightness2(borderColor, +40);borderInnerColor = 0xffffff;//画出3D边框效果draw3dBorder(borderColorDrk2, borderColorDrk1, borderColorLt1, Number(borderInnerColor),  Number(borderInnerColor),  Number(borderInnerColor));}public function draw3dBorder(c1:Number, c2:Number, c3:Number,  c4:Number, c5:Number, c6:Number):void{var g:Graphics = graphics;g.clear();// outside sidesg.beginFill(c1);g.drawRect(10, 10, w, h);g.drawRect(11, 10, w - 2, h);g.endFill();// outside topg.beginFill(c2);g.drawRect(11, 10, w - 2, 1);g.endFill();// outside bottomg.beginFill(c3);g.drawRect(11, 10 + h - 1, w - 2, 1);g.endFill();// inside topg.beginFill(c4);g.drawRect(11, 11, w - 2, 1);g.endFill();// inside bottomg.beginFill(c5);g.drawRect(11, 10 + h - 2, w - 2, 1);g.endFill();// inside sidesg.beginFill(c6);g.drawRect(11, 12, w - 2, h - 4);g.drawRect(12, 12, w - 4, h - 4);g.endFill();}}}

效果图：