前言

上一次我们学习了如何创建容器和创建画布，今天我们具体来学习一下创建节点和拖拽生成图像吧！

官网：Antv/X6

项目代码: vue-antvx6

创建节点

使用 graph.createNode 创建节点。

基础选项

shape 指定节点/边的图形

名称对应关系如下表：

shape 名称	描述
rect	矩形
circle	圆形
ellipse	椭圆
polygon	多边形
polyline	折线
path	路径
image	图片
cylinder	圆柱

attrs 定制节点样式。通常用于定义那些不变的通用属性，这些默认样式也可以在实例化节点时被覆盖，但是X6的自定义属性在这里不可用。

创建节点/边后，我们可以调用实例上的 attr() 方法来修改节点属性样式。

当传入的属性值为 null 时可以移除该属性。
ports 连接桩

创建节点代码示例

const node = 
    type === 'Rect'
    ? graph.createNode({
      width: 100,
      height: 60,
      attrs: {
        label: {
          text: '正方形节点',
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -10,
            height: -10,
            ellipsis: true,
          },
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff',
        }
      },
      ports: ports
    })
  : type === 'Circle'?graph.createNode({
      shape: 'ellipse',
      width: 100,
      height: 100,
      attrs: {
        label: {
          text: '圆形节点',
          fill: '#000000',
          fontSize: 14,
          textWrap: {
            width: -20,
            height: -10,
            ellipsis: true,
          },
        },
        body: {
          stroke: '#000000',
          strokeWidth: 1,
          fill: '#ffffff',
        }
      },
      ports: ports
    }) : ''

拖拽生成图像

Dnd 是 Addon 命名空间中的一个插件，提供了基础的拖拽能力。

首先，需要创建一个Dnd 的实例，并写入将要拖拽的元素节点

import { Addon } from '@antv/x6'

const dnd = new Addon.Dnd({ target:graph })

当按下鼠标时，调用start方法开始拖拽

选项	说明
node	开始拖拽的节点。
e	鼠标事件。

dnd.start(node, e)

实现

画布，节点都已经创建好了，拖拽方法我们也学会了，那就开始编辑头部工具栏，让我们来试试拖拽节点吧~

在views目录下新建一个methods.js，用来存放创建的节点及实现拖拽功能。在Vue文件内引用该js文件

头部工具栏效果图及节点部分代码：

html

<div class="operating">
    <div class="btn-group">
      <div class="btn" title="圆形节点" @mousedown="startDrag('Circle',$event)">
        <i class="iconfont icon-circle"></i>
      </div>
      <div class="btn" title="正方形节点" @mousedown="startDrag('Rect',$event)">
        <i class="iconfont icon-square"></i>
      </div>
      <div class="btn" title="条件节点">
        <i class="iconfont icon-square rotate-square" @mousedown="startDrag('polygon',$event)"></i>
      </div>
      <div class="btn-group_tips" v-if="showTips">
        拖拽生成</br>资产拓扑图形
      </div>
    </div>
</div>

<script>
import '@antv/x6-vue-shape'
import {startDragToGraph} from './Graph/methods.js'

export default {
    data() {
        graph: '', // 该元素具体内容请看教程（一）
    },
    methods: {
        startDrag(type, e) {
            startDragToGraph(this.graph, type, e)
        }
    }
}
</script>

methods.js

import '@antv/x6-vue-shape';
import { Addon } from '@antv/x6';
// 拖拽生成四边形或者圆形

export const startDragToGraph  = (graph, type, e) => {
    const node = 
    type === 'Rect' ? graph.createNode ({ // 此处请粘贴上面创建节点代码 }) : ''
    const dnd = new Addon.Dnd({target:graph})
    dnd.start(node,e)
}

以上，就可以实现将节点拖拽到页面上啦！

结语

拖拽已经搞定啦，明天我们继续学习关于连线，删除节点和保存节点的内容吧 (ง •_•)ง

Vue + AntV X6 流程图在线编辑器（二）

前言

创建节点

基础选项

创建节点代码示例

拖拽生成图像

实现

结语