vue画图组件_vue集成流程图

最近弄了点流程图的相关内容，写个小计（说ji不说吧，文明你我他 (●’◡’●)）, 这种使用的东西一般都是比较枯燥的,所以大概过一眼代码copy就行啦.代码量比较多,比较死的那种所以先贴左边部分的代码和内容,有一点点小小的解释.

先贴个图吧

# npm
$ npm install @antv/x6 --save

x6.antv.vision/zh/docs/tut… 官网连接

在要用到的页面引入就可以了

import { Graph, Shape, Addon } from '@antv/x6'

首先从左边开始

html

<div id="stencil"></div>

// 这里可以的话定义成全局变量会好点, 毕竟说不定那个方法就要使用这些东西.
let stencil = new Addon.Stencil({
    // 这里注释掉的原因如下图
    // title: '流程图',
    // collapsable: true,
    target: graph,
    stencilGraphWidth: 200,
    stencilGraphHeight: 180,
    groups: [
      {
        title: '基础流程图',
        name: 'group1',
      },
    ],
    layoutOptions: {
      columns: 2,
      columnWidth: 80,
      rowHeight: 55,
    }
})
let appendChildTemp = document.getElementById('stencil')
if (appendChildTemp) { 
    appendChildTemp.appendChild(stencil.container)
}

我只需要这个基础流程图就行,其他的不用.

接下来是自定义图形.

这里初始化连接线能连接的点

  const ports = {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: { // 设置隐藏,在通过事件鼠标移动显示
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ],
  }

初始化自定义图形

  Graph.registerNode(
    'custom-polygon',
    {
      inherit: 'polygon',
      width: 66,
      height: 36,
      markup: [
        {
          tagName: 'polygon',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: {
        ...ports,
        // items: [ // 这里是限制连接点多少个的地方
        // {
        // group: 'top',
        // },
        // {
        // group: 'bottom',
        // },
        // ],
      },
    },
    true,
  )


  Graph.registerNode(
    'custom-circle',
    {
      inherit: 'circle',
      width: 45,
      height: 45,
      markup: [
        {
          tagName: 'circle',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: { ...ports },
    },
    true,
  )
      
  Graph.registerNode(
    'custom-rect',
    {
      inherit: 'rect',
      width: 66,
      height: 36,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
        },
        text: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      ports: { ...ports },
    },
    true,
  )

创建节点图形

  const r1 = graph.createNode({
    shape: 'custom-rect',
    label: '开始',
    attrs: {
      body: {
        rx: 20,
        ry: 26,
      },
    },
  })
  const r2 = graph.createNode({
    shape: 'custom-rect',
    label: '过程',
  })
  const r3 = graph.createNode({
    shape: 'custom-rect',
    attrs: {
      body: {
        rx: 6,
        ry: 6,
      },
    },
    label: '可选过程',
  })
  const r4 = graph.createNode({
    shape: 'custom-polygon',
    attrs: {
      body: {
        refPoints: '0,10 10,0 20,10 10,20',
      },
    },
    label: '决策',
  })
  const r5 = graph.createNode({
    shape: 'custom-polygon',
    attrs: {
      body: {
        refPoints: '10,0 40,0 30,20 0,20',
      },
    },
    label: '数据',
  })
  const r6 = graph.createNode({
    shape: 'custom-circle',
    label: '连接',
  })
  stencil.load([r1, r2, r3, r4, r5, r6], 'group1')

控制连接桩显示/隐藏

  const showPorts = (ports, show) => {
    for (let i = 0, len = ports.length; i < len; i = i + 1) {
      ports[i].style.visibility = show ? 'visible' : 'hidden'
    }
  }
  
  // 移入节点
  graph.on('node:mouseenter', () => {
    const container = document.getElementById('orgAndPersonnelContainer') // 这里获取id 是你画板的id
    if (container) {
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports, true)
    }
  })

  // 移出节点
  graph.on('node:mouseleave', () => {
    const container = document.getElementById('orgAndPersonnelContainer') // 这里获取id 是你画板的id
    if (container) {
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports, false)
    }
  })

好啦 左边的到这里就结束啦,剩下的就是画布的实现,不过画布官方也有例子的,所以比较简单就留到下篇啦.