前言分析大佬写的代码，有助于个人成长。今天来分析研究一下G的内部实现，版本是0.5.1。（其实我就是想偷偷刷屏不为别的）。代码紧随其后的是实现方案背后的设计思想是最重要的；在开始源码分析之前，先看看g的技术方案（并截取一个内部开发者的自我评价..）【各渲染模式入口不同，不同版本G实现了Canvas、Group和Shape，对外提供通过统一的接口支持。】开始我们的源码之旅1.选择tag所在分支源码[0.5.1]对应的源码（我看到G6用的就是这个。。）2.查看一些工程的东西，看看如何启动package.json看看吧一些相关的说明用到了lerna的包管理--不是重点再继续。查看lerna.json下面的包，可以了解到源码中大概包含了几个模块。它们分别是g-baseg-canvasg-svgg-math。3.一起去看内部源码。进入包目录并查看这些文件。这里就我所知对每个模块的职责进行描述。g-base绘图所需的内容是接口定义和实现的。g-canvas2D渲染图元封装和交互实现canvasg-math封装了一些对几何图形的操作实现g-svg2D渲染图元封装和交互实现svgg-webglg-mobilewebgl和移动版暂无内容，待完善后再介绍.在深入分析了g-base绘图需要的内容后，定义并实现了接口。内部结构抽象内部概念的抽象/定义，包括元素组、形状等。animate动画....关于动画注册，销毁等...用到d3-timer和d3-ease...关于动画数学。bbox处理各种形状的坐标和集合的大小。circle,ellipse,line....eventcanvas事件相关的'mousedown','mouseup','dblclick'的创建和销毁.....util工具库...说实话这个不错（--,)createbox,color,matrix...index.ts总体入口interfaces.ts所有接口的定义，预览这个文件可以看到内部支持和暴露的API类型。BBox、SimpleBBox、Ponit这些ts内部“结构”的类型定义。看几段代码...目录：g/packages/g-base/src/event/event-contoller.ts/看实体的拾取。有很大的优化空间。但我没有完成它。他的概念似乎没有任何优势。.如果你理解，你可以交流。_getShape只是提取getShape。getShape是拾取代码_getPointInfo获取点信息的逻辑，然后去碰撞看实体的拾取，因为G中每个图元都有box的概念，所以其实是边界碰撞。嗯，好像没什么不对。要看内部的bbox，我可能没有太多时间去看。如果想讨论，可以加我到可视化群聊。深入分析g-canvas内部结构g-canvas2D渲染元素canvas封装及形状的交互实现各种渲染形状circle/ellipse等.util各种工具获取实体捕获是否在路径in-pathorinthecircle...等等canvas.ts画布基本操作get,draw/drawAll..,clear...等group.tsgroup-shape实现（一个渲染原语概念）index.ts整体入口接口。ts所有接口定义，预览这个文件可以看到内部支持和暴露的APItypes.ts内部“结构”类型定义如BBox、SimpleBBox、Ponit等。找到代码看局部刷新图Partialrefreshdrawing。清空指定区域再保存；然后执行剪辑（路径切割）以在剪辑路径内绘制子元素。好吧，这是当地的绘画。考虑性能。但是，我个人认为在屏幕外分层会更好。.G的其他部分不再分析。比如g-svg和Canvas都是为了一个目的而设计和实现的，只是API实现的细节。你可以仔细阅读。最后记录在2022/02/22。最后一个好消息：2022/02/25晚上，我们会在群里直播D3相关的源码阅读、分析和分享。
