無邊際畫布的應用無所不在,Figma、excalidraw、tldraw 等等都可以看到它們的蹤跡。之前個人專案的開發需要一個無限畫布,不過因為我是屬於熱愛造輪子的人,我並沒有去尋找現成的解決方案,而是開始研究起無限畫布的實作方法。 一不小心就掉進這個坑了,現在我把這個坑佈置得舒舒服服的,邀請大家一起來坑裡作客。
在進入重構跟應用之前,先讓我來替自己工商一下。 這個系列存在的其中一個原因是我想為我自己的個人專案做一個比較完整的紀錄,這樣我在以後回來看會知道為什麼某些部分...
今天跟明天會大概講一些重構跟最佳化方面的內容,後天就會進到應用的部分。 昨天有跟大家介紹了一下“板班”,其實在板班之前,我有做過兩個類似的東西。 最一開始的版...
今天要講的也算是重構的一部分,但主要是渲染最佳化可以努力的方向~ 我有限的小腦袋目前想到可以前進的方向有兩個: 不在視窗範圍內就沒有必要畫出來 小到看不見也...
今天跟接下來的篇幅會著重在無限畫布的應用,會以展示為主要目的,所以不會帶太多實作上面的細節。 其實無限畫布因為你想要畫什麼都沒有問題,所以在應用方面應該是百百...
在今天的主題開始之前有一件事我覺得有必說明一下,應用展示都是以“展示”為主要目的,所以並不會帶太多實作的細節;主要是給大家看可以做到什麼樣的成果。 不過我都會...
今天的主題是要在無限畫布上面可以用滑鼠或是手寫觸控寫字! 就是有點像是 JS 30 的 Fun With HTML Canvas (應該說是一模一樣啦) 但是...
今天的 demo 主要會是貝茲曲線的編輯器 沒錯,因為我的庫存文章已經見底了 xD,目前人又在國外沒有什麼時間寫文章。 所以今天先用之前做過的小專案當作今天的...
今天的應用主要會是動畫方面的! 但是大家知道的,因為我真的有很嚴重的弊帚自珍症 (Not Invented Here Syndrome) NIH 是什麼? 所...
雖然 D3 本身就有提供平移跟縮放的功能,但是因為如果我沒有結合 D3 的話,好像就少了很多應用的場合! 所以就有了今天這篇! 因為我們的無限畫布是用 can...
終究還是來到了這一天,我們終於要過終點線了! 第一次參加鐵人賽,如果成功完賽會很開心(因為我的總結大概是第一天就已經寫好了 xD) 如果沒有成功完賽,那大概也...