Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zefoy/ngx-fabric-wrapper
Angular wrapper library for Fabric
https://github.com/zefoy/ngx-fabric-wrapper
Last synced: 2 months ago
JSON representation
Angular wrapper library for Fabric
- Host: GitHub
- URL: https://github.com/zefoy/ngx-fabric-wrapper
- Owner: zefoy
- License: mit
- Created: 2017-11-19T08:51:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-07T12:43:52.000Z (5 months ago)
- Last Synced: 2024-08-08T19:42:21.002Z (4 months ago)
- Language: TypeScript
- Size: 6.45 MB
- Stars: 20
- Watchers: 8
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-fabric-wrapper - Angular wrapper library for [Fabric](http://fabricjs.com/). (Table of contents / Angular)
- fucking-awesome-angular - ngx-fabric-wrapper - Angular wrapper library for [Fabric](http://fabricjs.com/). (Table of contents / Angular)
README
# Angular Fabric Wrapper
This is an Angular wrapper library for the [Fabric](http://fabricjs.com/). To use this library you should get familiar with the Fabric documentation as well since this documentation only explains details specific to this wrapper.
### Quick links
[Example application](https://zefoy.github.io/ngx-fabric-wrapper/)
|
[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-fabric-wrapper/tree/master)
|
[Fabric documentation](http://fabricjs.com/docs/)
### Building the library
```bash
npm install
npm run build
```
### Running the example
```bash
npm install
npm run start
```
### Installing and usage
```bash
npm install ngx-fabric-wrapper --save --no-optional
```
##### Load the module for your app (with global configuration):
Providing the global configuration is optional and when used you should only provide the configuration in your root module.
```javascript
import { FabricModule } from 'ngx-fabric-wrapper';
import { FABRIC_CONFIG } from 'ngx-fabric-wrapper';
import { FabricConfigInterface } from 'ngx-fabric-wrapper';
const DEFAULT_FABRIC_CONFIG: FabricConfigInterface = {
};
@NgModule({
...
imports: [
...
FabricModule
],
providers: [
{
provide: FABRIC_CONFIG,
useValue: DEFAULT_FABRIC_CONFIG
}
]
})
```
##### Use it in your HTML template (with custom configuration):
This library provides two ways to create a Fabric canvas, component for simple use cases and directive for more custom use cases.
**COMPONENT USAGE**
Simply replace the canvas that would ordinarily be passed to `Fabric` with the fabric component.
```html
```
```javascript
[config] // Custom config to override the global defaults.
[data] // JSON data to be loaded on the Fabric canvas.
[zoom] // Zoom level for the Fabric canvas (Default: 1).
[width] // Width of the canvas (Default: parents width).
[height] // Height of the canvas (Default: parents height).
[disabled] // Disables all functionality (uses static canvas).
[useFabricClass] // Use fabric class (use provided default styles).
(dataLoaded) // Event for when provided data is loaded to the canvas.
() // All Fabric canvas events / callbacks work as bindings.
// Event names are in camel case (not colon separated).
// Example: object:added -> objectAdded
```
**DIRECTIVE USAGE**
Fabric directive can be used in correctly structured canvas element with optional custom configuration:
```html
```
```javascript
[fabric] // Custom config to override the global defaults.
[zoom] // Zoom level for the Fabric canvas (Default: 1).
[width] // Width of the canvas (Default: parents width).
[height] // Height of the canvas (Default: parents height).
[disabled] // Disables all functionality (focus & editing).
() // All Fabric canvas events / callbacks work as bindings.
// Event names are in camel case (not colon separated).
// Example: object:added -> objectAdded
```
##### Available configuration options (custom / global configuration):
```javascript
selectionColor // Color for the selection indicators.
renderOnAddRemove // Render automatically on objects add / removal.
```
For more detailed documentation with all the supported config options see the Fabric documentation.
##### Available control / helper functions (provided by the directive):
```javascript
fabric() // Returns the Fabric canvas reference for full API access.
clear() // Clears all contexts (background, main, top) of an instance.
setZoom(zoom) // Sets the zoom level of the canvas (less than 1 zooms out).
setWidth(width) // Sets canvas width (when null then parent width is used).
setHeight(height) // Sets canvas height (when null then parent height is used).
loadFromJSON(json, cb?, opts?) // Populates canvas from json (callback called when finished).
```
Above functions can be accessed through the directive reference (available as directiveRef in the component).