router
1 .路由,对vertices进一步做处理,正常应该是线经过点,很生硬的连起来,但是路由可以处理这些,返回处理后的点,必要的时候添加新的点
2 .只要有以下参数
1 .normal:默认路由,原样返回路径点
2 .orth:将所有线段返回成水平或者垂直的线段:在路径上添加一些额外的点,使得边的每一条线段都是水平或者垂直正交
3 .manhattan:只能正交路由,自动避开路径上的其他障碍节点
4 .oneSide:生成一个严格的三段路由,从起始节点的side测开始,经过中间段,再从终止节点的side测结束路由.
5 .metro:水平,垂直,倾斜角线段组成,类似地铁轨道图.并且自动避开路径上的障碍.
6 .er:实体关系由Z字形的斜角线段组成,常用来表示实体图之间的连线
orth参数
1 .padding:设置锚点距离转角的最小距离
2 .
oneSide参数
1 .使用或者的时候,不需要添加额外的vertices,否则路由效果非常差
2 .side:路由的起始方向,也就是要从节点的哪个方向出去,上下左右.
3 .padding:拐点距离出发节点的最小距离,不能一出去就拐吧
image.png
manhattan
1 .水平或者垂直的线段组成,自动避开路径上的其他节点
2 .step:路由算法的步长,补偿越小,计算量越大.推荐使用画布的网格大小,graph.options.grid.size
3 .maximumLoops:计算的最大迭代次数,达到最大迭代次数的时候,使用候补路由
4 .maxDirectionCHange:最大旋转角
5 .excludeTerminals:忽略起始或者终止节点.忽略后不进行障碍计算
6 .excludeShapes:除了起始和结束节点,其他的忽略节点,忽略后不进行障碍物计算
7 .excludeHiddenNodes:是否忽略隐藏的节点,忽略隐藏节点后不参与障碍物计算
8 .startDirections 从开始节点的哪个方向开始路由:top,left,right,bottom
9 .endDirections 从结束节点的哪些方向结束路由
metro参数
image.png
1 .但是这种连线看起来就很乱,不用看了
er参数
1 .不能避开节点有点坑
2 .offset:路由第一点和最后一个点与节点之间的距离.可以看成是第一个发生拐弯的地方
3 .min:路由第一个点和最后一个点与节点之间的最小距离
4 .direction:路由方向.没有的时候会自动选择最优方向"T","B","L","R".怎么参数不统一,有的时候是全称,有的时候是简写
connector
1 .链接器将路由router返回的点加工为path元素的d属性,决定了边渲染到画布后的样式.
2 .连接器种类
1 .normal:简单连接器.用直线连接起点,路由点和终点
2 .smooth:平滑连接器,用三次贝塞尔去享连接起点,路由点和终点
3 .rounded:圆角连接器,用直线连接起点,路有点,终点,并在线段处连用圆弧链接
4 .jumpover:跳线连接线,用直线连接起点,路由和终点,并在边与边的交叉处用跳线符号链接
normal参数
1 .raw:boolean.是否返回一个Path对象,默认值为false返回序列化后的字符串
2 .系统的默认连接器,将起点,路由点,终点通过直线按顺序连接
3 .
orth参数
1 .正交路由,改路由在路径上添加一些额外的点,会保证边的每一条线段都水平或垂直正交
2 .padding:设置触发点距离锚点转角的最小距离
vertical?: number
horizontal?: number
left?: number
top?: number
right?: number
bottom?: number
router:{
name:"orth",
args:{
padding:{
left:50
}
}
}
oneSide参数
1 .正交路由的特殊版本,生成一个严格的三段路由,从起始节点的side开始,经过中间段,再从终止节点的side侧结束路由.
2 .实例代码
router:{
name:"oneSide",
args:{
side:"right"
}
}
3 .现在是从右边开始发出和接收
image.png
manhattan参数
1 .orth的智能版本.由水平或者垂直的正交线段组成,并自动避开路径上的其他节点(障碍)
1 .step:路由步长算法,值越小,越消耗性能,但是越准确,推荐使用画布的格子大小
2 .maximumLoops:最大迭代次数
3 .maxDirectionChange:最大旋转角度
4 .excludeShapes:[]设置可以忽略指定形状的节点,忽略后不参与障碍物计算
5 .excludeTerminals:设置忽略开始和目标节点.
6 .excludeHiddenNodes:忽略隐藏的节点,忽略后不参与障碍物的计算
7 .startDirections:支持开始路由从哪些方向发出
8 .endDirections:支持结束路由从哪些方向结束
metro
1 .manhattan的一个变种,有点像地铁轨道图,最大倾斜角是45度
image.png
ER图参数
1 .实体关系路由"er"由Z字形的斜角端组成
image.png
2 .offset:路由第一个点和最后一个点和节点之间的关系.就是距离节点多远开始拐弯.这里感觉好多节点都有这个属性,但是呢,名字还不一样..
3 .min:路由的第一个点和最后一个点与节点之间的最小距离
4 .路由方向:路由出发的方向.这里的值也是和之前的不一样,"T","L","B","R","H","V",之前的都是小写全称,这里变成了大写首字母了.
connector
1 .normal:简单连接器,用直线连接点,路由点,和终点
2 .smooth:平滑连接器.通过三次贝塞尔曲线去连接起点,路由点和终点
image.png
1 .这里好像还可以用来做贝塞尔曲线编辑器.之前还用了一个canvas的库,现在好像这里就可以 做,
2 .raw:可以决定是否返回一个Path对象,返回的是一个序列化之后的字符串
3 .direction:"H|V"保持水平连接或者垂直连接,不设置会根据起点和终点动态计算
3 .rounded:线段连接处使用圆弧连接
1 .radius:圆弧的半径
2 .raw:是否返回一个path对象
jumpover跳线连接器
1 .
自定义连接器
1 .X6.Path()这个的文档好像也找不到啊
网友评论