GEF:使用Draw2D画流程图

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

练习要求

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

基础概念

 

 

图例Figure

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

  • 开始、结束图例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    public class TerminatorFigure extends ActivityFigure {
        FixedAnchor inAnchor, outAnchor;
     
        public TerminatorFigure() {
            inAnchor = new FixedAnchor(this);
            inAnchor.place = new Point(1, 0);
            targetAnchors.put("in_term", inAnchor);
            outAnchor = new FixedAnchor(this);
            outAnchor.place = new Point(1, 2);
            sourceAnchors.put("out_term", outAnchor);
        }
     
        public void paintFigure(Graphics g) {
            Rectangle r = bounds;
            g.drawArc(r.x + r.width / 8, r.y, r.width / 4, r.height - 1, 90, 180);
            g.drawLine(r.x + r.width / 4, r.y, r.x + 3 * r.width / 4, r.y);
            g.drawLine(r.x + r.width / 4, r.y + r.height - 1,
                    r.x + 3 * r.width / 4, r.y + r.height - 1);
            g.drawArc(r.x + 5 * r.width / 8, r.y, r.width / 4, r.height - 1, 270,
                    180);
            g.drawText(message, r.x + 3 * r.width / 8, r.y + r.height / 8);
        }
    }
  • 分支图例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    public class DecisionFigure extends ActivityFigure {
        FixedAnchor inAnchor, yesAnchor, noAnchor;
     
        public DecisionFigure() {
            inAnchor = new FixedAnchor(this);
            inAnchor.place = new Point(1, 0);
            targetAnchors.put("in_dec", inAnchor);
            noAnchor = new FixedAnchor(this);
            noAnchor.place = new Point(2, 1);
            sourceAnchors.put("no", noAnchor);
            yesAnchor = new FixedAnchor(this);
            yesAnchor.place = new Point(1, 2);
            sourceAnchors.put("yes", yesAnchor);
        }
     
        public void paintFigure(Graphics g) {
            Rectangle r = bounds;
            PointList pl = new PointList(4);
            pl.addPoint(r.x + r.width / 2, r.y);
            pl.addPoint(r.x, r.y + r.height / 2);
            pl.addPoint(r.x + r.width / 2, r.y + r.height - 1);
            pl.addPoint(r.x + r.width, r.y + r.height / 2);
            g.drawPolygon(pl);
            g.drawText(message, r.x + r.width / 4 + 5, r.y + 3 * r.height / 8);
            g.drawText("N", r.x + 7 * r.width / 8, r.y + 3 * r.height / 8);
            g.drawText("Y", r.x + r.width / 2 - 2, r.y + 3 * r.height / 4);
        }
    }
  • 流程图例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    public class ProcessFigure extends ActivityFigure {
        FixedAnchor inAnchor, outAnchor;
     
        public ProcessFigure() {
            inAnchor = new FixedAnchor(this);
            inAnchor.place = new Point(1, 0);
            targetAnchors.put("in_proc", inAnchor);
            outAnchor = new FixedAnchor(this);
            outAnchor.place = new Point(1, 2);
            sourceAnchors.put("out_proc", outAnchor);
        }
     
        public void paintFigure(Graphics g) {
            Rectangle r = bounds;
            g.drawText(message, r.x + r.width / 4, r.y + r.height / 4);
            g.drawRectangle(r.x, r.y, r.width - 1, r.height - 1);
        }
    }
  • FixedAnchor:连接画线时会根据place来调用getLocation确定连接终点的位置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    public class FixedAnchor extends AbstractConnectionAnchor
    {
      Point place;
      public FixedAnchor(IFigure owner)
      {
        super(owner);
      }
       
      public Point getLocation(Point loc)
      {
        Rectangle r = getOwner().getBounds();
        int x = r.x + place.x * r.width/2;
        int y = r.y + place.y * r.height/2;
        Point p = new PrecisionPoint(x,y);
        getOwner().translateToAbsolute(p);
        return p;
      }
    }
  • ActivityFigure:主要处理连接点的代码

连接点PathFigure

连接点从PolylineConnection继承下来,在构造函数中设置目标对象连接点的装饰类,也就是示例中的三角形(PolylineDecoration),以及设定连接线路由样式,这里设置为ManhattanConnectionRouter

 

1
2
3
4
5
6
7
8
9
public class PathFigure extends PolylineConnection {
    public PathFigure() {
        //setSourceDecoration(new PolygonDecoration());
        setTargetDecoration(new PolylineDecoration());
        //setConnectionRouter(new BendpointConnectionRouter());
        setConnectionRouter(new ManhattanConnectionRouter());
                 
    }
}

监听移动事件

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class Dnd extends MouseMotionListener.Stub implements MouseListener {
    public Dnd(IFigure figure) {
        figure.addMouseMotionListener(this);
        figure.addMouseListener(this);
    }
 
    Point start;
 
    public void mouseReleased(MouseEvent e) {
    }
 
    public void mouseClicked(MouseEvent e) {
    }
 
    public void mouseDoubleClicked(MouseEvent e) {
    }
 
    public void mousePressed(MouseEvent e) {
        start = e.getLocation();
    }
 
    public void mouseDragged(MouseEvent e) {
        Point p = e.getLocation();
        Dimension d = p.getDifference(start);
        start = p;
        Figure f = ((Figure) e.getSource());
        f.setBounds(f.getBounds().getTranslated(d.width, d.height));
    }
}

 

Flowchart

Flowchart是主程序代码,生成最上图所示的所有图例、连接,并把连接于连接点关联起来,并加入监听移动事件对象

 

 

参考:Draw2D教程

 

 

推荐:你可能需要的在线电子书

 

欢迎转载,转载请注明:转载自周金根 [ http://zhoujg.cnblogs.com/ ]



posted on   周 金根  阅读(7531)  评论(0编辑  收藏  举报

编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
历史上的今天:
2009-11-23 WPF - 图形设计器(Diagram Designer)
2009-11-23 信息系统开发平台OpenExpressApp -如何部署OEA应用

导航

点击右上角即可分享
微信分享提示