点击,线条上出现图形,并且图形沿着线流动
1 .现在好像做不到添加元素,那就只有向隐藏,点击的时候出现了,那就是要先看是否支持动画的链式调用了..
2 .怎么样做到给markup已经定好的结构新增元素呢?
<!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,
})
graph.addEdge({
source:{x:320,y:60},
target:{x:300,y:260},
vertices:[{x:320,y:200}],
markup:[
{
tagName:'path',
selector:'p1'
},{
tagName:'path',
selector:'p2'
},
//代表一条线段好像一定要有两个path,一个是明处显示,一个是在暗处,当作阴影之类的
{
tagName:'rect',
//要渲染一个矩形,
selector:"sign"
},{
tagName:'circle',
selector:'c1'
//渲染一个大圆
},{
tagName:'circle',
selector:'c2'
//渲染一个小圆,和上面的组和显示为一个圆环
},{
tagName:"text",
selector:"signText",
//显示一段文本
}
],
attrs:{
p1:{
fill:'none',
stroke:'#237804',
strokeWidth:6,
strokeLinejoin:'round',
connection:true,
//加这个属性才能在path上面绑定上d属性,不然就爆炸
//仅适用于边的 <path> 元素，当该属性为 true 时，表示将在该元素上渲染边，即设置该元素的 d 为边的 pathData
},
p2:{
connection:true,
fill:'none',
stroke:'#237804',
strokeWidth:6,
strokeLinejoin:'round'
},
sign:{
x:-20,
y:-10,
width:50,
height:20,
stroke:"#237804",
fill:"#73d13d",
atConnectionLength:30,
//将边中的指定元素移动到指定偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致
//问题来了,如何知道这个矩形属于这条边呢,仅仅是因为他们被同一个g包围起来么
strokeWidth:1,
event:'click:rect',
//定义了可以触发的事件
cursor:'pointer'
},
signText:{
atConnectionLength:24,
textAmchor:'middle',
textVerticalAnchor:'middle',
text:'按钮',
event:'click:rect',
cursor:'pointer'
},
c1:{
r:10,
stroke:"#5222d",
fill:"#fe854f",
atConnectionRatio:0.68,
strokeWidth:1,
},
c2:{
r:8,
stroke:"#f5222d",
fill:"white",
atConnectionRatio:0.68,
strokeWidth:1,
}
}
})
graph.on('edge:click',(e)=>{
console.log('click',e)
e.e.stopPropagation()
const t=e.edge.attr('c1/atConnectionRatio')>0.3?0.3:0.9
//获取data,attrs里面的某个属性值,
//并且重新搞成一个新的值
//动画配置
const options={
delay:100,
duration:1000,
timing:X6.Timing.easeInOutBack,
}
e.edge.transition('attrs/c1/atConnectionRatio',t,options)
//元素.变化的属性,变化后的值,变化的参数
e.edge.transition('attrs/c2/atConnectionRatio',t,options)
})
</script>
</body>
</html>
网友评论