Vue.js 使用AntV X6的示例步驟

Posted on by

0x0 前言

因為項目用到流程圖，並且需求也算是不詳細，所以選擇比較靈活的 x6 圖形編輯器作為流程圖編輯器，從文檔來看不算復雜，這邊就是作為參考教程。

Antv X6 文檔

0x1 安裝

根據教程提示安裝 x6 依賴即可，然後新建個容器進行實例化：

<div ref="containerRef" class="area-center-container" />
const data = {
  // 節點
  nodes: [
    {
      id: 'node1', // String，可選，節點的唯一標識
      x: 40,       // Number，必選，節點位置的 x 值
      y: 40,       // Number，必選，節點位置的 y 值
      width: 80,   // Number，可選，節點大小的 width 值
      height: 40,  // Number，可選，節點大小的 height 值
      label: 'hello', // String，節點標簽
    },
    {
      id: 'node2', // String，節點的唯一標識
      x: 160,      // Number，必選，節點位置的 x 值
      y: 180,      // Number，必選，節點位置的 y 值
      width: 80,   // Number，可選，節點大小的 width 值
      height: 40,  // Number，可選，節點大小的 height 值
      label: 'world', // String，節點標簽
    },
  ],
  // 邊
  edges: [
    {
      source: 'node1', // String，必須，起始節點 id
      target: 'node2', // String，必須，目標節點 id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, // 網格大小 10px
      visible: true // 渲染網格背景
    },
    snapline: {
      enabled: true, // 對齊線
      sharp: true
    },
    scroller: {
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  // 畫佈居中
  graph.centerContent()

  graph.fromJSON(data)
}

就這樣最簡單例子實現瞭，上面不同的參數請參考文檔對應的解釋。

0x2 節點側邊欄

根據文檔的 stencil 例子，可以簡化很多代碼量，直接用封裝好的業務就行瞭，和上面一樣直接寫個容器實例化即可：

<el-aside ref="stencilRef" class="area-left" />
this.stencil = new Stencil({
    title: '流程節點側邊欄',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: '流程圖節點',
            collapsable: false
          }
        ],
    getDropNode: node => {
        let cloneNode = node.clone()
        switch (node.shape) {
            case 'rect':
                cloneNode = new RectShape()
                break
            case 'circle':
                cloneNode = new CircleShape()
                break
            case 'polygon':
                cloneNode = new PolylineShape()
                break
        }
        cloneNode.updateInPorts(graph)
        return cloneNode
    }
})
// 加載節點
this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')

0x3 整合例子

在線：https://codesandbox.io/s/icy-meadow-rqihx

以上就是Vue.js 使用Antv X6的示例步驟的詳細內容，更多關於Vue.js 使用 Antv X6的資料請關註WalkonNet其它相關文章！

推薦閱讀：