GEF：使用Draw2D画流程图-（上）

最新推荐文章于 2024-12-15 12:00:00 发布

原创最新推荐文章于 2024-12-15 12:00:00 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍使用Draw2D库创建流程图的方法，包括不同类型的流程图元素如开始、结束和分支图例的设计与实现。文章通过具体示例展示了如何自定义图例的外观和连接点。

在GEF（Graphical Editing Framework）介绍中已经对Draw2D进行了一些概要介绍，本篇从一个流程图的编写来学习Draw2D的是GEF的基础。

练习要求

做一个图下图所示流程图，流程图中的各个图例可以移动，每个不同类型的图例也不一样。源码下载：flowchart-Draw2D.zip

基础概念

图例Figure

这里支持三种图例，图例从ActivityFigure继承下来。主要就是画图还有定义连接点FixedAnchor，下面先看看代码，代码都比较简单

开始、结束图例

view source print ?

01 public class TerminatorFigure extends ActivityFigure {

02     FixedAnchor inAnchor, outAnchor;

03

04     public TerminatorFigure() {

05         inAnchor = new FixedAnchor(this);

06         inAnchor.place = new Point(1, 0);

07         targetAnchors.put("in_term", inAnchor);

08         outAnchor = new FixedAnchor(this);

09         outAnchor.place = new Point(1, 2);

10         sourceAnchors.put("out_term", outAnchor);

11     }

12

13     public void paintFigure(Graphics g) {

14         Rectangle r = bounds;

15         g.drawArc(r.x + r.width / 8, r.y, r.width / 4, r.height - 1, 90, 180);

16         g.drawLine(r.x + r.width / 4, r.y, r.x + 3 * r.width / 4, r.y);

17         g.drawLine(r.x + r.width / 4, r.y + r.height - 1,

18                 r.x + 3 * r.width / 4, r.y + r.height - 1);

19         g.drawArc(r.x + 5 * r.width / 8, r.y, r.width / 4, r.height - 1, 270,

20                 180);

21         g.drawText(message, r.x + 3 * r.width / 8, r.y + r.height / 8);

22     }

23 }
分支图例

view source print ?

01 public class DecisionFigure extends ActivityFigure {

02     FixedAnchor inAnchor, yesAnchor, noAnchor;

03

04     public DecisionFigure() {

05         inAnchor = new FixedAnchor(this);

06         inAnchor.place = new Point(1, 0);

07         targetAnchors.put("in_dec", inAnchor);

08         noAnchor = new FixedAnchor(this);

09         noAnchor.place = new Point(2, 1);

10         sourceAnchors.put("no", noAnchor);

11         yesAnchor = new FixedAnchor(this);

12         yesAnchor.place = new Point(1, 2);

13         sourceAnchors.put("yes", yesAnchor);

14     }

15

16     public void paintFigure(Graphics g) {

17         Rectangle r = bounds;

18         PointList pl = new PointList(4);

19         pl.addPoint(r.x + r.width / 2, r.y);

20         pl.addPoint(r.x, r.y + r.height / 2);

21         pl.addPoint(r.x + r.width / 2, r.y + r.height - 1);

22         pl.addPoint(r.x + r.width, r.y + r.height / 2);

23         g.drawPolygon(pl);

24         g.drawText(message, r.x + r.width / 4 + 5, r.y + 3 * r.height / 8);

25         g.drawText("N", r.x + 7 * r.width / 8, r.y + 3 * r.height / 8);

26         g.drawText("Y", r.x + r.width / 2 - 2, r.y + 3 * r.height / 4);

27     }

28 }

流程图例

view source print ?

01 public class ProcessFigure extends ActivityFigure {

02     FixedAnchor inAnchor, outAnchor;

03

04     public ProcessFigure() {

05         inAnchor = new FixedAnchor(this);

06         inAnchor.place = new Point(1, 0);

07         targetAnchors.put("in_proc", inAnchor);

08         outAnchor = new FixedAnchor(this);

09         outAnchor.place = new Point(1, 2);

10         sourceAnchors.put("out_proc", outAnchor);

11     }

12

13     public void paintFigure(Graphics g) {

14         Rectangle r = bounds;

15         g.drawText(message, r.x + r.width / 4, r.y + r.height / 4);

16         g.drawRectangle(r.x, r.y, r.width - 1, r.height - 1);

17     }

18 }
FixedAnchor：连接画线时会根据place来调用getLocation确定连接终点的位置

view source print ?

01 public class FixedAnchor extends AbstractConnectionAnchor

02 {

03   Point place;

04   public FixedAnchor(IFigure owner)

05   {

06     super(owner);

07   }

08

09   public Point getLocation(Point loc)

10   {

11     Rectangle r = getOwner().getBounds();

12     int x = r.x + place.x * r.width/2;

13     int y = r.y + place.y * r.height/2;

14     Point p = new PrecisionPoint(x,y);

15     getOwner().translateToAbsolute(p);

16     return p;

17   }

18 }
ActivityFigure：主要处理连接点的代码