鐵人檔案
無邊際畫布的應用無所不在，Figma、excalidraw、tldraw 等等都可以看到它們的蹤跡。之前個人專案的開發需要一個無限畫布，不過因為我是屬於熱愛造輪子的人，我並沒有去尋找現成的解決方案，而是開始研究起無限畫布的實作方法。 一不小心就掉進這個坑了，現在我把這個坑佈置得舒舒服服的，邀請大家一起來坑裡作客。
前言 嗨，大家好！其實從蠻久以前就有耳聞鐵人賽，身邊也有一些朋友參加過了，本來想說去年要參加，但是計劃趕不上變化，忙著找工作腦袋就完全忘記這件事情了。xD 也...
什麼是無限畫布？ 簡單來說無限畫布就是一張大白紙的概念，你可以在這張白紙上面畫上你想要的任何東西在任何你想要的地方，而如果要給這張畫布的尺寸設下限制，你希望會...
Canvas 到底怎麼用？ canvas 是一種 HTML 的標籤，它在 flash 式微消失後成為在網頁上創作的主要手段。 很多 2D 圖像的表現都可以用...
Canvas 只是睡著了？ Canvas 本身是沒有「動」的概念。 已經畫下去的東西除非把它擦掉或是畫新的東西覆蓋上去，不然它是不會消失的。 畫在上面的東西是...
今天起這個系列要開始實作了！啪唧啪唧啪唧 今天要講的是向量，以及怎麼做向量相關的計算。這算是進入正篇之前的前菜！ 前置作業 以下有三個方法大家可以一起跟著做：...
我今天又要跳脫一下實作來解釋一些技術上面的抉擇。 今天的主題主要是關於 HTML canvas 的，如果你對實作選擇背後的考量沒有太大興趣的話，你今天可以先休...
前言：還沒有實作之前提到的功能，就要先畫東西嗎？ 前面在 Day 02 的時候有提到這個系列主要會實作移動無限畫布的功能。 不過在那個之前，需要先做的是無限畫...
今天我想要先概略講解一下我們會怎麼去拆解無限畫布這個看似範圍很大的問題，把它變成一些可以模組化的東西。 我們需要一個相機 相機是一個比較具體的比喻 要怎麼把無...
今天要講解的東西是座標系的轉換(昨天有稍微提到過了)。 為什麼我們需要座標系轉換？ 簡短來說就是當使用者在螢幕上點擊時，我們要知道他點擊了哪裡？ 或者是說當使...
今天要來實作無限畫布三本柱之一：平移 (pan) 那我們廢話不多說，直接進入正題。 我們主要會支援三種使用者輸入方式：鍵盤滑鼠、觸控板、螢幕觸控（主要針對手機...
