Flex4 画线，把直线打折

 实现的效果：

1.选择直线的起始或结束节点时，可以移动直线

2.当按住Ctrl后，再点击直线，可以创建出一个折线，如下图：

基本思路：

当直线被MouseDown后，判断选择的位置，如果是起始或结束节点的范围，则移动该节点，重新绘制直线。

如果有Ctrl按下，则在MouseMove事件中根据鼠标的位置，绘制出一条拆线，当MouseUp后，添加一个新的UIComponent把那条拆线重新绘制一次。

 

UXLine 简单地封装了画直线的类

package cn.ui
{
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.Dictionary;
	
	import mx.collections.ArrayCollection;
	import mx.core.UIComponent;
	
	import spark.filters.GlowFilter;
	
	/**
	 * 线条类
	 * [e-mail]
	 **/
	public class UXLine extends UIComponent
	{
		/** 常量0，未选择节点 */
		public static const SELECTED_NONE_NODE:int = 0;
		/** 常量1，选择了From节点 */
		public static const SELECTED_FROM_NODE:int = 1;
		/** 常量2，选择了To节点 */
		public static const SELECTED_TO_NODE:int = 2;
		
		/** 选择了From 或To节点 LineMove的事件 */
		public static const EVENT_LINE_NODE_MOVE:String = "EVENT_LINE_NODE_MOVE";
		/** 拆线形成拆线的事件 */
		public static const EVENT_LINE_BROKEN:String = "EVENT_LINE_BROKEN";
		
		private var _xFrom:Number = 0;
		private var _xTo:Number = 0;
		private var _yFrom:Number = 0;
		private var _yTo:Number = 0;
		
		private var _selectedNode:int = SELECTED_NONE_NODE;
		private var _lineStyle:int = 2;
		private var _lineColor:uint = 0x0099ff;
		
		// 关联的线条
		//private var _linkLines:ArrayCollection = new ArrayCollection;
		private var _linkLines:Dictionary = new Dictionary;
		
		/** 有效范围(半径) */
		private const _EFFECT_RANGE:int = 3;
		
		public function UXLine()
		{
			super();
			this._selectedNode = SELECTED_NONE_NODE;
			this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		}
		
		
		/** 0 未选择，1选择了起始节点，2选择了结束节点 */
		public function get selectedNode():int
		{
			return _selectedNode;
		}

		public function get yTo():Number
		{
			return _yTo;
		}

		public function set yTo(value:Number):void
		{
			_yTo = value;
		}

		public function get yFrom():Number
		{
			return _yFrom;
		}

		public function set yFrom(value:Number):void
		{
			_yFrom = value;
		}

		public function get xTo():Number
		{
			return _xTo;
		}

		public function set xTo(value:Number):void
		{
			_xTo = value;
		}

		public function get xFrom():Number
		{
			return _xFrom;
		}

		public function set xFrom(value:Number):void
		{
			_xFrom = value;
		}

		public function set lineStyle(value:int):void{
			_lineStyle = value;
		}
		public function get lineStyle():int{
			return _lineStyle;
		}
		public function set lineColor(value:uint):void{
			_lineColor = value
		}
		public function get lineColor():uint{
			return _lineColor;
		}
		
		/**
		 * 绑定MouseDown事件 
		 **/
		private function onMouseDown(event:MouseEvent):void{
			var eventType:String = EVENT_LINE_NODE_MOVE;// 线节点移动
			
			this._selectedNode = SELECTED_NONE_NODE;
			// 判断鼠标的位置，如果位于起点或终点的一个有效区域范围内时，触发可移动事件
			var mousePoint:Point = new Point(event.localX, event.localY);
			if(isInRange(_xFrom, _yFrom, event.localX, event.localY)){
				this._selectedNode = SELECTED_FROM_NODE;
			}else if(isInRange(_xTo, _yTo, event.localX, event.localY)){
				this._selectedNode = SELECTED_TO_NODE;
			}else if(event.ctrlKey){
				// 生成新的线条的时候
				eventType = EVENT_LINE_BROKEN;
			}else{
				// 其他事件，由外层容器去实现
				return;
			}
			
			// 阻击冒泡，并派发自己的事件
			event.stopPropagation(); 
			var newEvent:MouseEvent = new MouseEvent(eventType, true);
			newEvent.localX = event.stageX;    
			newEvent.localY = event.stageY; 
			dispatchEvent(newEvent);
		}
		
		/**
		 * 检测某一点是否在另一个点的范围内
		 * @param x 
		 * @param y  
		 * @param testX 测试点X坐标
		 * @param testY 测试点Y坐标
		 * @param effectRange 有效半径
		 **/
		private function isInRange(x:int, y:int, testX:int, testY:int, effectRange:int=_EFFECT_RANGE):Boolean{
			return ((x - effectRange <= testX) && (x + effectRange >= testX)
				&& (y - effectRange <= testY) && (y + effectRange >= testY));
		}
		
		/**
		 * 绘制直线
		 **/ 
		public function draw():void{
			this.graphics.clear();
			this.graphics.lineStyle(_lineStyle,_lineColor,1); 
			this.graphics.moveTo(_xFrom, _yFrom);
			this.graphics.lineTo(_xTo, _yTo);
		}
		
		/**
		 * 绘制拆线
		 **/ 
		public function draw2Line(pointX:int, pointY:int):void{
			this.graphics.clear();
			this.graphics.lineStyle(_lineStyle,_lineColor,1); 
			this.graphics.moveTo(_xFrom, _yFrom);
			this.graphics.lineTo(pointX, pointY);
			this.graphics.lineTo(_xTo, _yTo);
		}
	}
}

 

