`
bd2007
  • 浏览: 395820 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

Router路由

阅读更多

    Router路由:设定线的轨迹,在Connection接口中定义了添加路由的方式,所以实现了Connection接口的Figure都可以添加路由。另外在ConnectionLayer中有一个方法,是为此Layer下的所有实现了Connection接口的Figure添加一个路由。当然,我们还可以自定义一些Figure添加路由。

?

ConnectionRouter接口:路由的基础接口,所有的路由必须实现此接口。

?

以下是draw2D中常用的几个路由:

1.NullConnectionRouter:ConnectionRouter接口默认提供的实现,直线路由,其实就是不设定任何规则。

?

2<span style="color: #333333;">.</span><span style="color: #333333; font-family: Arial; font-size: 14px; line-height: 26px;">[size=medium;][size=small;]<span style="color: #ff0000;">AutomaticRouter[/size],这是一个抽象类,要用的话得用它的实现类[/size]</span><a style="color: #336699; text-decoration: none;" title="class in org.eclipse.draw2d" href="http://writeblog.csdn.net/org/eclipse/draw2d/FanRouter.html">[size=medium; color: #ff0000;][size=small;]FanRouter[/size][/size]</a>[size=medium;][size=small;]?,这个路由会判断两结点间是否有重复线,有的话会把重复的线分开,? 变成两条线~~[/size][/size]</span>

?

<span style="color: #333333; font-family: Arial; line-height: 26px; font-size: small;">3.<span style="color: #ff0000;">BendpointConnectionRouter</span>,<span style="color: #000000;">增加连接线的路由点 ,让你的连线有路由点,从而可以方便的改变方向</span></span>

?

4.<span style="color: #333333; font-family: Arial; line-height: 26px; font-size: small;">?<span style="color: #ff0000;">ManhattanConnectionRouter</span>,这个路由能保证画出来的线是垂直或水平的,如果你需要这样的效果就可以设置成这个路由。</span>

?

<span style="color: #333333; font-family: Arial; line-height: 26px; font-size: small;">5.?<span style="color: #ff0000;">ShortestPathConnectionRouter</span>?最短路径路由器,这个路由还是比较强大的,可以方便的避免连线穿越结点,它会以最近的路径绕开其它结点,完成连线。</span>

?

?

自定义路由的实现思路:

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

?




Object getConstraint(Connection connection);

void setConstraint(Connection connection, Object constraint);

void invalidate(Connection connection);

void route(Connection connection);

void remove(Connection connection);


?

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

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

?




public void route(Connection conn) {
		// 清空连线的所有点
		PointList points = conn.getPoints();
		points.removeAllPoints();
		
		// 得到目标和源参考点
		Point sourceRef = conn.getSourceAnchor().getReferencePoint();
		Point targetRef = conn.getTargetAnchor().getReferencePoint();
		A_POINT.setLocation(sourceRef.x, targetRef.y);
		
		// 得到起始点和结束点
		Point startPoint = conn.getSourceAnchor().getLocation(A_POINT);
		Point endPoint = conn.getTargetAnchor().getLocation(A_POINT);
		
		// 添加起始点
		A_POINT.setLocation(startPoint);
		conn.translateToRelative(A_POINT);
		points.addPoint(A_POINT);
		
		// 添加转折点
		A_POINT.setLocation(sourceRef.x, targetRef.y);
		conn.translateToRelative(A_POINT);
		points.addPoint(A_POINT);
		
		// 添加结束点
		A_POINT.setLocation(endPoint);
		conn.translateToRelative(A_POINT);
		points.addPoint(A_POINT);
		
		// 设置连线经过的所有点
		conn.setPoints(points);
	}

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

 
0
0
分享到:
评论
1 楼 di1984HIT 2013-07-17  
写的不错啊。

相关推荐

    深入Vue-Router路由嵌套理解

    接着我继续追问…(省略)…大致明白了情况,原来这位朋友没有理解Vue-Router嵌套的原理,下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts,按写法把他们...

    vue3+webpack+vue-router路由封装+axios封装+vuex封装

    vue3+webpack+vue-router路由封装+axios封装+vuex封装,下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码,分别对vue-router路由进行了封装,对axios进行了封装,对vuex进行了封装,...

    angular2中router路由跳转navigate的使用与刷新页面问题详解

    Angular2中Router路由跳转Navigate的使用与刷新页面问题详解 Angular2中Router路由跳转Navigate的使用是Angular2路由跳转的核心部分,而刷新页面问题则是开发中常见的问题。本文将详细介绍Angular2中Router路由跳转...

    22_VueRouter路由使用.pdf

    VueRouter路由使用.pdf VueRouter是Vue.js的官方路由,它与Vue.js核心深度集成,让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的,路由用于设定访问路径,将路径和组件映射起来。在VueRouter的...

    react Router 路由, 简单示例

    # react Router 路由 ### 项目介绍: 见我的这篇博客: https://blog.csdn.net/waterHBO/article/details/142108837?spm=1001.2014.3001.5501 ### 此项目的环境,使用的是 vite,可以直接运行: &gt; npm run dev ##...

    VUE3.0脚手架构建的VUE3.0前端初始工程,包含router路由

    Vue Router 还支持嵌套路由、动态路由匹配、命名视图、路由独占、全局和局部导航守卫等功能。这些特性使得我们可以构建复杂的应用结构,同时保持代码的组织和可维护性。 在实际开发中,我们可以使用 `router-link` ...

    vue3+webpack+vue-router路由

    vue3+webpack+vue-router路由,文件的代码包含了vue3+webpack+vue-router路由,代码清晰,下载下来只需要npm install下载一下依赖项之后就可以直接运行代码了。

    搭建模仿跨境电商网站vue-router路由跳转

    【搭建模仿跨境电商网站vue-router路由跳转】 在前端开发中,Vue.js 是一款非常流行的轻量级框架,而 vue-router 是 Vue.js 官方支持的路由管理器,它让我们能够轻松地在不同的页面之间进行导航。在这个项目中,...

    vue3+webpack+vue-router路由+axios

    vue3+webpack+vue-router路由+axios,资源包含了vue3+webpack+vue-router路由+axios的相关代码,并且对vue-router路由进行了封装,也对axios进行了封装,资源代码需要先:npm install 安装下依赖组件之后就可以启动...

    详解Vue router路由.rar_javascript

    详解Vue router路由,1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件

    uni-simple-router实现简单的路由守卫

    本示例“uni-simple-router实现简单的路由守卫”旨在教你如何利用uni-simple-router库来实现这一功能。uni-simple-router是专为uni-app设计的一个轻量级路由管理插件,它提供了一些强大的特性,包括路由守卫,使我们...

    Vue-Router路由配置+尾部组件实例

    Vue-Router是Vue.js应用程序中的官方路由库,它允许我们管理页面间的导航和状态,创建一个单页应用(SPA)的核心部分。在这个实例中,我们将深入理解Vue-Router的配置方法,并探讨如何抽取出公用的尾部组件。 首先,...

    Vue-router路由判断页面未登录跳转到登录页面的实例

    router.beforeEach((to, from, next) =&gt; { if (to.matched.some(record =&gt; record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ ...

    vue-router路由 myv源码.zip

    Vue Router 是 Vue.js 应用中的官方路由库,它允许我们通过 URL 来管理应用的组件和状态。在深入分析 `vue-router` 的源码之前,先理解路由的基本概念至关重要。 路由是 Web 应用中控制页面跳转的核心机制,它负责...

    vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发

    vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏,用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...

    解决vue+router路由跳转不起作用的一项原因

    Vue Router是官方推荐的路由库,它允许我们定义动态、嵌套路由,并提供多种导航控制方式。在这个问题中,我们将深入探讨为什么在某些情况下,`vue-router`的路由跳转可能不起作用,以及如何通过设置`mode: 'history'...

    sybex-router路由模拟软件

    因此,像Sybex Router这样的模拟器软件应运而生,为用户提供了一个便捷的平台,可以模拟真实的网络环境,进行路由配置、协议实验和故障排除。 **Sybex Router的主要特性** 1. **仿真度高**: Sybex Router旨在高度...

    解决vue-router路由拦截造成死循环问题

    笔记:vue-router路由拦截造成死循环,在做路由拦截的时候,一直出现死循环. router的index.js文件路由配置 const router = new Router({ routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: ...

    浅谈vue-router路由切换 组件重用挖下的坑

    在Vue.js应用中,路由管理通常使用vue-router来实现,它允许我们定义多个路由并根据URL的变化渲染不同的组件。然而,当两个路由指向同一个组件时,vue-router会复用组件以提高性能,但这可能导致组件的一些状态无法...

Global site tag (gtag.js) - Google Analytics