iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Software Development

從零打造網頁簡報編輯器 系列

用 React、TypeScript、DOM 與 CSS,從零打造可實際操作的網頁簡報編輯器。30 天將逐步拆解文件模型、畫布座標、文字與圖片操作、中文輸入法、復原重做、IndexedDB 本機保存、專案備份、播放模式與 PDF 輸出。每篇都會記錄設計選擇、實作過程、限制,以及可重現的測試或操作證據。

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11|調整大小時如何維持圖片比例

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.1.0 版本說明:本文記錄第一版的單一右下角控制點;後續旋轉、翻轉與裁...

2026-09-21 ‧ 由 0000workjason 分享
DAY 12

Day 12|用屬性面板調整座標與文字樣式

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.1.0 版本說明:本文記錄第一版的單選屬性面板;後續多選功能會把相同的...

2026-09-22 ‧ 由 0000workjason 分享
DAY 13

Day 13|從單選走到框選與多選

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文採用進階編排功能與位置鎖定都已具備的穩定版本。...

2026-09-23 ‧ 由 0000workjason 分享
DAY 14

Day 14|群組物件為什麼必須一起移動

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文記錄第一版的扁平群組模型,不建立額外的群組容器物...

2026-09-24 ‧ 由 0000workjason 分享
DAY 15

Day 15|拖曳吸附參考線如何計算

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文描述第一版以未旋轉矩形外框計算的吸附規則。 自...

2026-09-25 ‧ 由 0000workjason 分享
DAY 16

Day 16|對齊、平均分布與快速版型

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文把第一版的對齊、分布與空白投影片快速版型放在同一...

2026-09-26 ‧ 由 0000workjason 分享
DAY 17

Day 17|複製、剪下與跨投影片貼上

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文記錄第一版的編輯器內剪貼簿;它可跨投影片使用,但...

2026-09-27 ‧ 由 0000workjason 分享
DAY 18

Day 18|用穩定順序處理物件圖層

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文使用物件陣列順序做為第一版的持久圖層資料,不為每...

2026-09-28 ‧ 由 0000workjason 分享
DAY 19

Day 19|用同一套渲染器加入圖形與箭頭

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文記錄矩形、橢圓、線段與箭頭共用資料模型與渲染元件...

2026-09-29 ‧ 由 0000workjason 分享
DAY 20

Day 20|不重建物件的圖片替換與裁切

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.4.0 版本說明:本文記錄圖片 frame、圖片資產與裁切設定彼此分離...

2026-09-30 ‧ 由 0000workjason 分享