A simple image map editor developed with reactjs, fabricjs, and ant.design
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
- 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)
