简介
1 .除了调用onPortRendered函数里面重新渲染,还有一种方式,可以自定义SVG桩子
<!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>
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
const rect=graph.addNode({
x:240,
y:60,
width:100,
height:180,
attrs:{
body:{
fill:"#f5f5f5",
stroke:'#d9d9d9',
strokeWidth:1,
}
},
ports:{
groups:{
group1:{
attrs:{
circle:{
r:6,
magnet:true,
stroke:'#31d0c6',
fill:"#fff",
strokeWidth:2,
}
},
position:{
name:'absolute',
args:{x:0,y:0}
}
}
},
items:[
{
group:'group1',
args:{
x:50,
y:50
}
},
{
group:'group1',
args:{
x:'100%',
y:'100%'
}
},
//自定义一个桩子
{
id:"id3",
group:'group1',
args:{
x:100,
y:80,
angle:45,
//这里还能调角度
},
markup:[
{
tagName:'path',
selector:'path'
}
],
attrs:{
path:{
d:'M -6 -8 L 0 8 L 6 -8 Z',
magnet:true,
fill:"red"
}
}
}
]
}
})
const addPort=()=>{
rect.addPort({
group:"group1"
})
}
const removePort=()=>{
const ports=rect.getPorts()
if(ports.length){
rect.removePortAt(ports.length-1)
//根据索引位置删除链接桩
}
}
</script>
</body>
</html>
网友评论