26 路径编辑器
2022-05-13 本文已影响0人
skoll
点击编辑路径
1 .https://x6.antv.vision/zh/examples/showcase/faq#path-editor
2 .使用场景
1 .目前主要是图编辑器,节点都是使用的时候加的.不存在一些给一堆节点,然后让你自己连接,如果有这种情况,并且节点数量很大,才需要这个布局组件,
2 .除此之外,别的情况应该都不需要吧.
网格布局
POPO-screenshot-20220120-173628.png
1 .如果节点就有位置数据,那么还会覆盖么?
2 .网格布局根据参数指定的排序方式对节点进行排序后，将节点排列在网格上
3 .参数
1 .width:布局区域宽度
2 .height:布局区域高度
3 .center:布局中心点
4 .preventOverlap:是否防止重叠
5 .preventOverlapPadding:防止重叠节点的间距padding
6 .rows:网格的行数.不设置的时候算法根据节点数量,布局控件,自动计算
7 .cols:网格的列数.不设置的时候同上
8 .condense:为false的时候表示利用所有可用画布空间,为true的时表示利用最小的画布空间
9 .sortBy:指定排序的依据.数值越高的则该节点放置的越中心.
10 .nodeSize:统一设置节点的尺寸
4 .代码.所有必须放在一个model里面
<!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>
<script src="https://unpkg.com/@antv/layout/dist/layout.min.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 model = {
nodes: [
],
edges: [
],
}
const keyPoints = [
20, 12, 12, 4, 18, 12, 12, 6, 16, 17, 17, 10, 10, 3, 3, 2, 2, 9, 9, 10,
]
for(let i=1;i<=21;i++){
model.nodes.push({
id: `${i}`,
shape: 'circle',
width: 32,
height: 32,
attrs: {
body: {
fill: '#5F95FF',
stroke: 'transparent',
},
label: {
fill: '#ffffff',
},
},
label: i,
})
}
for (let i = 0; i < keyPoints.length; i += 2) {
model.edges.push({
source: `${keyPoints[i]}`,
target: `${keyPoints[i + 1]}`,
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: null,
},
},
})
}
const gridLayout = new layout.GridLayout({
type: 'grid',
width: 600,
height: 400,
center: [300, 200],
rows: 4,
cols: 4,
})
const newModel = gridLayout.layout(model)
graph.fromJSON(newModel)
</script>
</body>
</html>
环形布局,椭圆布局
1 .布局将所有节点布局在一个圆环上,可以选择节点在圆环上的排列顺序.可以通过参数的配置扩展出环的分组布局,螺旋布局等
2 .
