https://github.com/kevoj/angular-editor-fabric-js

Drag-and-drop editor based on Fabricjs for Angular.io
https://github.com/kevoj/angular-editor-fabric-js

angular angular-cli angular-fabric canvas drag-and-drop editor fabric fabricjs resizable

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kevoj/angular-editor-fabric-js
• Owner: kevoj
• License: mit
• Created: 2017-07-13T16:01:23.000Z (over 7 years ago)
• Default Branch: develop
• Last Pushed: 2023-11-15T09:55:03.000Z (12 months ago)
• Last Synced: 2024-09-25T15:41:05.761Z (about 2 months ago)
• Topics: angular, angular-cli, angular-fabric, canvas, drag-and-drop, editor, fabric, fabricjs, resizable
• Language: TypeScript
• Homepage:
• Size: 3.16 MB
• Stars: 431
• Watchers: 23
• Forks: 144
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# angular-editor-fabric-js

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

### Example

![Imgur](https://i.imgur.com/sQsL8G4.png)

### Output

![Imgur](https://i.imgur.com/hgTEb20.png)

### 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

```bash

npm i angular-editor-fabric-js

```

# Development

## Installing the project

```bash

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](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

Before running the tests make sure you are serving the app via `ng serve`.

## License

[MIT ©](https://github.com/kevoj/angular-editor-fabric-js/blob/master/LICENSE)