不废话，直接上MXML

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="onLoad();" >
	<fx:Style source="BrokenLineDemo.css"/>
	
	<fx:Script>
		<![CDATA[
			import cn.ui.UXCanvas;
			import cn.ui.UXLine;
			
			import flash.display.Sprite;
			import flash.geom.Point;
			
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.events.MenuEvent;
			import mx.managers.DragManager;
			
			// 最原始的线条对象
			private var uxLine:UXLine = new UXLine;
			// 拖动初始点
			private var dragPoint:Point = new Point;
			
			// 当前线条对象
			private var currentLine:UXLine = null;
			
			private function onLoad():void{
				// 初始化表格线
				initGridLine(mxCanvas);
				
				// 初始化uxLine
				uxLine.xFrom = 50;
				uxLine.yFrom = 50;
				uxLine.xTo = 250;
				uxLine.yTo = 250;
				uxLine.draw();
				
				mxCanvas.addElement(uxLine);
				
				mxCanvas.addEventListener(UXLine.EVENT_LINE_BROKEN, onLineBroken);
				mxCanvas.addEventListener(UXLine.EVENT_LINE_NODE_MOVE, onLineNodeMove);
							}
						
			
			// 线条分割事件
			private function onLineBroken(event:MouseEvent):void{
				if(event.target is UXLine){
					currentLine = UXLine(event.target);
					systemManager.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4LB, true); 
					systemManager.addEventListener(MouseEvent.MOUSE_UP, onMouseUp4LB, true); 
				}
			}
			// 线条分割选择点后 开始移动
			private function onMouseMove4LB(event:MouseEvent):void{
				event.stopImmediatePropagation();
				if(currentLine != null){
					currentLine.draw2Line(event.localX, event.localY);
				}
			}
			// 线条分割选择点后 移动完成
			private function onMouseUp4LB(event:MouseEvent):void{
				event.stopImmediatePropagation();
				systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4LB, true); 
				systemManager.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp4LB, true );
				
				var pointX:Number = event.localX;
				var pointY:Number = event.localY;
				// 把线条拆分开,即新增加一条线来实现
				if(currentLine != null){
					var newLine:UXLine = new UXLine;
					newLine.xFrom = currentLine.xFrom;
					newLine.yFrom = currentLine.yFrom;
					newLine.xTo = pointX;
					newLine.yTo = pointY;
					newLine.draw();
					mxCanvas.addElement(newLine);
					
					currentLine.graphics.clear();
					currentLine.xFrom = pointX;
					currentLine.yFrom = pointY;
					currentLine.draw();
					//mxCanvas.removeElement(currentLine);
				}
				currentLine = null;
			}
			
			// 选择线起点或终点的移动事件
			private function onLineNodeMove(event:MouseEvent):void{
				if(event.target is UXLine){
					currentLine = UXLine(event.target);
					systemManager.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4Line, true); 
					systemManager.addEventListener(MouseEvent.MOUSE_UP, onMouseUp4Line, true);
				}
			}
			
			// 选择线起点或终点的移动事件
			private function onMouseMove4Line(event:MouseEvent):void{
				event.stopImmediatePropagation();
				
				if(currentLine != null){
					if(currentLine.selectedNode == UXLine.SELECTED_FROM_NODE){
						currentLine.xFrom = event.localX;
						currentLine.yFrom = event.localY;
					}else if(currentLine.selectedNode == UXLine.SELECTED_TO_NODE){
						currentLine.xTo = event.localX;
						currentLine.yTo = event.localY;
					}
					currentLine.draw();
				}
			}
			
			// 释放移动动作
			private function onMouseUp4Line(event:MouseEvent):void{
				event.stopImmediatePropagation();  
				systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4Line, true); 
				systemManager.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp4Line, true );
				currentLine = null;
			}
			
			
			/**
			 *  初始化表格线条
			 **/
			private function initGridLine(uiComponent:UIComponent):void{
				const LINE_LENGTH:int = 4;
				const LINE_MARGIN:int = 2;
				const LINE_OFFSET:int = 24;
				var rowIndex:int;
				var colIndex:int;
				var rowCount:int = Math.floor(this.height / LINE_OFFSET);
				var colCount:int = Math.floor(this.width / LINE_OFFSET);
				var startX:Number;
				var startY:Number;
				var endX:Number;
				var endY:Number;
				var lineIndex:int;
				var lineCount:int;
				var lineLength:int = (LINE_LENGTH + LINE_MARGIN);
				var thickness:Number = 0.5;
				var lineColor:uint = 0x000000;
				
				uiComponent.graphics.clear();
				uiComponent.graphics.beginFill(0xFFFFFF);
				uiComponent.graphics.drawRect(0, 0, this.width, this.height);
				uiComponent.graphics.endFill();
				
				uiComponent.graphics.lineStyle(thickness, lineColor, 0.5);
				
				// 画出横线
				lineCount = Math.floor(uiComponent.width / lineLength);
				for(rowIndex = 1; rowIndex <= rowCount; rowIndex ++){
					startY = endY = rowIndex * LINE_OFFSET;
					if(rowIndex%2 == 0){
						thickness = 1;
						uiComponent.graphics.lineStyle(thickness, lineColor, 0.3);
					}else{
						thickness = 0.5;
						uiComponent.graphics.lineStyle(thickness, lineColor, 0.1);
					}
					for(lineIndex = 0; lineIndex < lineCount; lineIndex ++){
						startX = lineIndex * lineLength;
						endX = startX + LINE_LENGTH; 
						uiComponent.graphics.moveTo(startX, startY);
						uiComponent.graphics.lineTo(endX, endY);
					}
				}
				// 画出竖线
				lineCount = Math.floor(uiComponent.height / lineLength);
				for(colIndex = 1; colIndex <= colCount; colIndex ++){
					startX = endX = colIndex * LINE_OFFSET;
					if(colIndex % 2 == 0){
						thickness = 1;
						uiComponent.graphics.lineStyle(thickness, lineColor, 0.3);
					}else{
						thickness = 0.5;
						uiComponent.graphics.lineStyle(thickness, lineColor, 0.1);
					}
					
					for(lineIndex = 0; lineIndex < lineCount; lineIndex ++){
						startY = lineIndex * lineLength;
						endY = startY + LINE_LENGTH;
						uiComponent.graphics.moveTo(startX, startY);
						uiComponent.graphics.lineTo(endX, endY);
					}
				}
			}
			
		]]>
	</fx:Script>
	<mx:Canvas id="mxCanvas" height="100%" width="100%">
		<s:Label text="提示：按住Ctrl再选择线条画折线，选择线的两端可移动线条" toolTip="按住Ctrl再选择线条画折线"  x="278" y="11"/>
	</mx:Canvas>
	
</s:Application>

  

 

评论

1 楼 hechuanshan 2013-08-06  

折出去了，收不回来了，有没有方法啊