Antv/X6<图编辑引擎>

1618558278291.jpg

• 你可以直接查看 官方文档 ,文档写的很棒;
• 你也可以简单听我BBLL，顺便告诉你我的亲身经历，和常用参数；

---

遇到问题：

当你遇到下面这几种图形编辑时，你可能会想：
这不是要专门搞一套js代码吗，canvas我也不熟练啊，这工程量也太大了，放弃吧！！跟老板说这个需求做不了

2021-04-16 10-46-28.gif

当然x1，起初我也是这么想的，而且我也尝试了自己用canvas写一个这个东西～
当然x2，写起来又是一码事了，什么小问题各种层出不穷，然后果断弃坑～
当然x3,我可以百度找现成的代码啊，网上那么多插件啥的，后来才发现鱼目混杂，根本无从下手，万一遇到问题找谁？
♂️♂️所以，在最后朋友(朋友多还是有那么点用的,致敬 木兄)的推荐下，还是遇到了它 ------ Antv/X6!!

步入正题：

2021-04-16 10-32-55.gif

上图是我结合自身项目需求+ Vue，制作的类似于一个工厂智能小车工作线路图，没听懂的，也可以忽略这句话～
官方文档入口
常用参数：

      //创建地图
      this.graph = new Graph({
        snapline: true, //对齐线
        history: {
          enabled: true, //历史记录
          ignoreChange: true //ignoreChange 是否忽略属性变化
        },
        panning: true, //支持平移拖拽
        container: document.getElementById('container'),
        width: window.innerWidth,
        height: window.innerHeight,
        background: {
          color: '#fffbe6' // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true // 渲染网格背景
        },
        connecting: {
          allowPort: true, //是否允许边链接到链接桩
          allowEdge: false, //是否允许边链接到另一个边
          allowNode: false, //是否允许边链接到节点（非节点上的链接桩)
          allowLoop: false, //是否允许创建循环连线，即边的起始节点和终止节点为同一节点
          allowMulti: false, //是否允许在相同的起始节点和终止之间创建多条边
          allowBlank: false, //是否允许连接到画布空白位置的点
          // 自动吸附
          snap: {
            radius: 20
          }
        }
      })
//加载地图数据
this.graph.fromJSON(this.data)

右上角工具栏:

image.png

自己写的，主要包含 撤销，重做,创建节点,图形放大,图形缩小,重置视图,数据导出；

//撤销操作
this.graph.undo()

//重做
this.graph.redo()

//创建节点
 const rect = this.graph.addNode({
  shape: 'rect', // 指定使用何种图形，默认值为 'rect'
  ...
})

//地图放大缩小
 this.graph.zoom(0.1)
 this.graph.zoom(-0.1)

//重置视图
this.graph.centerContent() //画布居中
this.graph.zoom(0)

//序列化/反序列化 数据格式
// https://antv-x6.gitee.io/zh/docs/tutorial/intermediate/serialization
// graph.toJSON() 方法来导出图中的节点和边
this.graph.toJSON()

选中和工具Tools:

2021-04-16 11-13-07.gif

使用工具 Tools文档
节点和边选中代码示例
节点和边选中——事件属性参考文档

//在创建节点的时候，直接加入删除按钮tools
  const rect = this.graph.addNode({
          shape: 'rect', // 指定使用何种图形，默认值为 'rect'
          ...
          attrs: {
          ...
          },
         //使用工具
          tools: [
            {
              name: 'button-remove', // 工具名称
              args: { x: 5, y: 5 } // 工具对应的参数
            }
          ]})

案例代码：