GEF:使用Draw2D画流程图-(上)

简介:

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

练习要求

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

基础概念

 

 

图例Figure

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

  • 开始、结束图例
    01 public class TerminatorFigure extends ActivityFigure {
    02     FixedAnchor inAnchor, outAnchor;
    03   
    04     public TerminatorFigure() {
    05         inAnchor = new FixedAnchor(this);
    06         inAnchor.place = new Point(10);
    07         targetAnchors.put("in_term", inAnchor);
    08         outAnchor = new FixedAnchor(this);
    09         outAnchor.place = new Point(12);
    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 - 190180);
    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 - 1270,
    20                 180);
    21         g.drawText(message, r.x + 3 * r.width / 8, r.y + r.height / 8);
    22     }
    23 }
  • 分支图例
    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(10);
    07         targetAnchors.put("in_dec", inAnchor);
    08         noAnchor = new FixedAnchor(this);
    09         noAnchor.place = new Point(21);
    10         sourceAnchors.put("no", noAnchor);
    11         yesAnchor = new FixedAnchor(this);
    12         yesAnchor.place = new Point(12);
    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 }
  • 流程图例
    01 public class ProcessFigure extends ActivityFigure {
    02     FixedAnchor inAnchor, outAnchor;
    03   
    04     public ProcessFigure() {
    05         inAnchor = new FixedAnchor(this);
    06         inAnchor.place = new Point(10);
    07         targetAnchors.put("in_proc", inAnchor);
    08         outAnchor = new FixedAnchor(this);
    09         outAnchor.place = new Point(12);
    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确定连接终点的位置
    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:主要处理连接点的代码
     


 本文转自 陈本峰 51CTO博客,原文链接:http://blog.51cto.com/zhoujg/516874 ,如需转载请自行联系原作者


相关文章
|
C++
C++练习:设计一个圆形类(Circle),和一个点类(Point),计算点和圆的关系。 顺便熟悉一下分文件编写
C++练习:设计一个圆形类(Circle),和一个点类(Point),计算点和圆的关系。 顺便熟悉一下分文件编写
139 0
|
20小时前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
《QT从基础到进阶·十五》用鼠标绘制矩形(QGraphicsView、QPainter、QGraphicsRectItem)
805 0
|
数据可视化
R 可视乎|优雅的绘制流程图
R 可视乎|优雅的绘制流程图
110 0
零基础VB教程059期:circle画图模拟烟花效果
零基础VB教程059期:circle画图模拟烟花效果
297 0
|
缓存 容器
案例 01、OpenGL入门--绘制三角形
OpenGL中三角形的绘制,就类似于学习编程时的Hello world,是一个入门级的使用,重点在于理解图形是如何绘制的
289 0
案例 01、OpenGL入门--绘制三角形
|
程序员 C语言
Qt编写自定义控件58-直方对称图
一、前言 本控件也非原创控件,是参考网上的代码而来的,对称顾名思义就是将画布平均成上下两部分,将设置的值自动按照画布高度的一半作为参照高度进行绘制,然后增加动态过渡效果,有点类似于声音播放时候的频谱效果,一般都会用多个直方对称图组合成一个控件来实现多个效果,看起来会更美观,背景颜色可以设置成渐变的,柱状条的颜色也可以自行设置。
982 0
|
程序员 C语言 开发工具
Qt编写自定义控件59-直方动态图
一、前言 直方动态图类似于音乐播放时候的柱状图展示,顶部提供一个横线条,当柱状上升的时候,该线条类似于帽子的形式冲到顶端,相当于柱状顶上去的感觉,给人一种动态的感觉,听音乐的同时更加赏心悦目,原理比较简单,就是用2个定时器,一个定时器间隔比较短,负责快速把柱状图从底部冲到设置的值,同时横线条跟随一起冲上去,一个定时器负责慢慢的跌落值到0,然后横线条缓慢下降,下降速度比柱状图的速度要慢一些,产生一种对比的效果,看起来更像是跌落的感觉。
1116 0
|
程序员 C语言 开发工具
Qt编写自定义控件57-直方波形图
一、前言 直方波形图控件非原创控件,控件大全中大概有20-30个控件非自己原创,而是参考了网上开源的代码,自己加以整理和完善,新增了插件的代码使得可以直接集成到QtDesigner或者QtCreator中。
1212 0