前言

通过前两篇文章，我们学会了怎么创建节点和拖拽生成图像，今天我们继续学习边及删除节点，保存节点内容吧！

创建边 Edge

new Shape.Edge({
  attrs: {
    line: {
      stroke: '#1890ff',
      strokeWidth: 1,
      targetMarker: {
        name: 'classic',
        size: 8
      },
      strokeDasharray: 0, //虚线
      style: {
        animation: 'ant-line 30s infinite linear',
      },
    },
  },
  label: {
    text:''
  }
})

router 路由

通过注册的方式注册到X6，使用时只需要提供路由的名称 name 和参数即可（参数可省略）

路由	描述
normal	默认路由，原样返回路径点。
orth	正交路由，由水平或垂直的正交线段组成。
oneSide	受限正交路由，由受限的三段水平或垂直的正交线段组成。
manhattan	智能正交路由，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。
er	实体关系路由，由 `Z` 字形的斜角线段组成。

Connector 连接器

连接器将起点、路由返回的点、终点加工为 <path> 元素属性，决定了边渲染到画布后的样式。

连接器	描述
normal	简单连接器，用直线连接起点、路由点和终点。
smooth	平滑连接器，用三次贝塞尔曲线线连接起点、路由点和终点。
rounded	圆角连接器，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。
jumpover	跳线连接器，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。

attrs 定制样式

删除节点

removeCells
- 删除多个节点/边，返回删除的节点或边的数组，可指定删除某个节点/边。
clearCells
- 清空画布。

示例：

// 清空画布
const cell = this.graph.getSelectedCells()
this.graph.clearCells(cell)

// 删除节点
const cell = this.graph.getSelectedCells()
this.graph.removeCells(cell)

保存节点

将画布上生成的图像保存为Json文件

saveToJson(){
    this.$nextTick(()=>{
      const getJson = this.graph.toJSON()
      let data = JSON.stringify(getJson)
      let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(data)
      let link = document.createElement("a")
      link.href = uri
      link.download = "save.json"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
 },

将画布上生成的图像保存为图片

// 保存png
saveToPNG(){
  this.$nextTick(()=>{
    this.graph.toPNG((dataUri) => {
    // 下载
      DataUri.downloadDataUri(dataUri, '资产拓扑图.png')
    },{
      backgroundColor: 'white',
      padding: {
        top: 50,
        right: 50,
        bottom: 50,
        left: 50
      },
      quality: 1,
      copyStyles:false
    })
  })
},

结语

通过Antv X6 流程图在线编辑器三篇系列文章，现在基本上可以自己搭建一个在线编辑器啦，明天将会补充一些小细节及右侧编辑栏的制作，一起加油学习吧(ง •_•)ง

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

前言

创建边 Edge

删除节点

保存节点

结语