@axceta/angular-editor-fabric-js
Version:
> Drag-and-drop editor based on Fabricjs for Angular with multiple options
145 lines (144 loc) • 4.82 kB
TypeScript
import { AfterViewInit, EventEmitter } from '@angular/core';
import { fabric } from 'fabric';
export declare const DEFAULT_CANVAS_WIDTH = 500;
export declare class FabricjsEditorComponent implements AfterViewInit {
private htmlCanvas;
moving: EventEmitter<any>;
modified: EventEmitter<any>;
selection: EventEmitter<any>;
cleared: EventEmitter<any>;
canvas: fabric.Canvas;
props: {
canvasFill: string;
canvasImage: string;
id: any;
opacity: any;
fill: any;
fontSize: any;
lineHeight: any;
charSpacing: any;
fontWeight: any;
fontStyle: any;
textAlign: any;
fontFamily: any;
TextDecoration: string;
};
textString: string;
url: string | ArrayBuffer;
size: any;
json: any;
textEditor: boolean;
figureEditor: boolean;
selected: any;
constructor();
ngAfterViewInit(): void;
/**
* Subscribe to a FabricJS event. You can find the list of available events here: http://fabricjs.com/docs/fabric.Canvas.html
* @param eventName The event name to listen to
*/
onEvent(eventName: string, callback: (event: any) => void): void;
changeSize(): void;
addText(): void;
getImgPolaroid(event: any): void;
addImageOnCanvas(url: any): void;
readUrl(event: any): void;
removeWhite(url: any): void;
/**
* Add a figure to the canvas following the definition you provide.
* If you passed a string to this function, please rename your implementation for addPredefinedFigure().
* @param figure Your custom figure definition
* @param id (Optional) The unique id you want to give to the figure. If no ID is specified a random one will be picked.
* @returns The ID of the created figure
*/
addFigure(figure: fabric.Rect | fabric.Triangle | fabric.Circle | fabric.Object, id?: number): number;
/**
* Add a predefined figure to the canvas. If you want to create a custom figure, please use addFigure().
* @param figure The name of the predefined figure. Can be one of the following: 'rectangle', 'square', 'triangle', 'circle'.
* @param id (Optional) The unique id you want to give to the figure. If no ID is specified a random one will be picked.
* @returns The ID of the created figure
* TODO: Move to app.component
*/
addPredefinedFigure(figure: string, id?: number): number;
addRect(options: fabric.IRectOptions, id?: number): number;
cleanSelect(): void;
selectItemAfterAdded(obj: any): void;
setCanvasFill(): void;
extend(obj: any, id: any): void;
setCanvasImage(): void;
randomId(): number;
getActiveStyle(styleName: any, object: any): any;
setActiveStyle(styleName: any, value: string | number, object: fabric.IText): void;
getActiveProp(name: any): any;
setActiveProp(name: any, value: any): void;
clone(): void;
/**
* @deprecated Was renamed for getidOfSelectedObject
*/
getId(): any;
/**
* Returns the id of the currently selected object
* @return Object ID
*/
getIdOfSelectedObject(): string | number;
/**
* @deprecated Was renamed for setIdOfSelectedObject
*/
setId(): void;
setIdOfSelectedObject(): void;
/**
* Loops through all canvas objects and find one matching the supplied ID.
* @param id The ID to look for
*/
getObjectWithID(id: number): fabric.Object;
getOpacity(): void;
setOpacity(): void;
getFill(): void;
setFill(): void;
getLineHeight(): void;
setLineHeight(): void;
getCharSpacing(): void;
setCharSpacing(): void;
getFontSize(): void;
setFontSize(): void;
getBold(): void;
setBold(): void;
setFontStyle(): void;
getTextDecoration(): void;
setTextDecoration(value: any): void;
hasTextDecoration(value: any): boolean;
getTextAlign(): void;
setTextAlign(value: any): void;
getFontFamily(): void;
setFontFamily(): void;
removeSelected(): void;
bringToFront(): void;
sendToBack(): void;
/**
* Show a confirmation to tu user before clearing the canvas.
*/
confirmClear(): void;
/**
* Clear the canvas.
*/
clear(): void;
/**
* @
*/
rasterize(): void;
rasterizeSVG(): string;
saveCanvasToJSON(): void;
importCanvasFromLocalStorage(): void;
importCanvasFromJson(json: string): void;
importFromObject(object: any): void;
private loadCanvas;
/**
* @deprecated Use importCanvasFromLocalStorage() instead.
*/
loadCanvasFromJSON(): void;
/**
* Get the full canvas data as a Javascript object
*/
getCanvasData(propertiesToInclude?: string[]): any;
rasterizeJSON(): void;
resetPanels(): void;
}