前言
分析大佬所寫的程式碼有助於個人成長。今天來分析學習一下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相關原始碼閱讀分析分享。