A simple image map editor developed with reactjs, fabricjs, and ant.design

Sunggyun Oh
Sep 4, 2018 · 2 min read

https://github.com/salgum1114/react-design-editor

React Design Editor

  • The project was developed as react.js, ant.design, fabric.js and started to create editable design tools such as PowerPoint and slides.
  • React Design Eidtor used fabric.js, because the main container starts with the canvas.
  • Layouts and components such as property edits, item lists, toolbars were developed as react.js and the ant.design component was primarily used.
  • The project is constantly being developed to support a variety of functions, and its goal is to be able to draw workflow (BPMN) in the future.

Demos

https://salgum1114.github.io/react-design-editor/

GitHub

https://github.com/salgum1114/react-design-editor

Image Map

Three layout mode

  1. Fixed

Workarea Fixed

2. Responsive

Preserves image quality

3. Fullscreen

Fills the container area

4. Preview Mode

Workflow

Supported

  • Add
  • Remove
  • Resize
  • Clone
  • Tooltip
  • Reorder
  • Zoom
  • Preview
  • Copy/Paste
  • Drag/Drop
  • Image Upload
  • Alignments
  • Drawing (Polygon/Line/ArrowLine/Link)
  • Export/Import (JSON)
  • Video
  • Dom Element
  • Code Editor (HTML/CSS/JS/Preview)
  • iframe
  • Animation (Fade/Bounce/Shake/Scaling/Rotation/Flash)
  • Icon Chooser (Fontawesome 5.2.0)
  • Google Fonts (20 fonts)
  • Align Guidelines (Moving)
  • Interaction Mode (Grap/Selection)
  • Group/Ungroup
  • Image Cropping
  • Save Images (Canvas/Target Objects)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade