react design editor

Editor Desain Bereaksi

React Design Editor adalah modul untuk React, ditulis dalam JavaScript/TypeScript yang menyediakan dua fitur utama:

• Image Editor - Buat gambar di React, menggambar diagram dan mengatur komposisi menggunakan editor gambar dan menyimpan hasilnya ke salah satu dari beberapa format ekspor, memberikan fungsionalitas yang mirip dengan PowerPoint.
• Business Process Modeling (BPM) - Diagram alur desain dan memproses alur kerja di React dan Ekspor Model ke JSON, yang dapat diimpor ke alat (Load/Save).

Modul ini terutama menggunakan desain semut, fabric.js dan perpustakaan bereaksi, tetapi daftar lengkap dependensi yang diperlukan dapat ditemukan di bawah ini.

Cobalah hari ini - proyek ini terus dikembangkan untuk mendukung berbagai fungsi yang berbeda.

Lihat demo

Daftar fitur

• Tambahkan, Hapus, Ubah Ubah, Pesan Ulang, Klon, Salin/Tempel dan Seret/Jatuhkan Elemen
• Kemampuan menggambar, dengan poligon, garis, panah dan dukungan tautan
• Mode pratinjau, tooltips, grup/ungroup dan fungsi zoom
• Unggah (dengan drag/drop), impor dan ekspor ke json atau gambar
• Pemangkasan gambar, filter gambar, perataan, panduan penyelarasan
• Snap to Grid, Menu Konteks, Animasi dan Elemen Video
• Berbagai ikon dalam pemetik ikon dan font dari Google Fonts (20)
• Elemen html/css/js, elemen iframe
• Dukungan animasi, dengan efek fade / bouncing / shake / scaling / rotation / flash
• Editor Kode dengan HTML / CSS / JS / Pratinjau
• Berbagai mode interaksi, termasuk genggaman, seleksi, ctrl + drag grab
• Beberapa tata letak, dengan mode full, layar penuh dan grid
• Elemen SVG, Bagan dan GIF
• Undo/Redo Support
• Wireframes - dalam pengembangan
• Beberapa peta - dalam pengembangan
• Penguasa - dalam Pembangunan

Instalasi

Jalankan npm install react-design-editor atau yarn add react-design-editor

Memulai

1. Klon proyek ini dengan git clone https://github.com/salgum1114/react-design-editor.git
2. Instal dependensi dengan npm install atau yarn NPM
3. Jalankan aplikasi dengan npm start atau yarn start
4. Buka browser web Anda ke http://localhost:4000

Tanya AI

React Design Editor AI akan membantu Anda memahami repositori ini dengan lebih baik.

Tangkapan layar

Editor peta gambar

1. Mode tata letak tetap

2. Mode tata letak responsif

3. mode tata letak layar penuh

4. Mode Pratinjau

Editor alur kerja

❤️ Sponsor dan pendukung

Dependensi

Ketergantungan	Lisensi
Bereaksi	Mit
Desain semut	Mit
Fabric.js	Mit
Mediaelement.js	Mit
React-ace	Mit
Interact.js	Mit
anime.js	Mit
Webpack 4	Mit
Babel	Mit
fontawesome5	Ikon (CC dengan 4.0), font (SIL OFL 1.1), kode (MIT)