5.5 沿着线有图形
2022-01-13 本文已影响0人
skoll
简介
1 .老实说,现在的效果有点蠢,有点类似于手写html的效果,线段长的时候,怎么做到自动适配填充图形,现在定死了是3个,想要多做只能多写
2 .不过,这种的,2个图形可以做箭头函数,如果targetMarker不认识的话,可以这样操作
<!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@1.1.1/dist/x6.js"></script> -->
<!-- 实在调试不出来,那就换最新的版本试试 -->
<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,
})
//自定义带箭头的线条类型,线条是无限长的,随着线条变成,箭头也会不停延展变多的情况,好吧,我把它想的太聪明了,这个也是很蠢的,那就不行了,还是要js判断线段的长度,然后动态加
X6.Graph.registerEdge(
'arrow',
{
markup:[
{
tagName:'path',
selector:"wrap",
attrs:{
fill:'none',
cursor:'pointer',
stroke:'transport'
}
},
{
tagName:'path',
selector:'line',
attrs:{
fill:"none",
'pointer-events':'none'
}
},
{
tagName:'path',
selector:"arrow1",
groupSelector:'arrow'
},{
tagName:'path',
selector:'arrow2',
groupSelector:"arrow"
}
],
attrs:{
wrap:{
connection:true,
strokeWidth:10,
strokeLinejoin:'round',
},
line:{
connection:true,
stroke:"#333",
strokeWidth:2,
strokeLinejoin:'round',
targetMarker:'classic'
},
arrow:{
d:'M 0 -10 10 0 0 10 z',
fill:"#fff",
stroke:'#333',
pointerEvents:'none'
},
arrow1:{
atConnectionRatio:0.25,
//将边中的指定元素移动到指定比例 [0, 1] 位置处，并自动旋转元素.这个箭头会在总线段长度1/4的位置
},
arrow2:{
atConnectionRatio:0.75
}
}
},
true
)
graph.addEdge({
source:{x:320,y:100},
target:{x:300,y:260},
vertices:[{x:320,y:200}],
shape:'arrow',
attrs:{
line:{
stroke:'#73d13d',
strokeWidth:3,
},
arrow:{
fill:"#ED8A19",
stroke:"#eee"
}
}
})
</script>
</body>
</html>
