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

news2025/1/21 18:35:33

内置节点和自定义节点

一、节点渲染方式

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节点

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1344414.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MybatisPlus关于${ew.customSqlSegment},${ew.sqlSegment},${ew.sqlSelect},${ew.sqlSet}

MybatisPlus关于${ew.customSqlSegment},${ew.sqlSegment},${ew.sqlSelect},${ew.sqlSet}

Wrapper中 ${ew.customSqlSegment} 是where 条件 ${ew.sqlSegment} 只有条件 ${ew.sqlSelect}是指查询的字段,如果需要使用 ${ew.sqlSet}是在更新时候使用,使用方式 了解即可,不建议使用 毕竟${}有sql注入风险
阅读更多...
基于ssm的教师办公管理系统的设计与实现论文

基于ssm的教师办公管理系统的设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本教师办公管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…
阅读更多...
算法刷题：最大异或对（Trie树扩展）、食物链（并查集扩展）

算法刷题：最大异或对（Trie树扩展）、食物链（并查集扩展）

目录 引言一、最大异或对&#xff08;Trie树扩展&#xff09;1.题目描述2.解题思路3.代码实现4.测试 二、食物链&#xff08;并查集扩展&#xff09;1.题目描述2.解题思路3.代码实现4.测试 引言 这两个扩展题能够让我们更加的熟悉Trie树和并查集的使用&#xff0c;这两道题可以…
阅读更多...
AI人工智能大模型讲师叶梓《基于人工智能的内容生成（AIGC）理论与实践》培训提纲

AI人工智能大模型讲师叶梓《基于人工智能的内容生成（AIGC）理论与实践》培训提纲

【课程简介】 本课程介绍了chatGPT相关模型的具体案例实践&#xff0c;通过实操更好的掌握chatGPT的概念与应用场景&#xff0c;可以作为chatGPT领域学习者的入门到进阶级课程。 【课程时长】 1天&#xff08;6小时/天&#xff09; 【课程对象】 理工科本科及以上&#xff0…
阅读更多...
用通俗易懂的方式讲解大模型：HugggingFace 推理 API、推理端点和推理空间使用详解

用通俗易懂的方式讲解大模型：HugggingFace 推理 API、推理端点和推理空间使用详解

接触 AI 的同学肯定对HuggingFace[1]有所耳闻&#xff0c;它凭借一个开源的 Transformers 库迅速在机器学习社区大火&#xff0c;为研究者和开发者提供了大量的预训练模型&#xff0c;成为机器学习界的 GitHub。 在 HuggingFace 上我们不仅可以托管模型&#xff0c;还可以方便…
阅读更多...
C#上位机与欧姆龙PLC的通信08----开发自己的通讯库读写数据

C#上位机与欧姆龙PLC的通信08----开发自己的通讯库读写数据

1、介绍 前面已经完成了7项工作&#xff1a; C#上位机与欧姆龙PLC的通信01----项目背景-CSDN博客 C#上位机与欧姆龙PLC的通信02----搭建仿真环境-CSDN博客 C#上位机与欧姆龙PLC的通信03----创建项目工程-CSDN博客 C#上位机与欧姆龙PLC的通信04---- 欧姆龙plc的存储区 C#上…
阅读更多...
平台无关性和语言无关性的记录

平台无关性和语言无关性的记录

目录 背景 平台无关性 语言无关性 背景 最近在学习Java虚拟机&#xff08;JVM: Java Virtual Machine&#xff09;,在学习过程中&#xff0c;再一次学习了JVM的平台无关性这一特性&#xff0c;此外也了解到了虚拟机的另外一种中立特性 --- 语言无关性&#xff0c;下面进行简单…
阅读更多...
挂载与解挂载

挂载与解挂载

一. 挂载 1.什么是挂载 将系统中的文件夹和磁盘做上关联&#xff0c;使用文件夹等于使用磁盘 2.mount 2.1 格式 mount [ -t 类型 ] 存储设备 挂载点目录 mount -o loop ISO镜像文件 挂载点目录 注意&#xff1a;指明要挂载的设备 设备文件&#xff1a;例如:/dev/sda5 卷…
阅读更多...
leetcode链表小练（1.反转链表2.链表的中间节点3.合并两个有序链表4.环形链表①5.环形链表②）详解 (୨୧• ᴗ •͈)◞︎ᶫᵒᵛᵉ ♡

leetcode链表小练（1.反转链表2.链表的中间节点3.合并两个有序链表4.环形链表①5.环形链表②）详解 (୨୧• ᴗ •͈)◞︎ᶫᵒᵛᵉ ♡

目录 一.反转链表 思路一反转指针反向&#xff1a; 思路二头插法&#xff1a; 二.链表的中间节点&#xff1a; 三.合并两个有序数组: 思路一&#xff1a;从头开始&#xff0c;取两个链表中小的那个尾插到新链表。定义指针head,tail指向空&#xff0c;代表新链表的头结点。…
阅读更多...
软件开发生命周期的四种模型

软件开发生命周期的四种模型

