描描｜相機描圖

透過手機相機，將參考圖片疊在畫紙的即時畫面上，輔助描繪輪廓、掌握比例，享受手繪的樂趣。

立即使用

功能

• 相機預覽：以 4:3 比例填滿工作區。
• 選擇參考圖片：載入裝置中的 JPG、PNG、WebP 或 GIF 圖片。
• 觸控調整：單指拖曳移動，雙指縮放與旋轉。
• 透明度調整：同時看清參考圖片與紙上的筆跡。
• 位置鎖定：對齊後鎖定，避免描繪時誤觸。
• 快速查看筆跡：暫時隱藏參考圖片，查看繪畫進度。

使用方式

1. 使用支架固定手機，讓後置鏡頭對準畫紙。
2. 開啟網站，點選「開啟相機」並允許相機權限。
3. 選擇想描繪的參考圖片。
4. 調整圖片的位置、大小、角度與透明度。
5. 點選「鎖定位置，開始畫」，看著螢幕在紙上描繪。

建議使用手機 Safari 或 Chrome，並在開始前關閉螢幕自動旋轉。

使用須知

• 參考圖片只會顯示在螢幕中，不會實際投影到紙上。
• 本工具不會追蹤紙張位置。描繪時請保持手機與畫紙不動，移動後需重新對齊。
• 相機畫面會等比例裁切以填滿工作區，不會拉伸變形。
• 單張參考圖片大小上限為 25 MB。

隱私

參考圖片與相機畫面均在裝置內處理，不會上傳至伺服器。網站不使用分析追蹤，也不會錄製相機畫面。

本機開發

使用 Node.js 24 與 pnpm 10.4.1。

pnpm install --frozen-lockfile --ignore-scripts
pnpm dev:pages

測試與建置：

pnpm test
pnpm typecheck
pnpm build:pages
pnpm preview:pages

專案結構

• app/page.tsx：相機與圖片操作介面。
• app/globals.css：樣式與 4:3 工作區。
• lib/gesture.ts、lib/gesture.test.mjs：手勢計算與測試。
• pages/、vite.pages.config.ts：純靜態 Pages 入口。