前言

剖析大佬所写的代码有助于个人成长。明天来剖析学习一下 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 / 看下实体的拾取 这个优化空间很大。然而我没看完。他这个概念如同也没什么劣势。。有懂得能够交换下。

1. _getShape 只是为了抽离出 getShape。getShape 才是拾取代码的逻辑
2. _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 相干源码浏览剖析分享。