iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
Modern Web

無限...寶石?畫布啦!系列 第 21

Day 21 | 這裡可以整包拿去

  • 分享至 

  • xImage
  •  

day 21 banner

在進入重構跟應用之前,先讓我來替自己工商一下。

這個系列存在的其中一個原因是我想為我自己的個人專案做一個比較完整的紀錄,這樣我在以後回來看會知道為什麼某些部分是怎樣撰寫的。

所以不介紹一下那個個人專案好像有點說不過去。

它基本上就是我們這個系列製作的無限畫布相對比較完整的版本。

這裡有介紹過的功能、沒有介紹過的功能,它都有。

後面要講到的重構部分有些已經寫進去了。

它就是 “板班” (board)!GitHub連結

目前我還沒有把它準備成開源開發專案,所以目前還請熱心的人先不要提交 PR,等我之後準備好,我再開放;如果無論如何你都想要某種功能,可以用 issue 砸我。我如果有時間我可能可以排進去開發,或是你也可以 fork 成自己的版本接下去開發。

它的用法很簡單,有一個總和的 board 類別,只需要傳進去一個 canvas 給它,然後再用我們之前用過的 requestAnimationFrame 它就可以動起來了。

如果你需要高度客製化你也可以把運作的各個部分拆分開來,也沒有問題;像是之前我有試驗看看使用 OffscreenCanvas 也是把使用者操作拆開來(因為 event listener 沒有辦法在 worker 裡面使用),然後 canvas 渲染的部分跟邏輯都移到 worker 裡面去。不過這部分我還沒有寫文件,可能要請大家看一下原始碼,或是等我補上文件了。

初始的解說跟範例我也有放在 readme 裡面,有一個 code sandbox 可以進去玩玩看。

除了上面講的以外,我還有一些額外的作畫功能,像是畫出會隨著縮放大小變化的座標軸刻度、等等。(不過小功能目前還有一些小 bug,請大家見諒 QQ)

我也還在籌劃新功能的加入。歡迎大家提出各種點子!

另外,這個 library 也是沒有綁在特定前端框架/函式庫的,如果你想要用在 react、vue 等等的,可能會需要多一點工,不過難度應該不會太高。
如果有需要協助整合的地方也可以發問,我盡我所能的幫大家解答。(但我其實也是前端菜鳥 xD)

我也有想過要自幹出一個類似 D3.js 的東西出來,讓 board 的實用度再往上提升。

不過後來我發現應該可以直接整合 D3.js 強的一部分(例如資料整理整合),然後再把那些資料畫在 canvas 上面,就可以畫出一個在無限畫布上的圖表。詳細可以參考類似這個文章。後面我也會示範把簡單的 D3 圖表畫在無限畫布上面的應用。

大概是這樣,如果你也需要一個現成的無限畫布,可以參考看看我的“板班”。

那我們今天就先到這邊~謝謝大家包容我今天自行工商。
希望我的 library 能夠幫助有需要的人~

我們明天見!


上一篇
Day 20 | 等等,不行這樣!
下一篇
Day 22 | 我們來把義大利麵擺直吧
系列文
無限...寶石?畫布啦!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言