FLEX WEB流程设计器线条、箭头的绘制

流程设计器里面，最复杂的其实不是拖来拖去的图片，而是线条的绘制包括锚点、箭头，如果把线条绘制好了，那设计器就没什么难度了。

绘制线条会涉及到一些数学知识，主要是三角函数、极坐标等，如果不记得了，赶紧恶补一下吧，这个是必须的。

线条绘制又分多种场景：

1 在一个节点和鼠标所在坐标之间绘制（寻找目标节点过程），这个线条要跟随鼠标的移动而不断重绘。线条的起点为节点中心点坐标与鼠标位置的连线再与节点边缘的交点（有点抽象，等会看图就明白）

可能很多人都以为是在拖动线条，其实这是一个假象，当鼠标移动时，会先擦除线条，然后重新绘制一条节点和鼠标当前位置的连线，当鼠标移动一段距离后，实际上重绘了无数次，这样线条的“拖动”就有连贯性，如果只在鼠标移动结束之后再绘制一条也可以，这样只需要重绘一次，但视觉上的效果要查很多。

2 在两个节点之间绘制，起点和终点坐标分别为两个节点中心点坐标之间的连线分别与节点边缘的交点。

3 拖动锚点（一条线条被分成几段时，子线条之间的交点）绘制，和第1点有些类似，稍微复杂点。

下面举第1种场景中节点在鼠标左上方的例子进行说明：