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

2023-12-28 20:28
文章标签 学习 使用 自定义 内置 节点 2.0 antv x6

本文主要是介绍antv/x6_2.0学习使用（三、内置节点和自定义节点），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

内置节点和自定义节点

一、节点渲染方式

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/likepath: "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 } = metadataif (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 = colorreturn div},
})
五、 自定义React/Vue/Angular节点

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

这篇关于antv/x6_2.0学习使用（三、内置节点和自定义节点）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/547194。

相关文章

使用Python实现图像LBP特征提取的操作方法

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB
阅读更多...
Maven的使用和配置国内源的保姆级教程

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H
阅读更多...
Python中__init__方法使用的深度解析

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程（OOP）体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认
阅读更多...
SpringBoot使用GZIP压缩反回数据问题

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》：本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么，可以干什么？3、Spr
阅读更多...
Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin
阅读更多...
Linux下如何使用C++获取硬件信息

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息：读取"/proc/cpuinfo"文件获取磁盘信息：读取"/proc/diskstats"文
阅读更多...
Java使用SLF4J记录不同级别日志的示例详解

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J
阅读更多...
使用Python实现一个优雅的异步定时器

使用Python实现一个优雅的异步定时器

《使用Python实现一个优雅的异步定时器》在Python中实现定时器功能是一个常见需求,尤其是在需要周期性执行任务的场景下,本文给大家介绍了基于asyncio和threading模块,可扩展的异步定... 目录需求背景代码1. 单例事件循环的实现2. 事件循环的运行与关闭3. 定时器核心逻辑4. 启动与停
阅读更多...
如何使用Nginx配置将80端口重定向到443端口

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP（80端口）请求重定向到HTTPS（443端口）,文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器
阅读更多...
Java使用ANTLR4对Lua脚本语法校验详解

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR？第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2