vue2中使用antv x6实现自定义文本框节点

在 Vue2 中结合 AntV X6 使用自定义文本框节点，你可以创建一个组件来扩展 X6 的默认节点类型。首先，你需要安装必要的依赖并引入 AntV 和 X6。以下是一个简单的步骤：

1. 安装依赖：

npm install antv/x6@latest @antv/x6-plugin-node-type-textbox vue@latest

2. 创建一个名为 `CustomTextBox.vue` 的组件：

<template>
  <x6-graph :width="graphWidth" :height="graphHeight">
    <!-- 其他X6配置... -->
    <x6-plugin-node-type type="custom-textbox" />
  </x6-graph>
</template>

<script>
import { Graph } from '@antv/x6';
import { NodeTypes } from '@antv/x6-plugin-node-type';

export default {
  name: 'CustomTextBox',
  props: {
    graphWidth: {
      type: Number,
      required: true
    },
    graphHeight: {
      type: Number,
      required: true
    }
  },
  mounted() {
    this.graph = new Graph({
      container: 'container', // 渲染容器id
      modes: ['drag-node', 'resize-node'],
      autoZoom: false,
      width: this.graphWidth,
      height: this.graphHeight,
    });

    const customNodeType = NodeTypes.register('custom-textbox', {
      draw: (cfg) => {
        // 在这里绘制自定义的文本框，可以使用AntV提供的画布API
        const { cx, cy, width, height } = cfg.position;
        const textConfig = {
          content: cfg.data.content || '',
          x: cx - width / 2,
          y: cy - height / 2,
          style: {
            fill: '#fff',
            lineWidth: 2,
            stroke: '#000',
            fontSize: '14px',
            textAlign: 'center',
            textBaseline: 'middle',
          },
        };
        return this.graph.stage.add('text', textConfig);
      },
      update: (cfg) => {
        // 更新节点位置时更新文本框的位置
        const node = this.graph.getNodeById(cfg.id);
        if (node) {
          const textNode = this.graph.get('text', { id: `${cfg.id}-content` });
          textNode.attr({ x: node.cx - node.width / 2, y: node.cy - node.height / 2 });
        }
      },
      remove: () => {
        // 节点删除时移除文本框
        const textNode = this.graph.get('text', { id: `${cfg.id}-content` });
        if (textNode) {
          textNode.remove();
        }
      },
    });

    // 添加自定义节点类型到图表
    this.graph.use(customNodeType);
  },
  beforeDestroy() {
    this.graph && this.graph.destroy();
  },
};
</script>

然后在你的父组件中使用这个自定义组件，并传入需要的宽度和高度属性：

<template>
  <div>
    <CustomTextBox :graphWidth="800" :graphHeight="600" />
  </div>
</template>

<script>
import CustomTextBox from './CustomTextBox.vue';

export default {
  components: {
    CustomTextBox,
  },
};
</script>