react design editor

رئيس تحرير التصميم

React Design Editor عبارة عن وحدة نمطية لـ React ، مكتوبة في JavaScript/TypeScript والتي توفر ميزتين أساسيتين:

• محرر الصور - قم بإنشاء صور في React ، ورسم الرسوم البيانية وترتيب التراكيب باستخدام محرر الصور وحفظ النتيجة إلى واحدة من العديد من تنسيقات التصدير ، يوفر وظائف مشابهة لـ PowerPoint.
• نمذجة العمليات التجارية (BPM) - تصميم مخططات انسيابية وعملية سير العمل في رد الفعل وتصدير النموذج إلى JSON ، والتي يمكن استيرادها إلى الأداة (تحميل/حفظ).

تستخدم الوحدة في المقام الأول تصميم ANT و Fabric.js وتفاعل المكتبات ، ولكن يمكن العثور على قائمة كاملة من التبعيات المطلوبة أدناه.

جربه اليوم - يتم تطوير المشروع باستمرار لدعم مجموعة متنوعة من الوظائف المختلفة.

عرض العرض التوضيحي

قائمة الميزات

• أضف وإزالة وتغيير حجمه وإعادة ترتيبه ونسخه ونسخه/لصقه وسحبه/إسقاطه
• القدرة على الرسم ، مع المضلع والخط والسهام ودعم الارتباط
• وضع المعاينة ، تدوات الأدوات ، وظائف المجموعة/UNGOUR
• تحميل (مع السحب/الإسقاط) ، استيراد وتصدير إلى JSON أو Image
• زراعة الصورة ، مرشحات الصور ، المحاذاة ، أدلة المحاذاة
• انقط إلى الشبكة وقائمة السياق والرسوم المتحركة وعنصر الفيديو
• أيقونات مختلفة في Icon Picker وخطوط من Google Fonts (20)
• عنصر HTML/CSS/JS ، عنصر iframe
• دعم الرسوم المتحركة ، مع آثار التلاشي / الارتداد / الهز / التحجيم / الدوران / الفلاش
• محرر الرمز مع HTML / CSS / JS / Preview
• أوضاع تفاعل مختلفة ، بما في ذلك الاستيلاء ، والاختيار ، Ctrl + Grag Grab
• تخطيطات متعددة ، مع أوضاع ثابتة وسريعة الاستجابة
• عناصر 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

اسأل الذكاء الاصطناعي

سيساعدك محرر التصميم React AI على فهم هذا المستودع بشكل أفضل.

لقطات الشاشة

محرر خريطة الصورة

1. وضع التصميم الثابت

2. وضع التصميم المستجيب

3. وضع تخطيط الشاشة بملء الشاشة

4. وضع المعاينة

محرر سير العمل

❤ الرعاة والمؤيدين

التبعيات

التبعية	ترخيص (ق)
رد فعل	معهد ماساتشوستس للتكنولوجيا
تصميم النمل	معهد ماساتشوستس للتكنولوجيا
Fabric.JS	معهد ماساتشوستس للتكنولوجيا
MediaElement.JS	معهد ماساتشوستس للتكنولوجيا
رد فعل	معهد ماساتشوستس للتكنولوجيا
التفاعل	معهد ماساتشوستس للتكنولوجيا
anime.js	معهد ماساتشوستس للتكنولوجيا
WebPack 4	معهد ماساتشوستس للتكنولوجيا
بابل	معهد ماساتشوستس للتكنولوجيا
fontawesome5	الرموز (CC by 4.0) ، الخطوط (SIL OFL 1.1) ، الكود (MIT)