鐵人檔案
無邊際畫布的應用無所不在，Figma、excalidraw、tldraw 等等都可以看到它們的蹤跡。之前個人專案的開發需要一個無限畫布，不過因為我是屬於熱愛造輪子的人，我並沒有去尋找現成的解決方案，而是開始研究起無限畫布的實作方法。 一不小心就掉進這個坑了，現在我把這個坑佈置得舒舒服服的，邀請大家一起來坑裡作客。
今天我們要接續實作平移，主要是觸控的部分。 我會示範一種觸控平移的操作：一隻手指頭滑動。 這個會是比較簡單但是可以示範基本的觸控操作可以怎麼實作的範例。 之後...
在 Day 06 的時候有提到，我們在實作的 "無限畫布" 實際上並不是真的無限，而是很大很～大的畫布而已。 既然畫布不是真的無限，那相機...
昨天好像不小心一次噴太多內容，希望大家沒有消化不良。 我會持續回去補充 Day 12 的內容，因為我昨天才發現我好像有些東西沒有寫好。 不過 Day 12 的...
前情提要 在前一篇的最後我們幾乎實作完了縮放功能，為什麼說幾乎呢？ 因為它的使用體驗似乎跟其他無限畫布不太一樣，縮放是縮放了沒錯 但是為什麼沒有跟著滑鼠的位置...
今天我們要來講解觸控的縮放！ 我們先來看一下之前實作觸控平移的時候用的 touch-input.ts。 touch-input.ts class TouchI...
為什麼用起來好像怪怪的 前幾篇我們有實作了限制整個視窗的平移功能。 如果你有自己亂玩看看你可能會遇到一個奇怪的現象。 如果你的縮放倍率縮放到最小（數字最小，有...
不知不覺好像已經超過一半的篇數了！大家加油！ 今天我們要講的是相機旋轉的部分。 這是一個不是每個人都會想要或是需要實作的東西，就是看大家斟酌自己的使用場合來決...
今天的內容有點像是支線，所以在實際改動你的 code 之前，可以先把這篇看完再決定要不要去跟著實作！ 在 Day 04 | Canvas 你怎麼沒有反應？ 有...
這個系列主要前半部都是在描述怎麼實作一個無限畫布，但是如果這個無限畫布只是一張空白的紙實在是沒有什麼用處啊！ 所以今天我們要來稍微點綴一下，讓它看起來比較五彩...
今天應該是我最後一篇直接對無限畫布新增功能的開發。 之後真的都會比較偏向應用方面的文章，還有重構拉哈哈哈...哈..哈（小聲 今天的主題是限制！ 什麼是限制呢...
