> **G6****流程图自定义配置相关内容** > > **因产品原因，所提供的内置节点无法满足需求，故使用 DOM 自定义节点** > > **这篇文章主要记录，实际使用过程中用到的相关信息及代码。** npm install --save @antv/g6 流程图初始化 ------ ### template ### script const graph = new G6.Graph({ // 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象 container: "workflow", // 指定画布宽度，单位为 'px' width: 500, // 指定画布高度，单位为 'px' height: 500, renderer: "svg", layout: { // 层次布局配置 type: "dagre", // 布局的方向 rankdir: "TB", }, defaultNode: { // 此处为自定义节点的 name type: "dom-node", size: [310, 158], color: "#5B8FF9", style: { fill: "#9EC9FF", lineWidth: 3 }, }, defaultEdge: { // 此处为自定义边的 name type: "flow-line", style: { stroke: "#c2c5cc" }, }, // 指定边是否连入节点的中心 linkCenter: true, // 开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。 fitCenter: true,}); 自定义节点（G6.registerNode） ----------------------- ### 官方 api 示例代码 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) {}, /** * 绘制后的附加操作，默认没有任何操作 * @param {Object} cfg 节点的配置项 * @param {G.Group} group 图形分组，节点中图形对象的容器 */ afterDraw(cfg, group) {}, /** * 更新节点，包含文本 * @override * @param {Object} cfg 节点的配置项 * @param {Node} node 节点 */ update(cfg, node) {}, /** * 更新节点后的操作，一般同 afterDraw 配合使用 * @override * @param {Object} cfg 节点的配置项 * @param {Node} node 节点 */ afterUpdate(cfg, node) {}, /** * 响应节点的状态变化。 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档 * @param {String} name 状态名称 * @param {Object} value 状态值 * @param {Node} node 节点 */ setState(name, value, node) {}, /** * 获取锚点（相关边的连入点） * @param {Object} cfg 节点的配置项 * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点 */ getAnchorPoints(cfg) {}, }, // 继承内置节点类型的名字，例如基类 'single-node'，或 'circle', 'rect' 等 // 当不指定该参数则代表不继承任何内置节点类型 extendedNodeName, ); ### 自定义节点示例代码 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/842da3470cf34a759a9fc77051c645fd~tplv-k3u1fbpfcp-watermark.image?) G6.registerNode( 'dom-node', // 此处名称需填入初始化配置 defaultNode对象下type中 { draw: (cfg: ModelConfig, group: Group) => { return group.addShape('dom', { attrs: { width: cfg.size[0], height: cfg.size[1], // 传入 DOM 的 html，带有原生 onclick 事件 html: `

..... ${cfg.label}

`, }, draggable: true, // 表示允许该图形响应鼠标的拖拽事件 }); }, }, ); ### 注意事项 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b3bade6db2843c9ae11b0f0f1768b7a~tplv-k3u1fbpfcp-watermark.image?) 自定义边（G6.registerEdge） ---------------------- ### 官方 api 示例代码 G6.registerEdge( 'edgeName', { /** * 绘制边，包含文本 * @param {Object} cfg 边的配置项 * @param {G.Group} group 图形分组，边中的图形对象的容器 * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到 */ draw(cfg, group) {}, /** * 绘制后的附加操作，默认没有任何操作 * @param {Object} cfg 边的配置项 * @param {G.Group} group 图形分组，边中的图形对象的容器 */ afterDraw(cfg, group) {}, /** * 更新边，包含文本 * @override * @param {Object} cfg 边的配置项 * @param {Edge} edge 边 */ update(cfg, edge) {}, /** * 更新边后的操作，一般同 afterDraw 配合使用 * @override * @param {Object} cfg 边的配置项 * @param {Edge} edge 边 */ afterUpdate(cfg, edge) {}, /** * 设置边的状态，主要是交互状态，业务状态请在 draw 方法中实现 * 单图形的边仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法 * @param {String} name 状态名称 * @param {Object} value 状态值 * @param {Edge} edge 边 */ setState(name, value, edge) {}, }, 'extendedEdgeName', ); ### 自定义边（添加额外图形）示例代码 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/019946aecd544f77bc76e5a17b673934~tplv-k3u1fbpfcp-watermark.image?) G6.registerEdge("flow-line", { // 绘制边 draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const { style } = cfg; const shape = group.addShape("path", { attrs: { stroke: style.stroke, endArrow: style.endArrow, path: [ ["M", startPoint.x, startPoint.y], ["L", startPoint.x, (startPoint.y + endPoint.y) / 2], ["L", endPoint.x, (startPoint.y + endPoint.y) / 2], ["L", endPoint.x, endPoint.y], ], }, }); return shape; }, // 额外图形部分代码 afterDraw(cfg, group) { // 获取图形组中的第一个图形，在这里就是边的路径图形 const shape = group.get("children")[0]; const { targetNode } = cfg; // 获取路径图形的中点坐标 const midPoint = shape.getPoint(0.5); const { node_type } = targetNode.getModel(); if (midPoint && node_type !== "trigger") { group.addShape("image", { attrs: { x: midPoint.x - 15, y: midPoint.y - 15, width: 30, height: 30, cursor: "pointer", img: add_icon, }, // must be assigned in G6 3.3 and later versions. it can be any value you want name: "add-item", }); } },}); 部署打包遇到的问题 --------- 开发环境正常，正式环境下流程图显示失败报错，可在官方文档，教程->FAQ->Vite+G6 报错看到问题解决方案，链接如下： [https://g6.antv.vision/zh/docs/manual/FAQ/vite-support](https://g6.antv.vision/zh/docs/manual/FAQ/vite-support) ### 相关依赖版本 ### "@antv/g6": "^4.3.7", "vue": "3.2.1", 完结撒花 ✿✿ヽ(°▽°)ノ✿