antv/x6_2.0学习使用（三、内置节点和自定义节点）

已于 2023-12-27 16:20:08 修改
阅读量4.9k 收藏 33
点赞数 31
分类专栏： antv/x6 文章标签： 学习 前端 typescript vue.js antv/x6
于 2023-12-27 15:55:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47872719/article/details/135248242
版权

内置节点和自定义节点

一、节点渲染方式

X6 是基于 SVG 的渲染引擎，可以使用不同的 SVG 元素渲染节点和边，非常适合节点内容比较简单的场景。面对复杂的节点， SVG 中有一个特殊的 foreignObject 元素，在该元素中可以内嵌任何 XHTML 元素，可以借助该元素来渲染 HTML、React/Vue/Angular 组件到需要位置，这会给项目开发带来非常大的便利。

  • 在选择渲染方式时推荐：
    • 如果节点内容比较简单，而且需求比较固定，使用 SVG 节点
    • 其他场景，都推荐使用当前项目所使用的框架来渲染节点

注意：

  1. React/Vue/Angular/HTML 渲染方式也存在一些限制，因为浏览器的兼容性问题，有时会出现一些异常的渲染行为。主要表现形式为节点内容展示不全或者节点内容闪烁。可以通过一些方法规避，比如在节点内部元素的 css 样式中不要使用 position:absolute、position:relative、tranform、opacity。
  2. 使用 React/Vue/Angular 渲染时，x6 的版本要和 x6-react-shape/x6-vue-shape/x6-angular-shape 的版本匹配，也就是两个包需要用同一个大版本。比如如果 X6 使用的是 2.x 版本，那么 x6-react-shape/x6-vue-shape/x6-angular-shape 也需要使用 2.x 版本。
  3. x6-react-shape 从 2.0.8 版本以后只支持 react18，如果项目是低于 react18 的版本，就要把 x6-react-shape 的版本锁定在 2.0.8。
  • 节点和边都有共同的基类 Cell，除了从 Cell 继承属性外，还支持以下选项。
属性名类型默认值描述
xnumber0节点位置 x 坐标，单位为 px
ynumber0节点位置 y 坐标，单位为 px
widthnumber1节点宽度，单位为 px
heightnumber1节点高度，单位为 px
anglenumber0节点旋转角度
graph.addNode({
  shape: 'rect',
  x: 100,
  y: 40,
  width: 100,
  height: 40,
})
二、内置节点

使用 shape 指定节点的图形，shape 的默认值为 rect。X6 内置节点与 shape 名称对应关系如下表

shape 名称描述
rect矩形
circle圆形
ellipse椭圆
polygon多边形
polyline折线
path路径
image图片
htmlHTML 节点，使用 foreignObject 渲染 HTML 片段。
// rect
graph.addNode({
    shape: "rect",
    x: 40,
    y: 40,
    width: 80,
    height: 40,
    label: "rect",
});

// circle
graph.addNode({
    shape: "circle",
    x: 180,
    y: 40,
    width: 40,
    height: 40,
    label: "circle",
});

// ellipse
graph.addNode({
    shape: "ellipse",
    x: 280,
    y: 40,
    width: 80,
    height: 40,
    label: "ellipse",
});

// path
graph.addNode({
    shape: "path",
    x: 420,
    y: 40,
    width: 40,
    height: 40,
    // https://www.svgrepo.com/svg/13653/like
    path: "M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z",
    label: "path",
});

// polygon
graph.addNode({
    shape: "polygon",
    x: 60,
    y: 150,
    width: 40,
    height: 40,
    points: "100,10 40,198 190,78 10,78 160,198",
    label: "polygon",
    attrs: {
        body: {
            fill: "#fff",
            stroke: "#8f8f8f",
            strokeWidth: 1,
        },
        label: {
            refX: 0.5,
            refY: "100%",
            refY2: 4,
            textAnchor: "middle",
            textVerticalAnchor: "top",
        },
    },
});

// polyline
graph.addNode({
    shape: "polyline",
    x: 180,
    y: 150,
    width: 40,
    height: 40,
    label: "polyline",
    attrs: {
        body: {
            refPoints: "0,0 0,10 10,10 10,0",
        },
        label: {
            refX: 0.5,
            refY: "100%",
            refY2: 4,
            textAnchor: "middle",
            textVerticalAnchor: "top",
        },
    },
});

