5.2 自定义路由
2022-01-14 本文已影响0人
skoll
简介
1 .除了那几种参数,还有就是可以完全自定义线段的走向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
X6.Graph.registerConnector(
'line1',
(sourcePoint,targetPoint,vertices,args)=>{
console.log('sourcePoint',sourcePoint)
console.log('targetPoint',targetPoint)
console.log('vertices',vertices)
console.log('args',args)
//这个函数还会自动获取已经传的参数,那就是说他的原函数一定是在这个上面
//这里生成线段
const spread=args.spread||20
//没有传值,取默认的20
const points=[...vertices,targetPoint].map((p=>X6.Point.create(p)))
//拿到所有需要计算的点.中间的点和最后的点
const path=new X6.Path()
let prev=X6.Point.create(sourcePoint)
//创建一个路径点
console.log(prev)
//初始化一条新的路径:关键是这些没有文档啊啊啊.只能猜测大概的api
path.appendSegment(X6.Path.createSegment('M',prev))
for(let i=0;i<points.length;i++){
//const next=points[i]
//path.appendSegment(X6.Path.createSegment('L',next))
//最简单的实现,把给的节点全都加到连线里面,现在是不做路上的其他拐点线条而已
let next=points[i]
//path.appendSegment(X6.Path.createSegment('L',next))
const distance=prev.distance(next)
//算下当前的和下一个的距离
let d=spread
//每次加的幅度
while(d<distance){
const current=prev.clone().move(next,-d)
//当前的点
current.translate(
Math.floor(7*Math.random())-3,
Math.floor(7*Math.random())-3
)
//当前的点随便换一个位置
path.appendSegment(X6.Path.createSegment('L',current))
d+=spread
}
prev=next
//一开始不知道每次都是随机,最后是怎么对上最后的基准点呢,其实很简单,最后一个点是固定的,也就是说就算是倒数第一个点偏到姥姥家,也能连的上
}
return path
},true
)
const source = graph.addNode({
x: 120,
y: 40,
width: 100,
height: 40,
attrs: {
body: {
fill: '#f5f5f5',
stroke: '#d9d9d9',
},
},
})
const target = graph.addNode({
x: 400,
y: 260,
width: 100,
height: 40,
attrs: {
body: {
fill: '#f5f5f5',
stroke: '#d9d9d9',
},
},
})
graph.addEdge({
target:target,
source:source,
vertices: [
{ x: 200, y: 200 },
{ x: 380, y: 120 },
],
attrs:{
line:{
stroke:"#722ed1"
}
},
connector:{
name:'line1',
args:{
spread:10,
}
}
})
</script>
</body>
</html>
