How Do You Build a "Tap Who Sits Where" Picker for a Five-Spot AI Video? Normalized Hotspots, 44px Targets and Keyboard Order (Tested JS)

说明与用途

为 9:16 AI 视频构建点击选择角色的工具：归一化热点、44 px 最小目标、键盘支持。

问题

Implement a tap‑based role picker that maps user taps on a 9:16 video frame to predefined role IDs, ensuring consistent behavior across devices and input methods.

结果

The picker reliably maps taps to role IDs across devices, enforces a minimum touch target of 44px, and supports keyboard navigation, improving user experience and reducing errors.

工作流

• Define role hotspots in normalized coordinates (cx, cy, r) relative to a 9:16 frame.
• Implement hitTest to convert clientX/Y to normalized fractions, clamp radius to a minimum 44px, and select the nearest hotspot.
• Render the hotspots as invisible buttons overlaying the image for keyboard and screen‑reader support.
• Attach event listeners for touch and keyboard events to trigger hitTest and update role assignments.
• Provide visual feedback (e.g., labels) and a preview of the selected performers before finalizing.
• Run automated tests with node --test to verify hitTest accuracy across screen sizes.

证据

Store each spot as a circle in fractions of the frame, not in pixels. The frame is always 9:16

来源

Clamp the radius to a minimum touch size. On a small embedded preview, 0.10 × 180px is an 18px radius, a 36px target. The clamp keeps it at 44px across.

来源

Nearest centre wins. Back-row spots sit close to the lead. Without a tie‑break, whichever spot comes first in the array silently wins every overlap.

来源