工作流设计器之图形


第 5 章 图形

Figure代表了Gef中的视图层,我们使用VML和SVG进行绘图,下面是这些图形之间的继承关系。

提示

与Canvas不同的是,VML和SVG都是通过XML标记实现图形的变更,canvas每次都会进行图形重绘,所以不需要像VML和SVG这样需要判断当前的dom是否已经初始化出来了。

5.1. 图形组件关系

0105-01.png

总体关系图

图 5.1. 总体关系图


5.2. 图形分类

最基本的图形包含NodeFigure和ImageNodeFigure,它们分别继承于RoundRectFigure和ImageFigure,目前绘制流程图时就是使用这两种图形显示节点。连线对应的是EdgeFigure。

添加节点,移动节点,修改节点大小时,需要使用DraggingRectFigure。

添加连线,修改连线起始和结束位置时,需要使用DraggingEdgeFigure。

选中节点,需要使用ResizeRectHandle。

选中连线,需要使用ResizeEdgeHandle。

移动连线文字,需要使用DraggingTextFigure。

5.3. 附加工具

Figure中可以使用getTools()方法获得当前图形上可以使用的附加工具,这些附加工具可以用来让我们更加快速的实现添加节点,添加连线的功能。

0105-02.png

附加工具

图 5.2. 附加工具


不过这些附加工具放在Figure上是否恰当,还有待商榷。

5.4. TODO

需要整理继承结构,目前顶级Figure中定义了children,children属性也许应该放在GroupFigure才对,默认认为Figure代表不包含子图形的原子图形,而且目前Figure也确实不支持在内部添加子图形的功能。

需要对Handler进行重新整理,让它们不是直接继承自Figure,而是从RectFigure或PolylineFigure中继承到可重用的功能。

需要补充注释。

需要考虑TextEditor的去处。

PolylineFigure也许应该继承LineFigure。

提示

特别需要重新设计的部分是图形更新,目前每个图形都自己保存了位置和形状信息,这些数据与Model中是重复的,也容易出现数据不同步的情况。

这个问题来源自,最初编写设计器的时候,重点放在VML和SVG的图形绘制上,后来使用Gef重新实现底层架构时,为了降低工作量,没有对原本已经做好的图形绘制功能进行重写。


上一篇 下一篇

评论



分享