Other Projects » xray_game

背景

教師後台的 ROI 標記工具原本僅支援圓圈（Circle），無法精確標記不規則形狀的病灶區域。本次迭代新增多
邊形（Polygon）繪製工具，支援直線段與二次貝茲曲線段，並將 Undo/Redo 升級為完整的歷史堆疊機制。

變更範圍

1. TeacherTool.jsx — 多邊形繪製工具與歷史堆疊

• 新增 activeTool 狀態，提供 Circle / Polygon 工具切換選擇器
• 實作多邊形繪製邏輯：點擊放置錨點（直線）、Shift+點擊拖曳建立二次貝茲曲線控制點、點擊起始錨點封
  多邊形
• 支援 Shift+點擊封閉以曲線收尾（closingCurveRef 追蹤封閉拖曳狀態）
• 新增 Undo/Redo/Clear All 歷史堆疊，快照結構為 { rois, drawingPolygon }，使用 historyIndexRef
  避免閉包陳舊值
• Canvas 渲染擴充：已完成的 polygon ROI（紅色實線）、進行中的 polygon（橘色虛線 + 預覽線 +
  錨點圓點 + 綠色封閉提示）
• 儲存時若有未封閉 polygon 會彈出確認提示
• 切換工具/圖片/分類時正確重置所有新狀態

2. server/index.js — 多邊形計分邏輯

• 新增
  isPointInCircle()、bezierToLineSegments()、isPointInPolygon()（ray-casting）、isPointInROI()
  工具函式
• scoreAnswer() 中的兩處內聯距離判斷改為呼叫 isPointInROI()，支援 circle 與 polygon 兩種 ROI 類型

3. GameClient.jsx / PracticeGame.jsx — 多邊形視覺化

• 答題後顯示的真值 ROI 區段新增 polygon 分支，使用 moveTo/lineTo/quadraticCurveTo
  繪製，套用各自的座標轉換（zoom + panOffset）
• 視覺風格與現有圓圈 ROI 一致：綠色虛線 #00ff88 + 半透明填充

4. 文件更新

• architecture.md：更新 ROI 資料結構、計分碰撞檢測說明、題庫管理功能描述、檔案行數
• README.md：新增主要功能摘要、展開專案結構至元件層級
• ROI.md：從需求 prompt 改為需求與實作紀錄

ROI 資料結構

Circle: { type: "circle", x, y, radius }
Polygon: { type: "polygon", points: [{x,y},...], segments: [{type:"line"} | {type:"curve", cpx,
cpy},...] }