Flex简单画线组件

Posted on by

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

之前做项目的时候需要在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）。

36 thoughts on “Flex简单画线组件”

  1. A well written blog post, I just given this onto a co-worker who was doing a little research on this. And he in fact purchased me dinner because I discovered it for him.. :) .. So let me reword that: Thanks for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and enjoy learning more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is very helpful for me. Two thumb up for this blog post!

  3. I’m impressed, I have to say. Really rarely do I come across a blog that is both informative and entertaining, and let me tell you, you’ve hit the nail on the head. Your opinion is important; the issue is something that not many people are speaking intelligently about. I am really happy that I stumbled across this in my search for something relating to it.

  5. I’m impressed, I must say. Really rarely do I discover a blog that’s both informative and entertaining, and let me tell you, you have hit the nail on the head. Your thoughts is important; the matter is something that not a lot of people are talking intelligently about. I’m really happy that I stumbled across this in my search for something relating to this.

  6. Hullo, an amazing blog post buddy. Thanks But I’m experiencing issue with the RSS feed. Don’t know why Fail to subscribe to it. Is there anybody experiencing identical RSS feed trouble? Anybody who can assist please respond. Thank you.

  7. My dad has been writing a book precisely on point with this blog, I have emailed him the web address so perhaps he could pick up a couple pointers. Fantastic Job.

  8. Hello ok Angela ,I am a tea and coffee enthusiast, absolutely love the smell and the taste of tea as the very first thing after getting up. I Guzzle minimum five cups every 24 hours. By the way lovely blog, Hope you have a pleasant day.

  10. Surprisingly! It is like you read my mind! You seem to know so much about this, just like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but other than that, this is great blog. A great read. I’ll certainly be back.

  11. Definitely agree with exactly what you wrote. Your explanation was undoubtedly the simplest to understand. I tell you, I usually get irritable when individuals discuss issues that these people obviously do not know about. You managed to strike the nail on the head and explained every thing with out complication. Perhaps, others can learn from this. Will more than likely be back to learn more. Cheers

  12. It’s rare for me to discover something on the web that’s as entertaining and fascinating as what you’ve got here. Your page is sweet, your graphics are great, and what’s more, you use source that are relevant to what you are talking about. You’re definitely one in a million, well done!

  13. Random question: I know you are using WordPress for this blog, but have you tried any other platforms? I am trying to decide whether to use WordPress or BlogEngine and I ask because I like yours.

  14. In I have created an abstract class Number that is extended upon by the Integer class. Because the Number class is declared abstract it cannot be instantiated. Looking at the Number class we can see that two functions are defined value and reset .

  15. This post has been extremely insightful and useful to increase my knowledge in the field of knowledge and its many facets. Thank you very much, I will certainly come back to visit often and definitely tell some of my internet-inclined friends to visit this site. Keep posting and expressing your knowledge and opinions strong!

  18. Great stuff from you, man. Ive read your stuff before and youre just too awesome. I love what you’ve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. this is really a great site.

  19. When you have a home live theater system to enjoy dvds, be certain to completely kit this out by using a right surround system that offers you the best sound possible

  23. I do not accept as true with everything on that articles, but you do make some very useful things. I’m very excited about this subject and I myself act alots of study as well. Anyway it was a well thoughtout and pleasant read so I figured I would depart you a note. Feel free to check out my post sometime & let me know what u feel.

  24. Im impressed. I dont think Ive met anyone who knows as much about this subject as you do. Youre truly well informed and very bright. You wrote something that folks could understand and made the subject intriguing for everyone. Really, great blog youve got here.

  29. Pretty nice website. I just stumbled upon your site and wanted to say that I have really enyed reading your site posts. Any way I’ll be subscribing to your feed and I hope you blog again soon…

  31. Just wanted to say that you have some awesome stuff on your site. If it’s allowed I would like to use some of the information you provided on my site. If I link back to this page would it be OK to do so?

  33. Youre not the average blog writer, man. You definitely have something powerful to add to the web. Your design is so strong that you could almost get away with being a bad writer, but youre even awesome at expressing what you have to say. Such a great website. Ill be back for more.

  35. We are a group of volunteers and starting a new scheme in our neighborhood. Your site provided us with valuable information to work on|.You have done a marvellous job!