前言
剖析大佬所写的代码有助于个人成长。明天来剖析学习一下G的外部实现 版本为 0.5.1。(其实我就是想偷偷卷 不为别的)。
代码是其次 背地的设计 思路 落地计划才是重中之重； 开始源码剖析之前先看看g的技术计划(以及截取一张外部开发人员的自我评估..) [各个渲染模式不同的入口，不同版本的 G 都有 Canvas、Group 和 Shape 的实现，通过对立的 interface 对外提供反对。】
开始咱们的源码征途
1. 抉择对应tags所在分支源码[0.5.1]的源码(我看到G6是用的这个..)
2. 查看一些工程方面的货色 看看怎么下手
- package.json 查看了一些相干指令 用到lerna这个包治理 嗯 - -, 不是重点 接着往下。
- lerna.json上面查看一下packages,能够了解源码大略蕴含了几个模块。别离是g-base g-canvas g-svg g-math。
3. 一起去看看外部的源码
进入packages目录下,看到了这几个文件。这里按我所理解的形容下每个的模块职责。
- g-base
绘图所需内容进行了接口定义并实现。 - g-canvas
2D渲染图元封装以及交互实现 canvas - g-math
对于几何图形的一些运算进行封装实现 - g-svg
2D渲染图元封装以及交互实现 svg - g-webgl
- g-mobile
webgl和mobile这个版本没有内容，待欠缺不介绍。
深入分析下g-base
绘图所需内容进行了接口定义并实现。
内部结构
- abstract
外部概念的形象/定义, 蕴含 element group,shape这些。 - animate
动画.... 对于动画注册 销毁等等... 用到了D3-timer 和 d3-ease... 对于动画数学那块。 - bbox
对于各类shape的坐标解决,大小解决 汇合方面的。 circle,ellipse,line.... - event
画布事件相干创立,销毁 'mousedown','mouseup','dblclick'..... - util
工具类库...说实话这块好全(- -,) createbox，color，matrix... - index.ts
整体入口 - interfaces.ts
所有接口的定义,预览这个文件 能够看到外部反对和所裸露的API - types.ts
外部"构造体"的类型定义 比方BBox,SimpleBBox ,Ponit这些。
拿几段代码看看...
目录: g/packages/g-base/src/event/event-contoller.ts / 看下实体的拾取 这个优化空间很大。然而我没看完。他这个概念如同也没什么劣势。。有懂得能够交换下。
- _getShape只是为了抽离出getShape。getShape才是拾取代码的逻辑
- _getPointInfo 获取点信息 而后去碰撞
看了下实体的拾取,因为G外部每个图元有box的概念 所以其实就是边界碰撞。 嗯 如同也没什么。 要看外部的bbox,我这边可能没太多工夫去看。有想探讨能够加我可视化群聊。
深入分析下g-canvas
内部结构
g-canvas 2D渲染图元canvas封装以及交互实现
- shape
各类渲染形态 圆/椭圆等等.. - util
各类工具 对于实体捕捉的 是否在门路in-path 是否在圆内... 等等 - canvas.ts
canvas基本操作 get,draw/drawAll..,clear...等等 - group.ts
group-shape的实现 (一个渲染图元概念) - index.ts
整体入口 - interfaces.ts
所有接口的定义,预览这个文件 能够看到外部反对和所裸露的API - types.ts
外部"构造体"的类型定义 比方BBox,SimpleBBox ,Ponit这些。
找代码看看
部分刷新绘制
部分刷新绘制。 革除指定区域 而后save; 而后进行clip(门路剪切) 将子元素绘制在剪切门路内。 嗯 就是部分绘制。性能思考吧。 不过集体感觉分层离屏会好点。。
G的其余局部就先不剖析了.. 比方g-svg和Canvas设计实现出于一个目标,只是API实现方面的细节问题.大家能够仔细阅读。
最初
2022/02/22 记录一下。
最初一个好消息:2022/02/25早晨在群内直播D3相干源码浏览剖析分享。