GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kevoj → Angular Editor Fabric Js

kevoj / Angular Editor Fabric Js

Licence: mit
Drag-and-drop editor based on Fabricjs for Angular.io

Programming Languages

typescript
32286 projects

Labels

angulareditorcanvasdrag-and-dropangular-clifabricresizable

Projects that are alternatives of or similar to Angular Editor Fabric Js

Pixelcraft
A Pixel Art Editor
Stars: ✭ 413 (+40%)
Mutual labels:  editor, canvas
Web Editor
Web可视化组态编辑器(Angular8)
Stars: ✭ 67 (-77.29%)
Mutual labels:  editor, drag-and-drop
Diagram
☊ Tool for making node graphs. Inspired by dependency graph. Used mainly for automation services 📈
Stars: ✭ 510 (+72.88%)
Mutual labels:  editor, canvas
Jspaint
🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras
Stars: ✭ 5,972 (+1924.41%)
Mutual labels:  editor, canvas
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+607.12%)
Mutual labels:  editor, canvas
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (-44.75%)
Mutual labels:  drag-and-drop, resizable
React Design Editor
React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs
Stars: ✭ 687 (+132.88%)
Mutual labels:  editor, canvas
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Stars: ✭ 6,985 (+2267.8%)
Mutual labels:  drag-and-drop, canvas
Sketchpad
Sketchpad is fully customisable collaborative whiteboard plugin written in pure JavaScript.
Stars: ✭ 85 (-71.19%)
Mutual labels:  editor, canvas
Wyg
A new WYSIWYG editing experience for the modern web
Stars: ✭ 73 (-75.25%)
Mutual labels:  editor, drag-and-drop
Animockup
Create animated mockups in the browser 🔥
Stars: ✭ 1,152 (+290.51%)
Mutual labels:  editor, canvas
react-web-editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
Stars: ✭ 191 (-35.25%)
Mutual labels:  drag-and-drop, resizable
Piper
A drag-and-drop mobile website builder base on Vue
Stars: ✭ 228 (-22.71%)
Mutual labels:  editor, drag-and-drop
pikaso
Seamless and headless HTML5 Canvas library
Stars: ✭ 23 (-92.2%)
Mutual labels:  canvas, fabric
Netbeans Mmd Plugin
Free mind map and PlantUML editor with plugins for both NetBeans and Intellij
Stars: ✭ 283 (-4.07%)
Mutual labels:  editor
Zx Editor
The HTML document (rich text) editor in Smart phone browser or webview, supporting mixed layout, reference, headline, unordered list, font color, bold and italics. 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体
Stars: ✭ 292 (-1.02%)
Mutual labels:  editor
Angular Ssr
Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
Stars: ✭ 283 (-4.07%)
Mutual labels:  angular-cli
Easycanvas
数据驱动、2D&3D、渐进式Canvas库，支持JSX，配备Chrome调试插件，支持微信小游戏、物理引擎等。
Stars: ✭ 281 (-4.75%)
Mutual labels:  canvas
Eleditor
移动端富文本编辑器
Stars: ✭ 292 (-1.02%)
Mutual labels:  editor
Use Editable
A small React hook to turn elements into fully renderable & editable content surfaces, like code editors, using contenteditable (and magic)
Stars: ✭ 291 (-1.36%)
Mutual labels:  editor
View All Similar Projects ➔

angular-editor-fabric-js

Drag-and-drop editor based on Fabricjs for Angular with multiple options

Example

Imgur

Output

Imgur

Features

  • Export to image
  • Export to SVG
  • Save to localStorage
  • Load From LocalStorage
  • Clean workspace
  • Resize workspace
  • Add text
  • Add Images
  • Upload Images
  • Add figures (Rectangle, Triangle, Square, Circle)
  • Render to JSON
  • Clone Object
  • Sent to front Object
  • Sent to back Object
  • Delete Object
  • Unselect Object
  • Add ID to Object
  • Opacity to Object
  • Color to Object
  • Font Famility to Object
  • Text Align to Object
  • Style to Object
  • Font Size to Object
  • Line Height To Object
  • Char Spacing to Object

Installing the library in your project

npm i angular-editor-fabric-js

Development

Installing the project

git clone https://github.com/kevoj/angular-editor-fabric-js.git
cd angular-editor-fabric-js
npm install

Start

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

License

MIT ©

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].