流程画布开发技术方案归档(G6)

2023-12-14 06:15:24

🎨 在理想的最美好世界中,一切都是为最美好的目的而设。 —— 伏尔泰

如果可以实现记得点赞分享,谢谢老铁~

一、技术选型

?从可维护性和可拓展性出发

?基本满足

1:链接: https://github.com/hukaibaihu/vue-org-tree

?线条用canvas绘画,其他元素用HTML实现。

2:https://segmentfault.com/a/1190000021972969

?便于后期灵活拓展,优先选择

3: http://antv-2018.alipay.com/zh-cn/g6/3.x/index.html

二、Graph G6

创建一个 G6 的关系图仅需要下面几个步骤:

1.创建关系图的 HTML 容器;

2.数据准备;

3.创建关系图;

4.配置数据源,渲染。

Step 1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器,通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签,然后将图绘制在其中。

HTML

Step 2 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点(nodes)和边(edges)字段,分别用数组表示:

const data = {

  // 点集

  nodes: [{

    id: 'node1', // String,该节点存在则必须,节点的唯一标识
    
    x: 100,      // Number,可选,节点位置的 x 值
    
    y: 200       // Number,可选,节点位置的 y 值

  },{

    id: 'node2', // String,该节点存在则必须,节点的唯一标识
    
    x: 300,      // Number,可选,节点位置的 x 值
    
    y: 200       // Number,可选,节点位置的 y 值

 }],

  // 边集

  edges: [{

    source: 'node1', // String,必须,起始点 id
    
    target: 'node2'  // String,必须,目标点 id

  }]

};

注意

?nodes 数组中包含节点对象,唯一的 id 是每个节点对象中必要的属性,x、 y 用于定位;

?edges 数组中包含边对象,source 和 target 是每条边的必要属性,分别代表了该边的起始点 id 与 目标点 id。

?点和边的其他属性参见链接:G6 的内置节点和边。

Step 3 创建关系图

创建关系图(实例化)时,至少需要为图设置容器、宽和高:

const graph = new G6.Graph({

  container: 'mountNode',  // String | HTMLElement,必须,在 Step 1 中创建的容器 id 或容器本身

  width: 800,              // Number,必须,图的宽度

  height: 500              // Number,必须,图的高度

});

Step 4 配置数据源,渲染

graph.data(data);  // 读取 Step 2 中的数据源到图上

graph.render();    // 渲染图

最终的结果
在这里插入图片描述

三、项目应用

如何自定义节点,自定义样式?

第一种:通过 图形 Shape 内置节点类型自定义节点

?会按照addShape顺序来解析节点


G6.registerNode(

  'nodeName',

  {

    options: {
    
      style: {},
    
      stateStyles: {
    
        hover: {},
    
        selected: {},
    
      },
    
    },
    
    /**
    
     * 绘制节点,包含文本
    
     * @param  {Object} cfg 节点的配置项
    
     * @param  {G.Group} group 图形分组,节点中图形对象的容器
    
     * @return {G.Shape} 返回一个绘制的图形作为 keyShape,通过 node.get('keyShape') 可以获取。
    
     * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
    
     */
    
    draw:(cfg, group) => {  
    
        // 最外面的那层
    
        group.addShape('rect', {
    
          attrs: {
    
              x: 0,
    
              y: 0,
    
              width: 125,
    
              height: 40,
    
              fill: cfg.style.fill, // 填充色
    
              stroke: '', // 边框
    
              radius: 8
    
           },
    
          // must be assigned in G6 3.3 and later versions. it can be any value you want
    
          name: 'rect-shape',
    
          zIndex: 1,
    
        });
    
        // 里面的那层
    
        group.addShape('rect', {
    
          draggable: true,
    
          attrs: {
    
              x: 5,
    
              y: 0,
    
              width: 120,
    
              height: 40,
    
              fill: '#fff', // 填充色
    
              stroke: '', // 边框
    
              radius: 6
    
            }
    
          });
    
         // 文字
    
         group.addShape('text', {
    
            attrs: {
    
              // textBaseline: 'center',
    
              y: 25,
    
              x: 24,
    
              lineHeight: 10,
    
              text: cfg.label,
    
              fill: '#000'
    
            }
    
         });
    
    },

  },

  // 继承内置节点类型的名字,例如基类 'single-node',或 'circle', 'rect' 等

  // 当不指定该参数则代表不继承任何内置节点类型

  extendedNodeName,

);

第二种:使用 DOM 自定义节点

SVG 与 DOM 图形在 V3.3.x 中不支持。 仅在 Graph 的 renderer 为 ‘svg’ 时可以使用 DOM 自定义节点。

?? 注意:

?只支持原生 HTML DOM,不支持各类 react、vue 组件;

?使用 ‘dom’ 进行自定义的节点或边,不支持 G6 的交互事件,请使用原生 DOM 的交互事件;

?在 Safari 中,若 dom 节点被设置了 position:relative,将会导致渲染异常。Issus。



G6.registerNode(
  'dom-node',
  {

    draw: (cfg: ModelConfig, group: Group) => {
    
      const shape = group.addShape('dom', {
    
        attrs: {
    
          x: 0,
    
          y: 0,
    
          width: 100,
    
          height: 24,
    
          html: `
    
            <div id=${cfg.id} class='dom-node' style="background-color: #fff; border: 2px solid red; border-radius: 5px; width: 300px; height: 200px; display: flex;">
    
              <div style="height: 100%; width: 33%; background-color: #CDDDFD">
    
                <img alt="" style="line-height: 100%; margin-left: 7px;" src="https://xxxx" width="20" height="20" />
    
              </div>
    
              <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
    
            </div>`
    
        }
    
      });
    
      return shape;
    
    },

  },

  'single-node',

);

第三种:使用类 JSX 语法定义 G6 节点

在 G6 3.7.0 及以后的版本中,用户以使用类似 JSX 的语法来定义节点。只需要在使用 G6.registerNode 自定义节点时,将第二个参数设置为字符串或一个返回值为 string 的 function。

推荐用法

?在最外层包裹 group 标签,保证节点里面图形树结构完整

?字符串最好使用单引号包裹,以免遇到解析错误

?style 中随 node 变化的变量推荐使用 ${} 的模板语法加入

?图形内的相对定位推荐使用 marginTop 和 marginLeft 进行设置,x 与 y 会破坏层级关系定位

?如果涉及到需要横向排列的元素,在上一个元素使用next: inline来实现下一个元素跟随在上个元素后方

import { groupXML } from '../xml/groupXML.js'

G6.registerNode('rect-xml', {

    jsx: groupXML

 })


export const rootXML = (cfg) =>`

   <rect style={{

        width: 520,
    
        height: 40,
    
        textAlign: 'center',
    
        fill:  ${cfg.account_type == '' ? cfg.rootTitleColor : '#2D8CF0'},
    
        radius: [10, 10, 0, 0],
    
        name: 'rootHeader'
    
      }}>
    
        <text style={{
    
          marginTop: 10,
    
          marginLeft: 230,
    
          fontWeight: '500',
    
          fontSize: '16',
    
          fill: '#FFFFFF' }}> ${cfg.nameHeader}</text>

  </rect>`

第四种:使用React直接定义节点

下载依赖安装包

npm install @antv/g6-react-node

最终的视觉

在这里插入图片描述

收工!谢谢老铁们的点赞收藏~

文章来源:https://blog.csdn.net/Gas_station/article/details/134851998
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。