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）