// image
graph.addNode({
    shape: "image",
    x: 290,
    y: 150,
    width: 60,
    height: 40,
    imageUrl:
        "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
    label: "image",
    attrs: {
        label: {
            refX: 0.5,
            refY: "100%",
            refY2: 4,
            textAnchor: "middle",
            textVerticalAnchor: "top",
        },
    }
});

以下是效果图
在这里插入图片描述

三、定制节点

实际上是从基础节点派生（继承）出我们自己的节点，并覆盖基类的某些选项和方法。
可以通过 markup 和 attrs 来定制节点的形状和样式，markup 可以类比 HTML，attrs 类比 CSS。具体可以仔细阅读 markup 和 attrs 文档。

以 Rect 为例：

  1. 继承
import { Node } from '@antv/x6'

class Rect extends Node {
  ......
}

  1. 配置

    调用继承的静态方法 config(options) 来配置节点选项的默认值、自定义选项和自定义属性，最常用选项的是通过 markup 来指定节点默认的 SVG/HTML 结构，通过 attrs 来指定节点的默认属性样式

    名称类型是否必选默认值说明
    propHooksFunction否undefined自定义选项钩子
    attrHooksObject否undefined自定义属性钩子
    …othersObject节点选项
Rect.config({
  width: 100,
  height: 40,
  markup: [  //  定义了节点由 <rect> 和 <text> 两个 SVG 元素构成，并分别指定了 body 和 label 两个选择器，接着就可以在 attrs 中通过这两个选择器来指定节点的默认样式。
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
  attrs: {
    body: {
      fill: '#ffffff',
      stroke: '#333333',
      strokeWidth: 2,
    },
    label: {
      fontSize: 14,
      fill: '#333333',
      refX: '50%',
      refY: '50%',
      textAnchor: 'middle',
      textVerticalAnchor: 'middle',
    },
  },
  // 通过钩子将自定义选项 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { label, ...others } = metadata
    if (label) {
      ObjectExt.setByPath(others, 'attrs/text/text', label)
    }
    return others
  },
})

  1. 注册

    调用 Graph 的静态方法 registerNode 来注册节点，注册以后就可以像使用内置节点那样来使用节点。

Graph.registerNode(name: string, cls: typeof Node, overwrite?: boolean)
参数名类型是否必选默认值说明
nameString是注册的节点名
clstypeof Node是节点类，直接或间接继承 Node 的类
overwriteBoolean否false重名时是否覆盖，默认为 false 不覆盖（重名时报错）

例如，注册名为 ‘rect’ 的节点。

Graph.registerNode('rect', Rect)

注册以后，可以像下面这样来使用。

graph.addNode({
  shape: 'rect',
  x: 30,
  y: 40,
})
  • 便捷方法：

同时实现定义和注册节点。

Graph.registerNode(name: string, options: Object, overwrite?: boolean)
参数名类型是否必选默认值说明
nameString是注册的节点名
optionsObject是选项
overwriteBoolean否false重名时是否覆盖，默认为 false 不覆盖（重名时报错）

通过 options.inherit 来指定继承的基类，默认值为 Node 类，支持字符串或节点类，当 options.inherit 为字符串时将自动从已注册的节点中找到对应的节点作为基类，options 的其他选项与 define 方法一致。当 options.constructorName 类名缺省时，第一个参数 name 的大驼峰形式（CamelCase）也将作为自定义节点的类名。

const ports = {
  groups: {
    top: {
      position: "top",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    bottom: {
      position: "bottom",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
  },
  items: [
    {
      group: "top",
    },
    {
      group: "right",
    },
    {
      group: "bottom",
    },
    {
      group: "left",
    },
  ],
};

Graph.registerNode(
  "custom-rect",
  {
    inherit: "rect",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: { ...ports },
  },
  true
);

Graph.registerNode(
  "custom-polygon",
  {
    inherit: "polygon",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: {
      ...ports,
      items: [
        {
          group: "top",
        },
        {
          group: "bottom",
        },
      ],
    },
  },
  true
);

Graph.registerNode(
  "custom-circle",
  {
    inherit: "circle",
    width: 45,
    height: 45,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: { ...ports },
  },
  true
);

Graph.registerNode(
  "custom-image",
  {
    inherit: "rect",
    width: 52,
    height: 52,
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "image",
      },
      {
        tagName: "text",
        selector: "label",
      },
    ],
    attrs: {
      body: {
        stroke: "#5F95FF",
        fill: "#5F95FF",
      },
      image: {
        width: 26,
        height: 26,
        refX: 13,
        refY: 16,
      },
      label: {
        refX: 3,
        refY: 2,
        textAnchor: "left",
        textVerticalAnchor: "top",
        fontSize: 12,
        fill: "#fff",
      },
    },
    ports: { ...ports },
  },
  true
);

