Antv X6.js 内容居中相关问题

在AntV X6中，要使得节点(Node)的内容居中，你可以通过自定义节点的布局(layout)方法来实现。以下是一个简单的例子，演示如何创建一个居中内容的节点：

import { Graph } from '@antv/x6'
 
// 自定义布局函数
function centerLayout(node) {
  const bbox = node.getBBox()
  node.translate((-bbox.width) / 2, (-bbox.height) / 2)
}
 
// 初始化图
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  grid: true,
})
 
// 创建节点
const node = graph.addNode({
  x: 100,
  y: 80,
  width: 180,
  height: 30,
  attrs: {
    body: {
      fill: '#fff',
      stroke: '#000',
    },
    label: {
      text: '居中的内容',
      fontSize: 14,
      fill: '#333',
      pointerEvents: 'none', // 防止标签干扰节点的交互
    },
  },
  // 使用自定义布局函数
  layout: centerLayout,
})

在这个例子中，我们定义了一个centerLayout函数，它计算节点的边界框，并将节点的中心移动到原点，这样文本就能在节点中居中显示了。在创建节点时，通过layout属性将自定义的布局函数应用到节点上。这样每次节点的内容变化时，都会自动调用centerLayout函数来保证内容的居中。