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

最新推荐文章于 2023-07-10 06:00:00 发布

tiangej

最新推荐文章于 2023-07-10 06:00:00 发布

阅读量2.3k

点赞数

分类专栏： Flex组件文章标签： flex function c import class 测试

本文链接：https://blog.csdn.net/tiangej/article/details/7561324

版权

Flex组件专栏收录该内容

10 篇文章 0 订阅

订阅专栏

让我们尝试从零构建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:uint
			var borderColorDrk2:uint
			var borderColorLt1:uint	
			var 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 sides
			g.beginFill(c1);
			g.drawRect(10, 10, w, h);
			g.drawRect(11, 10, w - 2, h);
			g.endFill();
			
			// outside top
			g.beginFill(c2);
			g.drawRect(11, 10, w - 2, 1);
			g.endFill();
			
			// outside bottom
			g.beginFill(c3);
			g.drawRect(11, 10 + h - 1, w - 2, 1);
			g.endFill();
			
			// inside top
			g.beginFill(c4);
			g.drawRect(11, 11, w - 2, 1);
			g.endFill();
			
			// inside bottom
			g.beginFill(c5);
			g.drawRect(11, 10 + h - 2, w - 2, 1);
			g.endFill();
			
			// inside sides
			g.beginFill(c6);
			g.drawRect(11, 12, w - 2, h - 4);
			g.drawRect(12, 12, w - 4, h - 4);
			g.endFill();
		}
	}
}

效果图：