除此方法外还可以使用另外一种静态方法 define 来自定义节点，具体可查看自定义节点

四、自定义HTML节点
  1. 渲染节点

X6 默认内置 HTML 渲染能力

import {  Shape } from '@antv/x6'

Shape.HTML.register({
  shape: 'custom-html',
  width: 160,
  height: 80,
  html() {
    const div = document.createElement('div')
    div.className = 'custom-html'
    return div
  },
})

graph.addNode({
  shape: 'custom-html',
  x: 60,
  y: 100,
})
  1. 节点更新

在注册节点的时候，提供一个 effect，字段，是当前节点的 prop 数组，当 effect 包含的 prop 有变动时，会重新执行 html 方法，返回新的 dom，更新节点内容。

Shape.HTML.register({
  shape: 'custom-html',
  width: 160,
  height: 80,
  effect: ['data'],
  html(cell) {
    const { color } = cell.getData()
    const div = document.createElement('div')
    div.className = 'custom-html'
    div.style.background = color
    return div
  },
})
五、 自定义React/Vue/Angular节点

可阅读官方文档 自定义React节点、自定义Vue节点、自定义Angular节点

bigHead-
关注
  • 31
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
antv x6自定义节点(使用vue渲染节点）
web18296061989的博客
03-05 8188
1、安装@antv/x6-vue-shape # npm npm install @antv/x6-vue-shape # yarn yarn add @antv/x6-vue-shape # 在 vue2 下还需要安装 @vue/composition-api yarn add @vue/composition-api --dev 主文件引入@antv/x6-vue-shape import "@antv/x6-vue-shape"; 安装并应用该包后，指定节点的shape为vue-shape，并
react antv/X6可视化工具超详细入门
热门推荐
xye1230的博客
03-18 1万+
描述之前我想先吐槽一下这个X6的官网，可能原生html、JS还行，但是框架玩家是真看不懂，我个人而言，无法灵活运用到项目中，幸好后面有带佬的代码，不得不说质量雀食高 开整！ 首先我们的目的是画一个这样的图表 看到这个树状图，我们想要搞清楚，我们需要那几样来完成 - 不是显示单独一个数据，所以必然要自定义节点 - 第一先确定数据格式，从后台穿过来的数据里面不单是数据，还需要一组头尾的连接字段来确认边，如果已经大致看过X6的可视化逻辑，自然明白边的头尾是什么逻辑了 - 其次自定义节点，自定义节点需要从创
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
React中antv X6 2.0的使用体验（含demo）
m0_65104145的博客
08-15 3174
本次在React中使用antv X6 2.0的功能包括：1、节点右键菜单；2、节点自动布局；3、根据列表动态渲染节点；4、节点之间的连线；5、模版引用时的预览功能；6、使用拖拽组件添加节点（包含2种样式 及群组的添加）；
X6节点如何根据内容自适应高度
最新发布
单飞吧的博客
08-01 295
当我使用这种方法时，是因为在没有找到其他解决方案的情况下，不得不采取这种方式。如果您有更有效的方法，请告诉我如何改进。使用的方法是，把内容放入一个类似的div容器中，计算出div的宽度和高度，再给这个节点的宽度和高度重新赋值。
antv/x6 自定义html节点并且支持动态更新节点内容
.伊泽瑞尔
11-06 4171
antv/x6 自定义html节点并且支持动态更新节点内容
antv/x6自定义节点+小地图+复制/删除节点+拖拽生成节点
SunFlower914的博客
01-26 3821
"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包。"@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包。"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包。"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包。9、保存/设置节点数据。
antvX6 - Vue自定义节点，并实现多种画布操作，拖拽、缩放、连线、双击、检索等等
xiaoleiv9的博客
03-01 3118
一个节点！
「AntV」X6 自定义vue节点(vue3)
qq22885633008的博客
06-03 1088
vue节点内部有一个复选框，用于勾选节点，选中后要给当前节点添加一个是否选中的属性，由于节点的数据更新只能在父页面进行更新，所以必须得把复选框绑定的值传递给父页面。事件的时候不能触发vue节点的点击事件，也就是两边的事件都是独立的，谁也不能影响谁，而且vue节点内的点击事件在点击的时候还得获取当前节点信息。采用群里小伙伴的方案，阻止节点鼠标按下或者鼠标抬起的事件，这样可以实现在点击vue节点的时候不触发节点本身的。事件，虽然可以实现阻止的功能，但是不好操作节点的数据，我是需要获取当前节点的数据的。
vue3+antv x6自定义节点样式
qq_40934617的博客
08-11 5149
vue3+antv x6自定义节点样式
“Error: Ensure the container of the graph is specified and valid“：antv-x6报错
weixin_44213308的博客
12-16 5841
antv-X6快速上手报错： 发现原因是因为： 正确的代码如下： <template> <div id="container"> </div> </template> <script> import { Graph } from '@antv/x6'; const data = { // 节点 nodes: [ { id: 'node1', // String，可选，节点的唯一标识
antv/x6封装vue2.0源码
05-13
通过深入学习和实践这个项目，你不仅可以掌握 AntV X6 与 Vue 2.0 的结合使用，还能提升在图形编辑器开发上的技能。这将对你的职业生涯大有裨益，无论是构建业务流程图、网络拓扑图还是其他类型的图形应用，你都能...
vue中使用antv/x6编写自定义流程
04-14
实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和事件系统实现节点、连线、连接桩的...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图...
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
AntV X6支持自定义节点、边、布局，以及强大的动画效果，这在绘制复杂的工厂工艺路径流程图时显得尤为关键。 在前端工厂工艺路径流程图的绘制中，AntV X6提供了强大的图形绘制能力。通过定义不同的节点类型，可以...
使用@antv/x6-vue-shape 遇到的问题
贵林之恋的博客
08-18 2154
最近用@antv/x6开发一个功能，遇到的坑太多了，心累啊。使用npm i 安装的vue-demi。
Vue2项目中使用AntV X6 自定义节点绘制组织树
weixin_45792972的博客
11-03 3838
Vue2项目中使用AntV X6 自定义节点绘制组织树。
antv/x6 多层嵌套下自动拓展父节点
bighead的博客
02-02 1557
自动扩展父节点自动扩展父节点。
antv/x6_2.0学习使用（六、事件系统）
bighead的博客
01-08 2786
/ 表示一个删除按钮，点击时删除该节点image: {width: 20,},});可以通过绑定的事件名 node:delete 或通用的 cell:customevent、node:customevent、edge:customevent 事件名来监听。});});功能演示。
antv/x6 拖动连接线
12-21
在antv/x6中，可以通过拖动来连接两个节点。下面是一个示例代码： ```javascript import { Graph, Node, Edge } from '@antv/x6'; // 创建画布 const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600, }); // 创建节点 const node1 = graph.addNode({ x: 100, y: 100, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 1', }, }, }); const node2 = graph.addNode({ x: 300, y: 200, width: 80, height: 40, shape: 'rect', attrs: { body: { fill: '#ffffff', stroke: '#000000', }, label: { text: 'Node 2', }, }, }); // 创建连接线 const edge = graph.addEdge({ source: node1, target: node2, attrs: { line: { stroke: '#000000', }, }, }); // 开启连接线的拖动交互 graph.addEdgeTools(edge, [ { name: 'source-arrowhead', }, { name: 'target-arrowhead', }, { name: 'vertices', }, ]); // 开启节点的拖动交互 graph.addNodeTools(node1, [ { name: 'boundary', }, ]); graph.addNodeTools(node2, [ { name: 'boundary', }, ]); ``` 这段代码创建了一个画布，并在画布上添加了两个节点和一个连接线。通过开启连接线和节点的拖动交互，可以实现拖动连接线的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bigHead-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值