This is an Angular wrapper library for the Fabric. To use this library you should get familiar with the Fabric documentation as well since this documentation only explains details specific to this wrapper.
Example application | StackBlitz example | Fabric documentation
npm install
npm run buildnpm install
npm run startnpm install ngx-fabric-wrapper --save --no-optionalProviding the global configuration is optional and when used you should only provide the configuration in your root module.
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
}
]
})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.
<fabric [config]="config" [data]="json"></fabric>[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.
(<fabricEvent>) // All Fabric canvas events / callbacks work as bindings.
// Event names are in camel case (not colon separated).
// Example: object:added -> objectAddedDIRECTIVE USAGE
Fabric directive can be used in correctly structured canvas element with optional custom configuration:
<canvas class="fabric" [fabric]="config"></canvas>[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).
(<fabricEvent>) // All Fabric canvas events / callbacks work as bindings.
// Event names are in camel case (not colon separated).
// Example: object:added -> objectAddedselectionColor // 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.
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).