【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1

前言 分析大佬所写的代码有助于个人成长。今天来分析学习一下G的内部实现 版本为 0.5.1。(其实我就是想偷偷卷 不为别的)。

代码是其次 背后的设计 思路 落地方案才是重中之重; 开始源码分析之前先看看g的技术方案(以及截取一张内部开发人员的自我评价..) [各个渲染模式不同的入口,不同版本的 G 都有 Canvas、Group 和 Shape 的实现,通过统一的 interface 对外提供支持。】
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

【【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1】【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

开始我们的源码征途 1. 选择对应tags所在分支源码[0.5.1]的源码(我看到G6是用的这个..) 【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

2. 查看一些工程方面的东西 看看怎么下手
  • package.json 查看了一些相关指令 用到lerna这个包管理 嗯 - -, 不是重点 接着往下。
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

  • lerna.json下面查看一下packages,可以理解源码大概包含了几个模块。分别是g-base g-canvas g-svg g-math。
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

3. 一起去看看内部的源码 进入packages目录下,看到了这几个文件。这里按我所了解的描述下每个的模块职责。
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

  • g-base
    绘图所需内容进行了接口定义并实现。
  • g-canvas
    2D渲染图元封装以及交互实现 canvas
  • g-math
    对于几何图形的一些运算进行封装实现
  • g-svg
    2D渲染图元封装以及交互实现 svg
  • g-webgl
  • g-mobile
    webgl和mobile这个版本没有内容,待完善不介绍。
深入分析下g-base
绘图所需内容进行了接口定义并实现。
内部结构 【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

  • 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 / 看下实体的拾取 这个优化空间很大。但是我没看完。他这个概念好像也没什么优势。。有懂得可以交流下。
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

  1. _getShape只是为了抽离出getShape。getShape才是拾取代码的逻辑
  2. _getPointInfo 获取点信息 然后去碰撞
    看了下实体的拾取,因为G内部每个图元有box的概念 所以其实就是边界碰撞。 嗯 好像也没什么。 要看内部的bbox,我这边可能没太多时间去看。有想讨论可以加我可视化群聊。
深入分析下g-canvas
内部结构 【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

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这些。
找代码看看
局部刷新绘制
【可视化-源码阅读】antvis|【可视化-源码阅读】antvis / g-base解读 - 1
文章图片

局部刷新绘制。 清除指定区域 然后save; 然后进行clip(路径剪切) 将子元素绘制在剪切路径内。 嗯 就是局部绘制。性能考虑吧。 不过个人觉得分层离屏会好点。。
G的其他部分就先不分析了.. 比如g-svg和Canvas设计实现出于一个目的,只是API实现方面的细节问题.大家可以仔细阅读。 最后 2022/02/22 记录一下。
最后一个好消息:2022/02/25晚上在群内直播D3相关源码阅读分析分享。

    推荐阅读