节点类型是path,之前是特定的形状
1 .https://www.svgrepo.com/svg/13653/like svg图标网址
2 .关键 shape:path,path:"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,
})
graph.addNode({
x:100,
y:100,
width:120,
height:50,
label:"W6",
//里面的文字
attrs:{
//图形的样式
body:{
//整个图形的样式,代表rect元素
stroke:"#237804",
fill:"#eee",
rx:10
//边的圆角
},
label:{
//文字的样式,代表text元素
text:"新文字",
fill:"#333",
//文字颜色
fontSize:24,
//文字颜色
},
line:{
stroke:"#7c68fc",
}
}
})
graph.addNode({
shape:"path",
x:100,
y:100,
width:100,
height:100,
label:"path",
path:'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z',
//现在的是这个path出来的图形,随着上面定义的width,height变化而变化
attrs:{
body:{
fill:"#fff",
stroke:'#9254de'
}
}
})
graph.addNode({
shape:'path',
x:360,
y:100,
width:100,
height:100,
label:"path",
attrs:{
body:{
fill:'#eee',
stroke:"#9254de",
d:'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z'
}
}
})
graph.addNode({
shape: 'path',
x: 50,
y: 180,
width: 80,
height: 80,
// https://www.svgrepo.com/svg/13653/like
path:
'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',
attrs: {
body: {
fill: '#D75A4A',
stroke: 'none',
},
},
})
graph.addNode({
shape: 'path',
x: 210,
y: 180,
width: 80,
height: 80,
// https://www.svgrepo.com/svg/13695/star
path:
'M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956C22.602,0.567,25.338,0.567,26.285,2.486z',
attrs: {
body: {
fill: '#ED8A19',
stroke: 'none',
},
},
})
graph.addNode({
shape: 'path',
x: 370,
y: 180,
width: 80,
height: 80,
// https://www.svgrepo.com/svg/13692/music-player
path:
'M52.104,0.249c-0.216-0.189-0.501-0.275-0.789-0.241l-31,4.011c-0.499,0.065-0.872,0.489-0.872,0.992v6.017v4.212v26.035C17.706,39.285,14.997,38,11.944,38c-5.247,0-9.5,3.781-9.5,8.444s4.253,8.444,9.5,8.444s9.5-3.781,9.5-8.444c0-0.332-0.027-0.658-0.069-0.981c0.04-0.108,0.069-0.221,0.069-0.343V16.118l29-3.753v18.909C48.706,29.285,45.997,28,42.944,28c-5.247,0-9.5,3.781-9.5,8.444s4.253,8.444,9.5,8.444s9.5-3.781,9.5-8.444c0-0.092-0.012-0.181-0.015-0.272c0.002-0.027,0.015-0.05,0.015-0.077V11.227V7.016V1C52.444,0.712,52.32,0.438,52.104,0.249z',
attrs: {
body: {
fill: '#eb2f96',
stroke: 'none',
},
},
})
</script>
</body>
</html>
多边形
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
// 指定 refPoints 属性，多边形顶点随图形大小自动缩放
// https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
refPoints: '0,10 20,0 20,10 10,20',
},
},
})
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points:'0,10 20,0 20,10 10,20',
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points: [
[0, 10],
[10, 0],
[20, 10],
[10, 20],
],
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
//注:需要最新版本才能
graph.addNode({
shape: 'polygon',
x: 40,
y: 40,
width: 80,
height: 80,
label: 'polygon',
points: [
[0, 10],
[10, 0],
[20, 10],
[10, 20],
],
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
},
})
graph.addNode({
shape:"polygon",
x:140,
y:180,
width:80,
height:80,
attrs:{
body:{
refPoints:'0,100 50,25 50,75 100,0',
fill:'#73d13d',
stroke:'#237804'
}
}
})
graph.addNode({
shape:'polygon',
x:240,
y:180,
width:80,
height:80,
points: '100,10 40,198 190,78 10,78 160,198',
attrs:{
body:{
fill:"#ffd591",
stroke:'#ffa940',
fillRule:'evenodd'
//这个属性,矩形空间中心掏空,必须是有空间的
}
}
})
网友评论