react design editor

React Design Editor

React Design Editorは、2つの主要な機能を提供するJavaScript/TypeScriptで書かれたReactのモジュールです。

• 画像エディター - Reactで画像を作成し、図を描画し、画像エディターを使用して構成を配置し、結果をいくつかのエクスポート形式のいずれかに保存し、PowerPointと同様の機能を提供します。
• Business Process Modeling（BPM） - フローチャートとプロセスワークフローを反応し、モデルをJSONにエクスポートします。これは、ツールにインポートできます（ロード/保存）。

モジュールは主にAnt Design、Fabric.js、およびReactライブラリを使用しますが、必要な依存関係の完全なリストを以下に示します。

今すぐ試してみてください - プロジェクトは、さまざまな機能をサポートするために継続的に開発されています。

デモを表示します

機能リスト

• 追加、削除、サイズ変更、並べ替え、クローン、コピー/貼り付け、ドラッグ/ドロップ要素を追加します
• ポリゴン、ライン、矢印、リンクサポートを備えた描画機能
• プレビューモード、ツールチップ、グループ/グループ、ズーム機能
• アップロード（ドラッグ/ドロップ付き）、JSONまたは画像へのインポートとエクスポート
• 画像のトリミング、画像フィルター、アライメント、アライメントガイド
• グリッド、コンテキストメニュー、アニメーション、ビデオ要素へのスナップ
• Googleフォントからのアイコンピッカーとフォントのさまざまなアイコン（20）
• HTML/CSS/JS要素、IFRAME要素
• フェード /バウンス /シェイク /スケーリング /ローテーション /フラッシュ効果を備えたアニメーションサポート
• HTML / CSS / JS /プレビューを備えたコードエディター
• 把握、選択、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. Webブラウザをhttp://localhost:4000に開きます

aiに尋ねてください

React Design Editor AIは、このリポジトリをよりよく理解するのに役立ちます。

スクリーンショット

画像マップエディター

1.レイアウトモードを修正しました

2。レスポンシブレイアウトモード

3。フルスクリーンレイアウトモード

4。プレビューモード

ワークフローエディター

❤️スポンサーと支援者

依存関係

依存	ライセンス
反応します	mit
アリのデザイン	mit
fabric.js	mit
MediaElement.js	mit
反応 - エース	mit
interact.js	mit
Anime.js	mit
ウェブパック4	mit
バベル	mit
fontawesome5	アイコン（CC by 4.0）、フォント（SIL ofL 1.1）、コード（MIT）