【前端学习】AntV G6-07 深入图形与图形分组、自定义节点、节点动画(上、中)

本文主要是介绍【前端学习】AntV G6-07 深入图形与图形分组、自定义节点、节点动画(上、中),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

课程链接

AntV G6:深入图形与图形分组、自定义节点、节点动画(上)_哔哩哔哩_bilibili

AntV G6:深入图形与图形分组、自定义节点、节点动画(中)_哔哩哔哩_bilibili


图形分组 Group | G6 (antgroup.com)

自定义元素 G6.registerX | G6 (antgroup.com)

图形样式属性 Shape Attr | G6 (antgroup.com)


通过G6.registerNode方法,绘制基于 rect 的自定义卡片,并且提到:

1. 如果要更新自定义node,需要注意重绘时 update方法 是否要重写,有2个方法可以解决

2. 更新节点时候需要注意位置变形的问题,通过设置相对的x,y解决

3. KeyShape的draggable属性,可以控制是否这部分可以被拖拽

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>05 深入图形与图形分组、自定义节点、节点动画</title><!-- 引入 G6 --><script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
</head><body><div id="container"></div><script>const ICON_MAP = {a: 'https://ts2.cn.mm.bing.net/th?id=ODLS.70f7e605-0e03-4ed5-8935-b48cb3ee855f&w=32&h=32&o=6&pid=AdsPlus',b: 'https://ts2.cn.mm.bing.net/th?id=OADD2.7353136438133_1J11L5COSQ5ZDZ3TDJ&w=32&h=32&o=6&pid=21.2'}const data = {nodes: [{id: 'node2',title: 'node2',error: false,nodeType: 'a',nodeLevel: 0,panels: [{ title: '成功率', value: '11%' },{ title: '耗时', value: '50s' },{ title: '错误数', value: '12' },],x: 100,y: 100},{id: 'node3',title: 'node3',error: true,nodeType: 'b',nodeLevel: 0,panels: [{ title: '成功率', value: '19%' },{ title: '耗时', value: '10s' },{ title: '错误数', value: '8' },],x: 100,y: 200},],}// 第1个参数,卡片节点的名字// 第2个参数,options// 第3个参数,继承的节点类型G6.registerNode('card-node', {// 复写 draw 方法// 第1个参数,这个节点的配置// 第2个参数,这个节点的图形分组,现在的目的是往这个图形分组中去增加图形draw: (cfg, group) => {const color = cfg.error ? '#F4664A' : '#30BF78';const x = -200 / 2;const y = -60 / 2;const keyShape = group.addShape('rect', {attrs: {x,y,width: 200,height: 60,stroke: color,fill: '#fff',radius: 2},name: 'card-node-keyshape'});const titleRect = group.addShape('rect', {attrs: {x,y,width: 200,height: 20,stroke: color,fill: color,radius: 2},name: 'card-node-title-back',draggable: true  // G6为keyShape添加了draggable属性,为true时这部分图形才可以被拖拽});const image = group.addShape('image', {attrs: {x: x + 2,y: y + 2,width: 14,height: 14,img: ICON_MAP[cfg.nodeType],cursor: 'pointer'}});const title = group.addShape('text', {attrs: {text: cfg.title,x: x + 30,y: y + 4,fill: '#fff',textBaseline: 'top'},name: 'card-node-title'});let panelX = - x + 40;  // 疑问点:视频里这里不需要负号const subGroup = group.addGroup();cfg.panels?.forEach((panel, i) => {const panelTitle = subGroup.addShape('text', {attrs: {text: panel.title,x: x + panelX,y: y + 38,fill: '#ccc',textAlign: 'center'},name: `card-node-panel-title-${i}`})subGroup.addShape('text', {attrs: {text: panel.value,x: x + panelX,y: y + 54,fill: '#111',textAlign: 'center'},name: `card-node-panel-title-${i}`})// 根据前面图形的大小来放置后面的图形const titleBBox = panelTitle.getBBox();// console.log(titleBBox);panelX = titleBBox.maxX + 40;// panelX += 60;})return keyShape;},// update: undefined// 如果重写了update方法,渲染层面就会走这个update方法,而不会清空整个节点去重新绘制update: (cfg, item) => {const group = item.getContainer(); // 获取图形容器const titleShape = group.find(ele => ele.get('name') === 'card-node-title') // 通过name属性找到需要更新的图形// titleShape.attr('text', cfg.title); // 更新title里的text字段,attr 用来更新某个绘图属性// 批量更新titleShape.attr({text: cfg.title,// ... 其他属性})}}, 'rect')// 如果要更新node,方法1:取消继承自 rect// 如果要更新node,方法2:在继承自 rect 的前提下,设置update方法为undefined,重绘时就会走自定义的drawconst width = document.getElementById('container').scrollWidthconst height = document.getElementById('container').scrollHeight || 500const graph = new G6.Graph({container: 'container',width,height,fitCenter: true,// fitView: true,// 模式modes: {// 拖拽画布 drag-canvas// 拖拽节点 drag-node // 缩放画布 zoom-canvasdefault: ['drag-canvas', 'drag-node'],},defaultNode: {type: 'card-node'}})graph.data(data);graph.render();graph.updateItem(graph.getNodes()[0], {// 如果要更新node,方法1:取消继承自 rect// 如果要更新node,方法2:在继承自 rect 的前提下,设置update方法为undefined,重绘时就会走自定义的drawtitle: 'new-title~~'})if(typeof window !== 'undefined')window.onresize = () => {if(!graph || graph.get('destroyed')) return;if(!container || !container.scrollWidth || !container.scrollHeight)graph.changeSize(container.scrollWidth, container.scrollHeight);}</script>
</body></html>

这篇关于【前端学习】AntV G6-07 深入图形与图形分组、自定义节点、节点动画(上、中)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139748

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

深入理解Apache Kafka(分布式流处理平台)

《深入理解ApacheKafka(分布式流处理平台)》ApacheKafka作为现代分布式系统中的核心中间件,为构建高吞吐量、低延迟的数据管道提供了强大支持,本文将深入探讨Kafka的核心概念、架构... 目录引言一、Apache Kafka概述1.1 什么是Kafka?1.2 Kafka的核心概念二、Ka

SpringValidation数据校验之约束注解与分组校验方式

《SpringValidation数据校验之约束注解与分组校验方式》本文将深入探讨SpringValidation的核心功能,帮助开发者掌握约束注解的使用技巧和分组校验的高级应用,从而构建更加健壮和可... 目录引言一、Spring Validation基础架构1.1 jsR-380标准与Spring整合1

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript