`

Router路由

 
阅读更多

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

 

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

 

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

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

 

2.AutomaticRouter,这是一个抽象类,要用的话得用它的实现类FanRouter ,这个路由会判断两结点间是否有重复线,有的话会把重复的线分开,  变成两条线~~

 

3.BendpointConnectionRouter,增加连接线的路由点 ,让你的连线有路由点,从而可以方便的改变方向

 

4. ManhattanConnectionRouter,这个路由能保证画出来的线是垂直或水平的,如果你需要这样的效果就可以设置成这个路由。

 

5. ShortestPathConnectionRouter 最短路径路由器,这个路由还是比较强大的,可以方便的避免连线穿越结点,它会以最近的路径绕开其它结点,完成连线。

 

 

自定义路由的实现思路:

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

 

Object getConstraint(Connection connection);

void setConstraint(Connection connection, Object constraint);

void invalidate(Connection connection);

void route(Connection connection);

void remove(Connection connection);

 

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

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

 

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);
	}
 

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

分享到:
评论

相关推荐

    深入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的...

    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 官方支持的路由管理器,它让我们能够轻松地在不同的页面之间进行导航。在这个项目中,...

    Vue项目 Router路由,Pinia状态管理, Vuex状态管理 Vant List组件案例

    在本项目中,主要涉及了几个关键模块和组件,包括 Router 路由系统、Pinia 和 Vuex 状态管理、Vant UI 组件库以及 Axios 数据请求。 1. **Vue Router 路由**:Vue Router 是 Vue.js 的官方路由库,它负责管理应用的...

    VUE3.0脚手架搭建的最基本、简单的VUE前端工程项目,不包含router路由

    本项目是一个基于 Vue 3.0 的基本脚手架工程,专为初学者设计,不包含复杂的 router 路由系统,适合学习 Vue 3 的基础概念和用法。 首先,Vue CLI 3 是一个官方提供的命令行工具,用于快速搭建 Vue 项目的结构。...

    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) => { if (to.matched.some(record => 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...

    详解AngularJs ui-router 路由的简单介绍

    本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法,有兴趣的可以了解一下

    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: ...

Global site tag (gtag.js) - Google Analytics