iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Software Development

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

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

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

Day 01|我要做一個什麼樣的簡報工具

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-01 我想做的不是另一個功能完整的 PowerPoint,而是一個...

2026-09-11 ‧ 由 0000workjason 分享
DAY 2

Day 02|把簡報工具拆成可以完成的工作

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-02 「做一個簡報工具」無法直接變成每天可以完成的工作。文字輸入、...

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

Day 03|一張投影片需要哪些資料

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-03 版本說明:本文記錄當日實作;後續版本增加的物件與欄位不改變這裡...

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

Day 04|建立第一張可以呈現內容的投影片

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-04 版本說明:本文記錄當日實作;後續版本增加的物件與欄位不改變這裡...

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

Day 05|選擇畫布的呈現方式

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-05 版本說明:本文記錄當日選型;目前版本仍沿用固定邏輯畫布與 DO...

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

Day 06|新增切換與排序多張投影片

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-06 版本說明:本文記錄當日實作;後續加入略過投影片等功能時,仍沿用...

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

Day 07|把文字與圖片變成可操作的物件

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-07 版本說明:本文記錄當日的文字與圖片操作;後續圖形與群組功能仍共...

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

Day 08|畫布縮放後座標如何保持正確

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag day-08 版本說明:本文記錄當日實作;目前版本新增的多選拖曳、框選與吸附...

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

Day 09|選取、文字焦點與中文輸入如何共存

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.1.0 版本說明:本文整理第一版的文字互動規則;後續多選、群組與文字格...

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

Day 10|讓拖曳在不同縮放比例下都正確

系列:一張投影片背後的工程:從零打造網頁簡報編輯器 對應程式版本:Git tag v0.1.0 版本說明:本文延續 Day 08 的座標換算,改從一次完整拖曳...

2026-09-20 ‧ 由 0000workjason 分享