1、大爆炸模型 大爆炸模型计划、进度安排和正规开发过程几乎没有&#xff0c;所有精力都花在开发软件和编写代码上。假如产品需求无须很好理解&#xff0c;而且最终发布日期可以随便更改&#xff0c;这样的开发过程当然很理想。此外&#xff0c;还要有聪慧过人的客户&#xff0…
阅读更多...
专业PDF编辑和管理软件Acrobat Pro DC mac功能特点

专业PDF编辑和管理软件Acrobat Pro DC mac功能特点

Acrobat Pro DC mac是一款专业级PDF编辑和管理软件。作为PDF行业的标准工具&#xff0c;它提供了广泛的功能和工具&#xff0c;适用于个人用户、企业和专业人士。 Acrobat Pro DC具备丰富的编辑功能&#xff0c;可以对PDF文件进行文本编辑、图像编辑和页面重排等操作。用户可以…
阅读更多...
统信UOS及麒麟KYLINOS操作系统上设置GRUB密码

统信UOS及麒麟KYLINOS操作系统上设置GRUB密码

原文链接&#xff1a;给单用户模式上一层保险&#xff01;&#xff01;&#xff01; hello&#xff0c;大家好啊&#xff01;今天我要给大家介绍的是在统信UOS及麒麟KYLINOS操作系统上设置GRUB密码的方法。GRUB&#xff08;GRand Unified Bootloader&#xff09;是Linux系统中的…
阅读更多...
【C语言】一篇文章深入解析联合体和枚举且和结构体的区别

【C语言】一篇文章深入解析联合体和枚举且和结构体的区别

文章目录 &#x1f4dd;前言&#x1f320; 联合体类型的声明&#x1f309;联合体的特点 &#x1f320;相同成员的结构体和联合体对⽐&#x1f309;联合体⼤⼩的计算 &#x1f320;联合体应用&#x1f309;枚举类型的声明 &#x1f320;枚举类型的优点&#x1f309; 枚举类型的使…
阅读更多...
4.29 构建onnx结构模型-TopK

4.29 构建onnx结构模型-TopK

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 TopK 结点进行分析 方式 方法一&a…
阅读更多...
javaWeb学生信息管理系统2

javaWeb学生信息管理系统2

一、学生信息管理系统SIMS 一款基于纯Servlet技术开发的学生信息管理系统&#xff08;SIMS&#xff09;&#xff0c;在设计中没有采用SpringMVC和Spring Boot等框架。系统完全依赖于Servlet来处理HTTP请求和管理学生信息&#xff0c;实现了信息的有效存储、检索和更新&#xf…
阅读更多...
【洛谷学习自留】p7621 超市购物

【洛谷学习自留】p7621 超市购物

2023/12/29 解题思路&#xff1a; 简单的计算&#xff0c;难度主要集中在格式化输出和四舍五入的问题上。 1.建立一个计数器&#xff0c;for循环遍历单价和数量的乘积&#xff0c;存入计数器。 2.计算计数器的最终值乘以0.85h后的结果&#xff0c;为了保证四舍五入正确&…
阅读更多...
三菱人机交互GT Designer的使用（二，开关，指示灯，数值显示，数值输入）

三菱人机交互GT Designer的使用（二，开关，指示灯，数值显示，数值输入）

今天也开始每日一学&#xff0c;内容为开关&#xff0c;指示灯&#xff0c;数值显示&#xff0c;数值输入&#xff0c;以为这篇文章比较长&#xff0c;所有小编决分为3篇内容写完&#xff0c;谢谢大家阅读&#xff0c;不足之处&#xff0c;欢迎指正。 目录 开关 位&#xff0c…
阅读更多...
Java guava partition方法拆分集合自定义集合拆分方法

Java guava partition方法拆分集合自定义集合拆分方法

日常开发中&#xff0c;经常遇到拆分集合处理的场景&#xff0c;现在记录2中拆分集合的方法。 1. 使用Guava包提供的集合操作工具栏 Lists.partition()方法拆分 首先&#xff0c;引入maven依赖 <dependency><groupId>com.google.guava</groupId><artifa…
阅读更多...
【HTML5】第1章 HTML5入门

【HTML5】第1章 HTML5入门

学习目标 了解网页基本概念&#xff0c;能够说出网页的构成以及网页相关名词的含义 熟悉Web标准&#xff0c;能够归纳Web标准的构成。 了解浏览器&#xff0c;能够说出各主流浏览器的特点。 了解HTML5技术&#xff0c;能够知道HTML5发展历程、优势以及浏览器对HTML5的支持情…
阅读更多...
Linux 内存数据 Metrics 指标解读

Linux 内存数据 Metrics 指标解读

过去从未仔细了解过使用 free、top 等命令时显式的内存信息&#xff0c;只关注了已用内存 / 可用内存。本文我们详解解读和标注一下各个数据项的含义&#xff0c;同时和 Ganglia 显式的数据做一个映射。开始前介绍一个小知识&#xff0c;很多查看内存的命令行工具都是 cat /pro…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023