左眼看世界

一眨眼一定到月底了，这个月的两篇作业还没做，为了证明我是个言而有信的人，临时抱佛脚补上两篇，晚点比没有强！

之前做项目的时候需要在UI上画一些虚线和直线，于是封装了这个Flex简单画线组件，实现在任意两点间画线，可以指定线型，颜色，粗细，虚线还可以指定线段长度和间隔。

具体实现不解释了，代码会说话。

package me.xuanfei.common.component
{
	import flash.display.CapsStyle;
	import flash.display.Shape;

	import mx.core.UIComponent;

	public class SimpleLine extends UIComponent
	{
		public static const SOLID:String = "solid";
		public static const DASH:String = "dash";

		private var _shape:Shape = new Shape();
		private var _type:String = SOLID;
		private var _x1:Number = 0;
		private var _y1:Number = 0;
		private var _x2:Number = 200;
		private var _y2:Number = 0;
		private var _thickness:Number = 0;
		private var _color:uint = 0x000000;

		private var _dashPattern:Array = [3, 2]

		public function SimpleLine()
		{
			super();
		}

		override protected function updateDisplayList(w:Number,h:Number):void{
			super.updateDisplayList(w,h);			

			_shape.graphics.lineStyle(thickness, color, 1, true, "normal", CapsStyle.NONE);
			_shape.graphics.moveTo(x1, y1);
			switch(type)
			{
				case SOLID:
					_shape.graphics.lineTo(x2, y2);
					break;
				case DASH:
					drawDash();
					break;
			}
			addChild(_shape);
		}  

		private function drawDash():void
		{
			var w:Number = x2 - x1;
			var h:Number = y2 - y1;
			var length:Number = Math.sqrt((w)*(w) + (h)*(h));

			var units:Number = length/(dashPattern[0]+dashPattern[1]);
			var dashSpaceRatio:Number = dashPattern[0]/(dashPattern[0]+dashPattern[1]);

			var dashW:Number = (w/units)*dashSpaceRatio;
			var spaceW:Number = (w/units)-dashW;
			var dashH:Number = (h/units)*dashSpaceRatio;
			var spaceH:Number = (h/units)-dashH;

			while (length > 0)
			{
				x1 += dashW;
				y1 += dashH;
				length -= dashPattern[0];
				if (length < 0)
				{
					x1 = x2;
					y1 = y2;
				}

				_shape.graphics.lineTo(x1, y1);
				x1 += spaceW;
				y1 += spaceH;
				_shape.graphics.moveTo(x1, y1);
				length -= dashPattern[1];
			}

			_shape.graphics.moveTo(x2, y2);
		}

		[Bindable]
		public function get type():String
		{
			return _type;
		}

		public function set type(value:String):void
		{
			_type = value;
		}

		[Bindable]
		public function get x1():Number
		{
			return _x1;
		}

		public function set x1(value:Number):void
		{
			_x1 = value;
		}

		[Bindable]
		public function get y1():Number
		{
			return _y1;
		}

		public function set y1(value:Number):void
		{
			_y1 = value;
		}

		[Bindable]
		public function get x2():Number
		{
			return _x2;
		}

		public function set x2(value:Number):void
		{
			_x2 = value;
		}

		[Bindable]
		public function get y2():Number
		{
			return _y2;
		}

		public function set y2(value:Number):void
		{
			_y2 = value;
		}

		[Bindable]
		public function get thickness():Number
		{
			return _thickness;
		}

		public function set thickness(value:Number):void
		{
			_thickness = value;
		}

		[Bindable]
		public function get color():uint
		{
			return _color;
		}

		public function set color(value:uint):void
		{
			_color = value;
		}		

		[Bindable]
		public function get dashPattern():Array
		{
			return _dashPattern;
		}

		public function set dashPattern(value:Array):void
		{
			_dashPattern = value;
		}
	}
}

在MXML中调用也很简单：

<comp:SimpleLine type=”dash” color=”#999999″ x2=”200″/>

这样就可以画一条200px宽的水平灰色虚线（comp是声明的Namespace）。