hanyeah

公司要做一个类似于流程图编辑器的东西，让我来做。我一开始就意识到，连线时最难的，因为平时用word画图的时候，被气的够呛。

参考的网站：

1、https://www.processon.com/tour

这是一个在线画各种流程图的网站，做的不相当错。

下载了js源码看了看，计算画线的路径（其实是计算拐点）一大堆if...else写了1200多行，不知道他们以后怎么维护。

2、http://blog.csdn.net/li_canhui/article/details/6798380/

这个介绍的不错，不得不承认，微软确实很强大。

通过这篇文章，我知道我要用到”曼哈顿路由“。

3、http://xmind.iteye.com/blog/816559

这篇文章介绍了draw2d，一个java的类库。据说用这个开发流程图编辑工具时很方便的。

不了解java，留着以后再看。

4、http://www.draw2d.org/draw2d/download/index.html

还是draw2d，不过是js版的。可惜没有as的，有网页的地方就有js啊。

js和as还是很像的，从里边找到了”曼哈顿路由“的实现代码，改成了as的，拿来用了，只写了一个方法，再稍微复杂点的都没有做。

核心代码（在Line.as里边）：

private const MINDIST:Number = 30;
		private const TOL:Number = 0.1;
		private const TOLxTOL:Number = 0.01;
		private const TOGGLE_DIST:Number = 5;
		/**
		 * 核心:寻路算法(routing algorithm)
		 * @param	conn
		 * @param	fromPt
		 * @param	fromDir
		 * @param	toPt
		 * @param	toDir
		 */
		private function route(conn:Array, fromPt:Point, fromDir:int, toPt:Point, toDir:int ):void {

			var xDiff:Number = fromPt.x - toPt.x;
			var yDiff:Number = fromPt.y - toPt.y;
			var point:Point;
			var pos:Number;
			var dir:int;
			if ( (xDiff * xDiff < TOLxTOL) && (yDiff * yDiff < TOLxTOL) ) {
				conn.push(new Point(toPt.x, toPt.y));
				return;
			}
			if (fromDir==LEFT) {
				if (xDiff>0 && yDiff*yDiff<TOL && toDir==RIGHT) {
					point = toPt;
					dir = toDir;
				}
				else {
					if (xDiff0&&toDir==DOWN) || (yDiff0) {
						dir = UP;
					}
					else {
						dir = DOWN;
					}
				}
			}
			else if (fromDir==RIGHT) {
				if (xDiff<0 && yDiff*yDiff0) {
						point = new Point(fromPt.x + MINDIST, fromPt.y);
					}
					else if ( (yDiff>0 && toDir==DOWN) || (yDiff0) {
						dir = UP;
					}
					else {
						dir = DOWN;
					}
				}
			}
			else if (fromDir==DOWN) {
				if (xDiff*xDiff0) {
						point = new Point(fromPt.x, fromPt.y + MINDIST);
					}
					else if( (xDiff>0&&toDir==RIGHT) || (xDiff0) {
						dir = LEFT;
					}
					else {
						dir = RIGHT;
					}
				}
			}
			else if (fromDir==UP) {
				if (xDiff*xDiff0&&toDir==DOWN) {
					point = toPt;
					dir = toDir;
				}
				else {
					if (yDiff0&&toDir==RIGHT)||(xDiff0) {
						dir = LEFT;
					}
					else {
						dir = RIGHT;
					}
				}
			}
			route(conn, point, dir, toPt, toDir);
			conn.push(fromPt);
		}

效果：

demo01：

demo02：

源码打包下载