flex画线注意事项及画网格线

最新推荐文章于 2022-07-31 10:56:58 发布

dengyulong

最新推荐文章于 2022-07-31 10:56:58 发布

阅读量234

点赞数

分类专栏： flex

本文链接：https://blog.csdn.net/dengyulong/article/details/84082090

版权

flex 专栏收录该内容

93 篇文章 0 订阅

订阅专栏

一、画线注意事项

1.画出的线要显示在界面上，因此线要继承UIComponent，主要是使用它的画布对象即this.graphics

2.画线只适合于绝对布局，不能用于相对布局，否则画出来就乱七八糟，或者看不见,因为如果用布局组件如HGroup和VGroup，那么组件就只能横或竖着放

二。画网格线

网格线就是由横线和竖线组成，因此思路就是先画个矩形，然后就画横线再画竖线,

参考代码（CommonUtil.as）：

		/**
		 * 将画图区域用网格填充,drawCenter为UIComponet的子类
		 */ 
		public static function initLine(drawCenter:UIComponent):void
		{
			var grapWidth: Number = 15;
			//清除由drawCenter的画布graphi所产生过的图像
			drawCenter.graphics.clear();
			//填充背景
			drawCenter.graphics.beginFill(0xFFFFFF);
			/*drawCenter.graphics.beginFill(0x959595);*/
			drawCenter.graphics.drawRect(0, 0, drawCenter.width, drawCenter.height);
			drawCenter.graphics.endFill();
			
			drawCenter.graphics.lineStyle(1, 0xBBBBBB);
			//画横线
			var i : int = 0;
			var totalLength: Number = 0;
			while(totalLength <= drawCenter.height){
				drawCenter.graphics.moveTo(0, grapWidth * i);
				drawCenter.graphics.lineTo(drawCenter.width, grapWidth * i);
				i++;
				totalLength = grapWidth * i;
			}
			
			//变量清零
			totalLength = 0;
			i = 0;
			
			//画竖线
			while(totalLength <= drawCenter.width){
				drawCenter.graphics.moveTo(grapWidth * i, 0);
				drawCenter.graphics.lineTo(grapWidth * i, drawCenter.height );
				totalLength = grapWidth * i;
				i ++;
			}
		}

 使用(添加resize事件，resize事件就是当组件大小发生改变时调用，第一次创建设置width和高度时也会调用,因此我们可以利用 resize事件来做页面的自适应):

                <s:BorderContainer id="drawCenter" width="100%" height="100%"
                                           mouseMove="drawCenter_mouseMoveHandler(event)"
                                           mouseUp="drawCenter_mouseUpHandler(event)"
                                           resize="drawCenter_resizeHandler(event)"
                                           backgroundColor="#74556B"
                                           dropShadowVisible="true" borderWeight="3" cornerRadius="0"
                                           borderAlpha="1.0" backgroundAlpha="0.3">

            /**
             * 当画图区域大小发生改变时，重新绘制网格线(自适应)
             */
            protected function drawCenter_resizeHandler(event:ResizeEvent):void
            {
                //将画图区域用网格填充
                CommonUtil.initLine(this.drawCenter);
            }