react design editor

React設計編輯

React Design編輯器是用JavaScript/Typescript編寫的React的模塊，提供了兩個主要功能：

• 圖像編輯器 - 在React中創建圖像，繪製圖表並使用圖像編輯器排列組成，並將結果保存到幾種導出格式之一中，提供類似於PowerPoint的功能。
• 業務流程建模（BPM） - 設計流程圖和REACT工作流程和流程工作流程和將模型導出到JSON，可以將其導入到工具中（負載/保存）。

該模塊主要使用螞蟻設計，Fabric.js和React庫，但是可以在下面找到所需依賴項的完整列表。

今天嘗試一下 - 該項目正在不斷開發以支持各種不同的功能。

查看演示

功能列表

• 添加，刪除，調整大小，重新排序，克隆，複製/粘貼和拖動/刪除元素
• 帶有多邊形，線，箭頭和鏈接支持的繪圖功能
• 預覽模式，工具提示，組/UNGROUP和ZOOM功能
• 上傳（帶有拖放），導入和導出到JSON或圖像
• 圖像裁剪，圖像過濾器，對齊，對齊指南
• 快到網格，上下文菜單，動畫和視頻元素
• 圖標選擇器中的各種圖標和Google字體的字體（20）
• html/css/js元素，iframe元素
• 動畫支持，帶有淡出 /彈跳 /震動 /縮放 /旋轉 /閃光效果
• 帶有HTML / CSS / JS / Preview的代碼編輯器
• 各種互動模式，包括掌握，選擇，ctrl +拖動抓取
• 多個佈局，具有固定，響應，全屏和網格模式
• SVG，圖表和GIF元素
• 撤消/重做支持
• 線框 - 開發
• 多個地圖 - 開發
• 統治者 - 發展

安裝

運行npm install react-design-editor或yarn add react-design-editor

入門

1. 用git clone https://github.com/salgum1114/react-design-editor.git克隆這個項目。
2. 使用npm install或yarn安裝依賴項
3. 使用npm start或yarn start運行該應用
4. 打開您的網絡瀏覽器至http://localhost:4000

問AI

React設計編輯AI將幫助您更好地了解該存儲庫。

屏幕截圖

圖像圖編輯器

1。固定佈局模式

2。響應式佈局模式

3。全屏佈局模式

4。預覽模式

工作流編輯器

❤️贊助商和支持者

依賴性

依賴性	許可證
反應	麻省理工學院
螞蟻設計	麻省理工學院
織物	麻省理工學院
Medialement.js	麻省理工學院
反應區域	麻省理工學院
Interact.js	麻省理工學院
動漫	麻省理工學院
Webpack 4	麻省理工學院
別貝	麻省理工學院
fontawesome5	圖標（CC BY 4.0），字體（SIL ofl 1.1），代碼（MIT）