Skip to main content

RFC-005: Advanced Frame Customization Implementation

Overview​

Technical implementation for visual frame builder with layers, camera zones, and element management.

Feature Requirements​

Feature: Deeply customizable frames, including adding images and specific photos (Similar to DSLRbooth).

Details:

  • Add image elements to the frame.
  • Layer management (arrange which elements are above or below others).
  • Add the live photo feed from the camera into the layout.
  • The sizes of these elements can be adjusted freely.

Features​

1. Background Image​

  • Upload base frame image
  • Support JPG, PNG, WebP

2. Camera Zones​

  • Define rectangular areas for photo placement
  • Resize and position via drag
  • Support multiple zones (for multi-shot layouts)

3. Overlay Elements​

  • Add image overlays (stickers, graphics)
  • Text elements with customization
  • SVG shape support

4. Layer Management​

  • Z-index ordering
  • Bring forward/send backward
  • Lock/unlock elements

5. Presets​

  • Save current configuration
  • Load saved presets
  • Set default preset

Data Model​

Canvas Renderer​

Component Architecture​

Implementation Phases​

  1. Phase 1: Canvas rendering + background support
  2. Phase 2: Camera zone positioning
  3. Phase 3: Overlay elements + layer management
  4. Phase 4: Drag resize + properties panel
  5. Phase 5: Preset save/load system