antv x6 添加标尺vue项目

要在Vue项目中添加AntV X6标尺，可以按照以下步骤操作：

1. 安装AntV X6库，可以使用npm或yarn进行安装：

npm install @antv/x6 --save

或者

yarn add @antv/x6

2. 在Vue组件中引入AntV X6库：

import { Graph, Edge, Node, Point } from '@antv/x6'

3. 在Vue组件的mounted或created函数中，创建一个Graph实例：

mounted() {
  const container = document.getElementById('container')
  const graph = new Graph({
    container,
    width: container.offsetWidth,
    height: container.offsetHeight,
    gridSize: 10,
    drawGrid: true,
    background: {
      color: '#f5f5f5',
    },
  })
}

4. 在Graph实例中添加标尺：

mounted() {
  const container = document.getElementById('container')
  const graph = new Graph({
    container,
    width: container.offsetWidth,
    height: container.offsetHeight,
    gridSize: 10,
    drawGrid: true,
    background: {
      color: '#f5f5f5',
    },
    snapline: true, // 添加吸附线
    scroller: {
      enabled: true,
      pageVisible: true,
      pageBreak: false,
      pannable: true,
    },
  })

  // 添加横向标尺
  const rulerX = new Node({
    shape: 'path',
    data: 'M 0 0 L 10000 0',
    attrs: {
      stroke: '#ccc',
      'stroke-width': 1,
    },
  })
  const rulerXNode = graph.addNode({
    x: 0,
    y: 0,
    width: 10000,
    height: 0,
    nodeType: 'rulerX',
    zIndex: 1,
    attrs: {
      body: {
        stroke: 'none',
        fill: 'none',
      },
    },
  })
  rulerXNode.appendChild(rulerX)

  // 添加纵向标尺
  const rulerY = new Node({
    shape: 'path',
    data: 'M 0 0 L 0 10000',
    attrs: {
      stroke: '#ccc',
      'stroke-width': 1,
    },
  })
  const rulerYNode = graph.addNode({
    x: 0,
    y: 0,
    width: 0,
    height: 10000,
    nodeType: 'rulerY',
    zIndex: 1,
    attrs: {
      body: {
        stroke: 'none',
        fill: 'none',
      },
    },
  })
  rulerYNode.appendChild(rulerY)
}

5. 在Vue组件的template中添加容器：

<template>
  <div id="container"></div>
</template>

这样就可以在Vue项目中添加AntV X6的标尺了。