react design editor

React Design 편집기

React Design Editor는 JavaScript/TypeScript로 작성된 React 용 모듈로 두 가지 주요 기능을 제공합니다.

• 이미지 편집기 - 이미지에서 이미지 생성, 이미지 편집기를 사용하여 다이어그램을 그리며 구성을 정렬하고 결과를 여러 내보내기 형식 중 하나로 저장하면 PowerPoint와 유사한 기능을 제공합니다.
• BPM (Business Process Modeling) - React의 설계 유량 차트 및 프로세스 워크 플로우 및 모델을 JSON으로 내보내며 도구 (로드/저장)로 가져올 수 있습니다.

이 모듈은 주로 Ant Design, Fabric.js 및 React 라이브러리를 사용하지만 필요한 종속성의 전체 목록은 아래에서 찾을 수 있습니다.

오늘 시도해보십시오. 프로젝트는 다양한 기능을 지원하기 위해 지속적으로 개발되고 있습니다.

데모보기

기능 목록

• 추가, 제거, 크기 조정, 재주문, 복제, 복사/붙여 넣기 및 드래그/드롭 요소를 추가하십시오
• 다각형, 라인, 화살표 및 링크 지지대가있는 드로잉 기능
• 미리보기 모드, 툴팁, 그룹/그룹 및 줌 기능
• 업로드 (드래그/드롭 포함), JSON 또는 이미지로의 가져 오기 및 내보내기
• 이미지 자르기, 이미지 필터, 정렬, 정렬 가이드
• 그리드, 컨텍스트 메뉴, 애니메이션 및 비디오 요소에 스냅하십시오
• 아이콘 피커의 다양한 아이콘과 Google 글꼴의 글꼴 (20)
• HTML/CSS/JS 요소, iframe 요소
• 페이드 / 바운스 / 흔들림 / 스케일링 / 회전 / 플래시 효과와 함께 애니메이션 지원
• HTML / CSS / JS / 미리보기와 코드 편집기
• Grasp, Selection, Ctrl + Drag 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 으로 엽니 다

AI에게 물어보세요

React Design Editor AI는이 저장소를 더 잘 이해하는 데 도움이됩니다.

스크린 샷

이미지지도 편집기

1. 고정 레이아웃 모드

2. 응답 레이아웃 모드

3. 전체 화면 레이아웃 모드

4. 미리보기 모드

워크 플로우 편집기

❤️ 후원자와 후원자

의존성

의존	라이센스
반응	MIT
개미 디자인	MIT
fabric.js	MIT
MediaElement.js	MIT
반응-종족	MIT
interact.js	MIT
애니메이션 .js	MIT
웹 팩 4	MIT
바벨	MIT
fontawesome5	아이콘 (CC x 4.0), 글꼴 (SIL OFL 1.1), 코드 (MIT)