`

[zt]GEF 进阶，第二部分: Router

算法OpenSourceEclipseOSIBM 
阅读更多

FROM:http://www.ibm.com/developerworks/cn/opensource/os-ecl-gef/part2/index.html

2006 年 11 月 30 日

Router（连线路由器）是对连线进行布局的重要组件，本文介绍了路由器的基本概念和应用场景，剖析了一个连线路由器的接口并给出了一个简单实例。最后演示了如何把自定义的路由器应用到图形中，使得不同的连线可以有不同的路由器。

ConnectionRouter（连线路由器）

图形之间连线的路线，是由连线路由器来决定的。在Shapes Examples中，使用了最短路径路由器，这个路由器会帮我们绕开图形之间的障碍，选择一条最短路径进行连接，如图1所示：


图1. ShortestPathConnectionRouter效果图
 图1. ShortestPathConnectionRouter 效果图 

我们看到左右两边图形的连线绕过了中间的图形，在两处发生了转折。这就是使用了最短路径路由器的效果。连线路由器可以安装到Connection Layer(连接层，关于层的概念我们在本系列下一篇中讲述)，也可以针对某一条连接，所以只要你愿意，每条连线都可以有不同的路由器。如果你没有为某条连线指定一个路由器，那么缺省会使用连接层的路由器。Draw2D自带了一些路由器的实现，除了图1的ShortestPathConnectionRouter，还有ManhattanConnectionRouter等路由器实现，如果这些自带的路由器不能满足我们的需要，我们所要做的就是实现ConnectionRouter接口，实现一个自定义路由器。ConnectionRouter接口并不复杂，如下所示：

java 代码
  1. Object getConstraint(Connection connection);    
  2. void setConstraint(Connection connection, Object constraint);    
  3. void invalidate(Connection connection);    
  4. void route(Connection connection);    
  5. void remove(Connection connection);    

setConstraint和getConstraint用来设置/得到连接上的Constraint(约束)，所谓Constraint是指加在某个连线上的一些参数。我们可以看到constraint是一个Object类型，因为不同的路由器可能对constraint有不同的要求，对于ShortestPathConnectionRouter来说，constraint需要是一个List对象，里面包含了所有的转折点。

invalidate方法可以将一个连线置为无效，这样在下一次布局操作时，无效的连接将被重新路由。remove方法是将连线从路由器中删除，也就是路由器不会再负责这条连线的布局，一般只有在删除一条连线的时候才会调用到，我们可以在里面做一些清除工作，比如释放和连线相关的cache。route方法是路由操作真正发生的地方，我们一般只需要实现route方法就可以了，如果你还想做一些其他的操作，可以考虑实现其他方法。同样，一般是不推荐直接实现ConnectionRouter接口的，我们可以继承AbstractRouter类，这个类提供了一些简单的或者空的实现，还提供了两个额外的方法getStartPoint()和getEndPoint()方便我们得到连线的两个端点。

 SingleBendpointConnectionRouter

我们将实现一个自定义的路由器，叫做SingleBendpointConnectionRouter，它采用一种走直角的方式连接两个图形，如图2所示：
图2. SingleBendpointConnectionRouter效果图
 图2. SingleBendpointConnectionRouter效果图 

也许这种路由器并没有太多的通用性，但是我们只是作为一个例子演示路由器的实现，了解了基本方法之后，再去实现更复杂更实用的路由器也就大同小异了。

路由器实现的前提

显然我们无法凭空的计算出线路的走向，一条连线的具体路线和很多因素有关，比如锚点、图形的位置和大小，图形之间的相互关系，等等。所以我们需要能够访问到这些必须的信息，在Connection接口中，我们有getTargetAnchor()和getSourceAnchor()可以让我们得到锚点，而在ConnectionAnchor接口中（参见本系列第一部分），我们有getOwner()这样的方法，可以得到图形。这些必要的方法为我们实现路由器提供了可能。

实现route方法

route方法的代码如下:

java 代码
  1. public void route(Connection conn) {   
  2.   // 清空连线的所有点   
  3.   PointList points = conn.getPoints();   
  4.   points.removeAllPoints();   
  5.      
  6.   // 得到目标和源参考点   
  7.   Point sourceRef = conn.getSourceAnchor().getReferencePoint();   
  8.   Point targetRef = conn.getTargetAnchor().getReferencePoint();   
  9.   A_POINT.setLocation(sourceRef.x, targetRef.y);   
  10.      
  11.   // 得到起始点和结束点   
  12.   Point startPoint = conn.getSourceAnchor().getLocation(A_POINT);   
  13.   Point endPoint = conn.getTargetAnchor().getLocation(A_POINT);   
  14.      
  15.   // 添加起始点   
  16.   A_POINT.setLocation(startPoint);   
  17.   conn.translateToRelative(A_POINT);   
  18.   points.addPoint(A_POINT);   
  19.      
  20.   // 添加转折点   
  21.   A_POINT.setLocation(sourceRef.x, targetRef.y);   
  22.   conn.translateToRelative(A_POINT);   
  23.   points.addPoint(A_POINT);   
  24.      
  25.   // 添加结束点   
  26.   A_POINT.setLocation(endPoint);   
  27.   conn.translateToRelative(A_POINT);   
  28.   points.addPoint(A_POINT);   
  29.      
  30.   // 设置连线经过的所有点   
  31.   conn.setPoints(points);   
  32.  }   


一条连线实际上是通过一系列的点来描述的，而route方法的实际任务也就是计算出这些点的位置。所以我们一开始就得到了这条连线的点序列（PointList对象），然后清空它，重新计算这些点。在我们这个路由器的设计里，一条连线由三个点组成：分别是起始点，转折点和结束点，它们构成了两条垂直的直线。起始点和结束点（也就是锚点）我们都已经了解如何得到了，中间的转折点，也很容易得出，我们就不解释了。要指出的是，我们需要把它们的坐标转换为相对坐标再添加，同时在添加完成之后，我们还需要调用setPoints()方法，这样才会生效。

所以说实现一个路由器的过程是很简单的，复杂之处在于路由算法，但这已经不属于GEF的范畴，所以我们就不讨论它了。

改变连接层的路由器

我们只是实现了路由器，还没有把这个路由器设置为缺省的路由器，所以我们还要做一点小修改，在DiagramEditPart的createFigure()方法里，将ShortestPathConnectionRouter替换为SingleBendpointConnectionRouter即可。

待改进的地方

我们的自定义路由器很简单，但是它也有一点小问题，当两个图形在垂直或水平方向有重叠时，连线看上去有点不正常，如图3所示：
图3. 一点小bug
 图3. 一点小bug 

这只是由于我们的路由器算法不是很完善，没有考虑到所有情况而已。你可以尝试修改一下route的算法，改正这个问题，我们这里就不详细演示了。

 为连线指定路由器

我们目前是将路由器安装到了连接层，于是所有的连线都会使用同一个路由器，有些时候为了让布局更加灵活，我们需要为一条或多条连线指定一个不同的路由器。由于Connection接口中提供了setConnectionRouter()方法，因此这是可以实现的。

修改model

为了让连线知道它要使用何种路由器，我们需要修改连线的model，把当前的路由器种类存进去，我们在Connection.java里面加上一个routerId的成员，同时再定义一些表示不同路由器的常量:

java 代码
  1. // router id constant   
  2. public static final int SHORTEST_PATH_ROUTER = 0;   
  3. public static final int MANHATTAN_ROUTER = 1;   
  4. public static final int SINGLE_BENDPOINT_ROUTER = 2;   
  5.   
  6. private int routerId;   
  7.   
  8. public int getRouterId() {   
  9.  return routerId;   
  10. }   
  11.   
  12. public void setRouterId(int routerId) {   
  13.  this.routerId = routerId;   
  14. }   
  15.   


添加属性

为了能够随时修改连线的路由器，我们为连线添加一个router属性，由于这些内容不在本文讨论范围中，所以不一一描述了。完成之后，我们可以在属性视图中看到连线的路由器属性和可选值：


图4. Router属性
 图4. Router属性 

于是我们就可以让多种连线方式共存了，对于复杂的图形来说这样可以尽量避免连线重叠，增加布局的美观程度。


图5. 使用多种路由器
 图5. 使用多种路由器 

结束语

GEF中的几乎一切东西都可以定制，本文介绍的是连线路由器的定制，我们可以把这些内容和上一部分的自定义锚点结合起来，构建更为灵活的布局。不过，不要忘记了Draw2D自带的那些路由器，实在找不到合适的，可以考虑使用自定义的路由器。

下载

名字 大小 下载方法
org.eclipse.gef.examples.shapes_anchor.zip   HTTP

分享到：
| [zt]GEF 进阶，第一部分: Anchor
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GEF 进阶，第一部分: Anchor

    GEF示例 博文链接：https://xyhsm.iteye.com/blog/67809

    GEF 进阶+源码.rar

    **DRAW2D** 是GEF的一部分，专注于二维图形的绘制和管理。DRAW2D提供了基本的图形绘制功能，包括形状、线条、文本等元素，并支持事件处理和动画效果。开发者可以利用DRAW2D创建自定义的图形元素，并在GEF环境中进行...

    GEF进阶 IBM社区文档整理

    - **IBM社区文档**：“GEF进阶，第一部分:Anchor”(http://www.ibm.com/developerworks/cn/opensource/os-ecl-gef/part1/index.html) - **其他资源**：了解更多的GEF教程和技术文档，可以帮助开发者更好地理解和运用...

    GEF-ALL-3.2.2

    GEF: Graphical Editing Framework <br>GEF是一套MVC Framework，它能帮你比较容易的建立图形化的编辑器，V（View）的部分常常是基于SWT的Draw2D，因此Draw2D也看作是GEF的一部分。依赖：org.eclipse.gef***, org...

    gef:Eclipse GEF:trade_mark:

    Eclipse图形编辑框架（GEF） Eclipse提供了Eclipse集成的最终用户工具，包括创作（ ）和词云渲染环境（）以及框架组件（ ， ， ， ， ， ， ， 和 ）来创建基于Eclipse集成或独立的丰富的基于JavaFX和SWT的图形化...

    RCP与GEF课件，介绍RCP和GEF各组成部分和工作原理

    **RCP（Rich Client Platform）** 是Eclipse项目的一个核心组成部分，它提供了一个框架，用于构建功能丰富的桌面应用程序。RCP允许开发者利用Java语言和Eclipse插件体系结构来创建可扩展、模块化的应用程序，这些...

    gef 资料 通俗易懂

    Gef框架详解：初学者入门与进阶指南 Gef（GDB Enhanced Framework）是一个强大的GDB（GNU调试器）扩展，旨在提供一个更现代、功能更丰富的交互式环境，用于调试C、C++和其他支持GDB的语言。这个压缩包包含了关于Gef...

    Eclipse插件开发：GEF入门系列宝典

    2.GEF 的结构： GEF 的结构决定了 GEF 应用程序的复杂性，即使最简单的 GEF 程序也包含五六个包和十几个类。 3.GEF 的入门方法： 学习 GEF 的最好方法是结合具体的例子，一边看代码，一边对照文档，然后自己再...

    [翻译]Eclipse图形化编辑框架(GEF)/更新第7章：层和视图

    **Eclipse图形化编辑框架(GEF)** Eclipse图形化编辑框架（GEF）是Eclipse平台中的一个重要组件，主要用于构建可自定义的图形编辑工具。它为开发人员提供了一套全面的API和设计模式，使得创建复杂的图形用户界面...

    GEF教程及demo源码

    GEF主要由三部分组成：MVC（Model-View-Controller）、Command和Zest。MVC模式用于分离数据模型、视图和控制器，使得代码结构清晰，易于维护。Command模块则实现了撤销/重做功能，使得用户操作可逆。Zest是GEF的图表...

    gef 转折线的相关方法实现和 GEF的API chm 格式

    Gef，全称Graphical Editing Framework，是Eclipse项目的一部分，是一个用于构建图形编辑框架的开源库，主要用于开发基于Swing或SWT的图形用户界面应用。这个框架支持模型驱动的编辑环境，允许开发者创建复杂的图形...

    java gef开发实例

    2. **GEF组件**： - **Figure**：表示图形元素，如线条、矩形等，是视图的基本组成单元。 - **Part**：封装了Figure，代表图形编辑中的一个可操作对象。 - **GraphicalViewer**：作为图形查看器，管理多个Part的...

    Eclipse插件开发：GEF入门系列宝典_gef_

    由于工作的需要，最近开始研究GEF（Graphical Editor Framework）这个框架，它可以用来给用户提供图形化编辑模型的功能，从而提升用户体验，典型的应用如图形化的流程设计器、UML类图编辑器等等。

    界面设计GEF应用实例

    【描述】中的"六个小例子"是指通过一系列逐步进阶的教程，帮助开发者从基础到高级理解并掌握GEF的使用。这些例子旨在帮助初学者逐步理解GEF的工作原理，以及如何利用其功能构建复杂的图形用户界面。每个例子都增加了...

    GEF_Demo_Code20170307

    2. **在ViewPart中使用GEF**：通常情况下，GEF主要用于创建图形编辑器（Editor），但本示例特别指出在非Editor的ViewPart中使用GEF。ViewPart是Eclipse RCP（Rich Client Platform）中的一个组件，用于显示各种视图...

    gef学习文档+学习源码

    Gef的主要目标是为逆向工程师提供一个统一的平台，以便更好地理解二进制代码的行为。它支持多种操作系统，如Linux、macOS和Windows，并且与GDB的多个版本兼容。 在学习Gef时，首先要掌握如何安装和配置。这通常涉及...

    GEF-whole-upload.rar_gef_whole

    2. **创建第一个项目**：使用GEF工作流创建一个简单的图形编辑器，如画板和基本图形。 3. **实现命令**：编写自定义命令以处理用户操作，如添加、删除和移动图形元素。 4. **图形交互**：实现DirectEdit和手势识别，...

Magicbox
Global site tag (gtag.js) - Google Analytics