[【快来报名】2025年 1季度VisActor数据可视化创意编程大赛暨文档达人挑战赛](https://juejin.cn/post/7451775061902622747) 奖品丰厚，全程指导，参与开源，提升技能！ *** 本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ *** ## 甘特图的基本概念在项目管理中，甘特图是一种常用的工具，用于展示项目任务的时间安排和进度。我们将甘特图拆分成以下几个部分： * 左侧任务列表：显示项目的任务列表，通常在图的左侧。 * 顶部时间轴：显示项目的时间范围，通常在图的顶部或底部。 * 任务条：表示每个任务的开始和结束时间。 * 网格线：用于分隔时间轴和任务条，使图表更加清晰。 * 标记线：用于标记重要时间点。 * 分割线：用于分隔任务列表和时间轴，使图表更加清晰。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1bd98b70c02f4fe98b1f1ff47f5e0763~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=O0UawSUnfq4GhlPPzpkifjqXJq0%3D) ## VTable-Gantt [VTable-Gantt](https://www.visactor.io/vtable/guide/gantt/Getting_Started) 是一款基于 VTable表格组件及canvas渲染引擎VRender 构建的强大甘特图绘制工具，能够帮助开发者轻松创建和管理甘特图。核心能力如下： 1. 高效性能：支持大规模项目数据的快速运算与渲染，确保流畅的用户体验。 2. 灵活布局：支持自定义时间轴、任务条样式和布局，满足不同项目管理需求。 3. 强大交互：提供任务的拖拽、缩放和编辑功能，简化项目管理操作。 4. 丰富的可视化能力：支持信息单元格及任务条的自定义渲染，提供树形结构展示，提升数据展示的多样性和直观性。 ### 获取 @visactor/vtable-gantt 需要注意的是 @visactor/vtable-gantt 是基于 @visactor/vtable 构建的，所以你需要先安装 @visactor/vtable 才能使用 @visactor/vtable-gantt。 **使用** **NPM** **包** 首先，你需要在项目根目录下使用以下命令安装：使用 npm 安装 npm install @visactor/vtable npm install @visactor/vtable-gantt 使用 yarn 安装 yarn add @visactor/vtable yarn add @visactor/vtable-gantt ### 引入 VTableGantt **通过** **NPM** **包引入** 在 JavaScript 文件顶部使用 `import` 引入 vtable-gantt： ```ts import {Gantt} from '@visactor/vtable-gantt'; const ganttInstance = new Gantt(domContainer, option); ``` ### 绘制一个简单的甘特图在绘图前我们需要为 VTableGantt 准备一个具备高宽的 DOM 容器。 ```ts

``` 接下来，我们创建一个 `Gantt` 实例，传入甘特图配置项： ```ts import {Gantt} from '@visactor/vtable-gantt'; const records = [ { id: 1, title: 'Task 1', developer: 'liufangfang.jane@bytedance.com', start: '2024-07-24', end: '2024-07-26', progress: 31, priority: 'P0', }, { id: 2, title: 'Task 2', developer: 'liufangfang.jane@bytedance.com', start: '07/24/2024', end: '08/04/2024', progress: 60, priority: 'P0' }, ... ]; const columns = [ { field: 'title', title: 'title', width: 'auto', sort: true, tree: true, editor: 'input' }, { field: 'start', title: 'start', width: 'auto', sort: true, editor: 'date-input' }, { field: 'end', title: 'end', width: 'auto', sort: true, editor: 'date-input' } ]; const option = { overscrollBehavior: 'none', records, taskListTable: { columns, }, taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress' }, timelineHeader: { colWidth: 100, backgroundColor: '#EEF1F5', horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, scales: [ { unit: 'day', step: 1, format(date) { return date.dateIndex.toString(); }, style: { fontSize: 20, fontWeight: 'bold', color: 'white', strokeColor: 'black', textAlign: 'right', textBaseline: 'bottom', backgroundColor: '#EEF1F5' } } ] }, }; const ganttInstance = new Gantt(document.getElementById("tableContainer"), option); ``` 运行后效果： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fc706a61ff5b43ec8bb0e05d2163c332~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=gwKtITsvIhzyF9dnYUinJBMNeqU%3D) ## 甘特图的主要能力 ### 左侧多列信息展表格示甘特图整个结构的左侧是一个完整的表格容器，所以可支持丰富的列信息展示以及自定义渲染能力。 ```ts import * as VTableGantt from '@visactor/vtable-gantt'; let ganttInstance; const records = [ ... ]; const columns = [ .... ]; const option = { overscrollBehavior: 'none', records, taskListTable: { columns, tableWidth: 250, minTableWidth: 100, maxTableWidth: 600, theme: { headerStyle: { borderColor: '#e1e4e8', borderLineWidth: 1, fontSize: 18, fontWeight: 'bold', color: 'red', bgColor: '#EEF1F5' }, bodyStyle: { borderColor: '#e1e4e8', borderLineWidth: [1, 0, 1, 0], fontSize: 16, color: '#4D4D4D', bgColor: '#FFF' } } }, ..... }; ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option); ``` 列表表格配置项 taskListTable，其中可以配置： * 左侧表格整体宽度：通过 tableWidth 配置项，可以设置任务列表表格的整体宽度。 * 列信息: 通过 columns，可以定义任务信息表格的列信息和各列宽度。 * 样式配置: 通过 theme.headerStyle 和theme.bodyStyle 配置项，可以设置表头和表体的样式。 * 宽度限制: 通过 minTableWidth 和 maxTableWidth 配置项，可以设置任务列表的最小和最大宽度。完整代码见：具体配置可参考官网配置：效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/21217ebe43c94a6b963ed368ff4c6f54~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=%2B62ecjoFOmue8HwYDSS5NHD1dn0%3D) ### 自定义渲染对应官网demo： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e714bd7fe4944d7baef2dda961cc664d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=r62GHG2j7Zh%2F6rsSQfVfor4BM%2FQ%3D) 自定义渲染需要了解VRender的图元属性，具体可以参考自定义渲染教程： #### 任务条的自定义渲染通过 `taskBar.customLayout` 配置项，可以自定义任务条的渲染方式。例如： ```ts taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress', customLayout: args => { const colorLength = barColors.length; const { width, height, index, startDate, endDate, taskDays, progress, taskRecord, ganttInstance } = args; const container = new VRender.Group({ width, height, cornerRadius: 30, fill: { gradient: 'linear', x0: 0, y0: 0, x1: 1, y1: 0, stops: [ { offset: 0, color: barColors0[index % colorLength] }, { offset: 0.5, color: barColors[index % colorLength] }, { offset: 1, color: barColors0[index % colorLength] } ] }, display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }); const containerLeft = new VRender.Group({ height, width: 60, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' // fill: 'red' }); container.add(containerLeft); const avatar = new VRender.Image({ width: 50, height: 50, image: taskRecord.avatar, cornerRadius: 25 }); containerLeft.add(avatar); const containerCenter = new VRender.Group({ height, width: width - 120, display: 'flex', flexDirection: 'column' // alignItems: 'left' }); container.add(containerCenter); const developer = new VRender.Text({ text: taskRecord.developer, fontSize: 16, fontFamily: 'sans-serif', fill: 'white', fontWeight: 'bold', maxLineWidth: width - 120, boundsPadding: [10, 0, 0, 0] }); containerCenter.add(developer); const days = new VRender.Text({ text: `${taskDays}天`, fontSize: 13, fontFamily: 'sans-serif', fill: 'white', boundsPadding: [10, 0, 0, 0] }); containerCenter.add(days); if (width >= 120) { const containerRight = new VRender.Group({ cornerRadius: 20, fill: 'white', height: 40, width: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', // 垂直方向居中对齐 boundsPadding: [10, 0, 0, 0] }); container.add(containerRight); const progressText = new VRender.Text({ text: `${progress}%`, fontSize: 12, fontFamily: 'sans-serif', fill: 'black', alignSelf: 'center', fontWeight: 'bold', maxLineWidth: (width - 60) / 2, boundsPadding: [0, 0, 0, 0] }); containerRight.add(progressText); } return { rootContainer: container // renderDefaultBar: true // renderDefaultText: true }; }, hoverBarStyle: { cornerRadius: 30 } }, ``` #### 日期表头自定义渲染通过 `timelineHeader.scales.customLayout` 配置项，可以自定义日期表头的渲染方式。例如： ```ts timelineHeader: { backgroundColor: '#f0f0fb', colWidth: 80, scales: [ { unit: 'day', step: 1, format(date) { return date.dateIndex.toString(); }, customLayout: args => { const colorLength = barColors.length; const { width, height, index, startDate, endDate, days, dateIndex, title, ganttInstance } = args; const container = new VRender.Group({ width, height, fill: '#f0f0fb', display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }); const containerLeft = new VRender.Group({ height, width: 30, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' // fill: 'red' }); container.add(containerLeft); const avatar = new VRender.Image({ width: 20, height: 30, image: '' }); containerLeft.add(avatar); const containerCenter = new VRender.Group({ height, width: width - 30, display: 'flex', flexDirection: 'column' // alignItems: 'left' }); container.add(containerCenter); const dayNumber = new VRender.Text({ text: String(dateIndex).padStart(2, '0'), fontSize: 20, fontWeight: 'bold', fontFamily: 'sans-serif', fill: 'black', textAlign: 'right', maxLineWidth: width - 30, boundsPadding: [15, 0, 0, 0] }); containerCenter.add(dayNumber); const weekDay = new VRender.Text({ text: VTableGantt.tools.getWeekday(startDate, 'short').toLocaleUpperCase(), fontSize: 12, fontFamily: 'sans-serif', fill: 'black', boundsPadding: [0, 0, 0, 0] }); containerCenter.add(weekDay); return { rootContainer: container }; } } ] }, ``` #### 左侧任务信息表格自定义渲染通过 `taskListTable.columns.customLayout` 定义每一列单元格的自定义渲染或者通过`taskListTable.customLayout` 全局定义每个单元格的自定义渲染。 ### 支持不同的日期刻度粒度通常的业务场景中，可能需要涉及多层时间刻度的展示，VTable-Gantt支持五种时间粒度：`'day' | 'week' | 'month' | 'quarter' | 'year'`。通过 `timelineHeader.scales.unit` 配置项，可以设置日期刻度的行高和时间单位（如天、周、月等）。与此同时还可以配置不同时间粒度配置不同的表头样式：通过 `timelineHeader.scales.style` 配置项，可以自定义日期表头的样式。通过 `timelineHeader.scales.rowHeight` 配置项，可以设置日期刻度的行高。 ```ts timelineHeader: { colWidth: 100, backgroundColor: '#EEF1F5', ..... scales: [ { unit: 'week', step: 1, startOfWeek: 'sunday', format(date) { return `Week ${date.dateIndex}`; }, style: { fontSize: 20, fontWeight: 'bold', color: 'white', strokeColor: 'black', textAlign: 'right', textBaseline: 'bottom', backgroundColor: '#EEF1F5', textStick: true // padding: [0, 30, 0, 20] } }, { unit: 'day', step: 1, format(date) { return date.dateIndex.toString(); }, style: { fontSize: 20, fontWeight: 'bold', color: 'white', strokeColor: 'black', textAlign: 'right', textBaseline: 'bottom', backgroundColor: '#EEF1F5' } } ] }, ``` 效果如下图： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/85aedf3abd8f41afb6ebd5f8faa29901~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=hpGvBlLOr8Ia25KBQVDlvhiZdCo%3D) ### 外边框表格的边框可能与内部的网格线在样式上有一定的不同，可以通过 `frame.outerFrameStyle` 配置项，可以自定义甘特图的外边框。 ```ts const option = { overscrollBehavior: 'none', records, taskListTable: { }, frame: { outerFrameStyle: { borderLineWidth: 20, borderColor: 'black', cornerRadius: 8 }, }, ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d450db86706d4c41b2cf826f46419ee0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=eJMCmRII%2FaxjV5c56K0og1i8ggs%3D) ### 横纵分割线同时支持表头和body的横向分割线，及左侧信息表和右侧任务列表的分割线。通过 `frame.horizontalSplitLine` 配置项，可以自定义水平分割线的样式。`frame.verticalSplitLine` 配置项，可以自定义垂直分割线的样式。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/87a78f499df74db9a078b9c1fdc9b563~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=WDwFTWPugySb4ZpT%2FCU5eUgLF2U%3D) ### 标记线在gantt甘特图中通常需要标记一些重要的日期，我们通过配置项markLine来配置该效果。通过`markLine.date`来指定重点日期，通过 `markLine.style` 配置项，可以自定义标记线的样式。如果需要将该日期在初始化时一定要展示出来可以设置`markLine.scrollToMarkLine`为true。例如： ```ts markLine: [ { date: '2024-07-28', style: { lineWidth: 1, lineColor: 'blue', lineDash: [8, 4] } }, { date: '2024-08-17', style: { lineWidth: 2, lineColor: 'red', lineDash: [8, 4] } } ], ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/82504040332548bca1aed6df92d6269e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=YEN7HOgV%2F%2Bg%2Bewb83NkeGivgMK0%3D) ### 容器网格线通过 `grid` 配置项，可以自定义右侧任务条背景网格线的样式。包括背景色、横纵方向的线宽、线型等。例如： ```ts grid: { verticalLine: { lineWidth: 3, lineColor: 'black' }, horizontalLine: { lineWidth: 2, lineColor: 'red' } }, ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4ab892dd477f41349e8a4d973e69629d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=VvBjFX50MANizTl1%2BuepX%2BHvebQ%3D) ### 交互 #### 任务条通过 `taskBar.moveable` 配置项，可以设置任务条是否可拖拽。通过 `taskBar.resizable` 配置项，可以设置任务条是否可调整大小。对应效果的官网示例：例如： ```ts taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress', // resizable: false, moveable: true, hoverBarStyle: { barOverlayColor: 'rgba(99, 144, 0, 0.4)' }, }, ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e7e09a6c62984e5c88b9bffc2b5fb249~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=6OwwpCUvZLCU5PU9%2Fb9ChCHIsgo%3D) #### 调整左侧表格宽度通过 `frame.verticalSplitLineMoveable` 配置为true，可以设置分割线可拖拽。例如： ```ts frame: { outerFrameStyle: { borderLineWidth: 1, borderColor: '#e1e4e8', cornerRadius: 0 }, verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 }, horizontalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 }, verticalSplitLineMoveable : true , verticalSplitLineHighlight: { lineColor: 'green', lineWidth: 1 } }, ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/67b08dc04077417faaa657b887786364~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=0%2FcNOvpOOr%2FFBtH9g5fHpSPQoCc%3D) 完整示例： #### 编辑任务信息通过ListTable的编辑能力，可以同步更新数据到任务条。首先，确保已经正确安装了 VTable 库@visactor/vtable 和相关的编辑器包@visactor/vtable-editors。你可以使用以下命令来安装它们： ```ts npm install @visactor/vtable-editors yarn add @visactor/vtable-editors ``` 在代码中引入所需类型的编辑器模块： ```ts import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors'; ``` 你还可以通过 CDN 获取构建好的 VTable-Editor 文件。 ```ts ``` VTable-ediotrs 库中目前提供了四种编辑器类型，包括文本输入框、多行文本输入框、日期选择器、下拉列表等。你可以根据需要选择合适的编辑器。(下拉列表编辑器效果还在优化中，目前比较丑哈) 以下是创建编辑器的示例代码： ```ts const inputEditor = new InputEditor(); const textAreaEditor = new TextAreaEditor(); const dateInputEditor = new DateInputEditor(); const listEditor = new ListEditor({ values: ['女', '男'] }); ``` 在上面的示例中，我们创建了一个文本输入框编辑器(InputEditor)、一个多行文本框编辑器(TextAreaEditor)、一个日期选择器编辑器(DateInputEditor)和一个下拉列表编辑器(ListEditor)。你可以根据实际需求选择适合的编辑器类型。在使用编辑器前，需要将编辑器实例注册到 VTable 中： ```ts // import * as VTable from '@visactor/vtable'; // 注册编辑器到VTable VTable.register.editor('name-editor', inputEditor); VTable.register.editor('name-editor2', inputEditor2); VTable.register.editor('textArea-editor', textAreaEditor); VTable.register.editor('number-editor', numberEditor); VTable.register.editor('date-editor', dateInputEditor); VTable.register.editor('list-editor', listEditor); ``` 接下来需要再 columns 配置中指定使用的编辑器： ```ts columns: [ { title: 'name', field: 'name', editor(args)=>{ if(args.row%2 === 0) return 'name-editor'; else return 'name-editor2'; } }, { title: 'age', field: 'age', editor: 'number-editor' }, { title: 'gender', field: 'gender', editor: 'list-editor' }, { title: 'address', field: 'address', editor: 'textArea-editor' }, { title: 'birthday', field: 'birthDate', editor: 'date-editor' }, ] ``` 在左侧任务列表表格中，用户可以通过`双击`（或者其他交互方式）单元格来开始编辑。对应效果的官网示例： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/61a60777bbc94e2580aea9ebf028b451~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=NMRtp0KsruZw0uRJz2Z1R8PbO8Y%3D) 更完整的编辑能力，可以参考VTable的编辑教程： #### 调整数据顺序开启拖拽换位能力同ListTable的配置需要在配置中添加`rowSeriesNumber`，有了行序号，可以配置该列的样式，开启换位的话将`dragOrder设置为true`。VTable-Gantt在监听有移位事件时将顺序同步到任务条区域显示。例如： ```ts rowSeriesNumber: { title: '行号', dragOrder : true , headerStyle: { fontWeight: 'bold', color: '#134e35', bgColor: '#a7c2ff' }, style: { borderColor: '#e1e4e8', borderColor: '#9fb9c3', borderLineWidth: [1, 0, 1, 0], } }, ``` 效果如下： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/02650c56d284430b9da042f692788d2a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg546E6a2C:q75.awebp?rk3s=f64ab15b&x-expires=1761677755&x-signature=QA2DodOGgEQxnm2LDSHPSzE8GF4%3D) # 小结本文详细介绍了@visactor/vtable-gantt 组件目前已有的功能，其基础能力和扩展能力已经能满足当前大部分场景对甘特图的需求。该组件还在不断的完善中，如果有建议或者使用问题欢迎交流。 # 欢迎交流最后，我们诚挚的欢迎所有对数据可视化感兴趣的朋友参与进来，参与 VisActor 的开源建设： **VChart**：[VChart 官网](https://link.juejin.cn?target=https%3A%2F%2Fvisactor.io%2Fvchart)、[VChart Github（感谢 Star）](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FVisActor%2FVChart) **VTable**：[VTable 官网](https://link.juejin.cn?target=https%3A%2F%2Fvisactor.io%2Fvtable)、[VTable Github（感谢 Star）](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FVisActor%2FVTable) **VMind**：[VMind 官网](https://link.juejin.cn?target=https%3A%2F%2Fvisactor.io%2Fvmind)、[VMind Github（感谢 Star）](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FVisActor%2FVMind) 官方网站：[www.visactor.io/](https://link.juejin.cn?target=https%3A%2F%2Fwww.visactor.io%2F) Discord：[discord.gg/3wPyxVyH6m](https://link.juejin.cn?target=https%3A%2F%2Fdiscord.gg%2F3wPyxVyH6m) 飞书群（外网）：[打开链接扫码](https://link.juejin.cn?target=https%3A%2F%2Fp3-juejin.byteimg.com%2Ftos-cn-i-k3u1fbpfcp%2F40dcf4e6722d4925804361a2269991d8~tplv-k3u1fbpfcp-jj-mark%3A0%3A0%3A0%3A0%3Aq75.image%23%3Fw%3D264%26h%3D277%26s%3D35808%26e%3Dpng%26b%3Dfdfdfd) 微信公众号：[打开链接扫码](https://link.juejin.cn?target=https%3A%2F%2Fp3-juejin.byteimg.com%2Ftos-cn-i-k3u1fbpfcp%2Ff28519302ee94940a8159fc52d375aaa~tplv-k3u1fbpfcp-jj-mark%3A0%3A0%3A0%3A0%3Aq75.image%23%3Fw%3D258%26h%3D258%26s%3D8552%26e%3Dwebp%26b%3Dfefefe) Twiter：[twitter.com/xuanhun1](https://link.juejin.cn?target=https%3A%2F%2Ftwitter.com%2Fxuanhun1) github：[github.com/VisActor](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FVisActor) # 参考资料 VisActor 专栏：[juejin.cn/user/571401…](https://juejin.cn/user/571401774834093/posts)