iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

無邊際畫布的應用無所不在,Figma、excalidraw、tldraw 等等都可以看到它們的蹤跡。之前個人專案的開發需要一個無限畫布,不過因為我是屬於熱愛造輪子的人,我並沒有去尋找現成的解決方案,而是開始研究起無限畫布的實作方法。 一不小心就掉進這個坑了,現在我把這個坑佈置得舒舒服服的,邀請大家一起來坑裡作客。

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文 團隊菜很長團
DAY 21

Day 21 | 這裡可以整包拿去

在進入重構跟應用之前,先讓我來替自己工商一下。 這個系列存在的其中一個原因是我想為我自己的個人專案做一個比較完整的紀錄,這樣我在以後回來看會知道為什麼某些部分...

2024-10-05 ‧ 由 veee 分享
DAY 22

Day 22 | 我們來把義大利麵擺直吧

今天跟明天會大概講一些重構跟最佳化方面的內容,後天就會進到應用的部分。 昨天有跟大家介紹了一下“板班”,其實在板班之前,我有做過兩個類似的東西。 最一開始的版...

2024-10-06 ‧ 由 veee 分享
DAY 23

Day 23 | 看不見就沒有必要畫出來

今天要講的也算是重構的一部分,但主要是渲染最佳化可以努力的方向~ 我有限的小腦袋目前想到可以前進的方向有兩個: 不在視窗範圍內就沒有必要畫出來 小到看不見也...

2024-10-07 ‧ 由 veee 分享
DAY 24

Day 24 | 撞到牆壁會怎樣?

今天跟接下來的篇幅會著重在無限畫布的應用,會以展示為主要目的,所以不會帶太多實作上面的細節。 其實無限畫布因為你想要畫什麼都沒有問題,所以在應用方面應該是百百...

2024-10-08 ‧ 由 veee 分享
DAY 25

Day 25 | 帶你環遊世界

在今天的主題開始之前有一件事我覺得有必說明一下,應用展示都是以“展示”為主要目的,所以並不會帶太多實作的細節;主要是給大家看可以做到什麼樣的成果。 不過我都會...

2024-10-09 ‧ 由 veee 分享
DAY 26

Day 26 | 手寫的從前

今天的主題是要在無限畫布上面可以用滑鼠或是手寫觸控寫字! 就是有點像是 JS 30 的 Fun With HTML Canvas (應該說是一模一樣啦) 但是...

2024-10-10 ‧ 由 veee 分享
DAY 27

Day 27 | 前面轉個彎

今天的 demo 主要會是貝茲曲線的編輯器 沒錯,因為我的庫存文章已經見底了 xD,目前人又在國外沒有什麼時間寫文章。 所以今天先用之前做過的小專案當作今天的...

2024-10-11 ‧ 由 veee 分享
DAY 28

Day 28 | 動起來,動起來

今天的應用主要會是動畫方面的! 但是大家知道的,因為我真的有很嚴重的弊帚自珍症 (Not Invented Here Syndrome) NIH 是什麼? 所...

2024-10-12 ‧ 由 veee 分享
DAY 29

Day 29 | 好像少了點 D3

雖然 D3 本身就有提供平移跟縮放的功能,但是因為如果我沒有結合 D3 的話,好像就少了很多應用的場合! 所以就有了今天這篇! 因為我們的無限畫布是用 can...

2024-10-13 ‧ 由 veee 分享
DAY 30

Day 30 | 歡樂的時光總是短暫

終究還是來到了這一天,我們終於要過終點線了! 第一次參加鐵人賽,如果成功完賽會很開心(因為我的總結大概是第一天就已經寫好了 xD) 如果沒有成功完賽,那大概也...

2024-10-14 ‧ 由 veee 分享