declarations
Version:
[](https://www.npmjs.com/package/declarations)
1,551 lines (1,392 loc) • 148 kB
TypeScript
// Type definitions for FabricJS v1.5.0
// Project: http://fabricjs.com/
// Definitions by: Oliver Klemencic <https://github.com/oklemencic/>, Joseph Livecchi <https://github.com/joewashear007/>, Michael Randolph <https://github.com/mrand01/>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/* tslint:disable:no-unused-variable */
/* tslint:disable:whitespace */
/* tslint:disable:typedef */
// Support AMD require
declare module "fabric" {
export = fabric;
}
declare namespace fabric {
var isLikelyNode: boolean;
var isTouchSupported: boolean;
/////////////////////////////////////////////////////////////
// farbic Functions
/////////////////////////////////////////////////////////////
function createCanvasForNode(width: number, height: number): ICanvas;
// Parse
// ----------------------------------------------------------
/**
* Creates markup containing SVG referenced elements like patterns, gradients etc.
* @param {fabric.Canvas} canvas instance of fabric.Canvas
*/
function createSVGRefElementsMarkup(canvas: IStaticCanvas): string;
/**
* Creates markup containing SVG font faces
* @param {Array} objects Array of fabric objects
*/
function createSVGFontFacesMarkup(objects: IObject[]): string;
/**
* Takes string corresponding to an SVG document, and parses it into a set of fabric objects
* @param {String} string
* @param {Function} callback
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
*/
function loadSVGFromString(string: string, callback: (results: IObject[], options: any) => void, reviver?: Function): void;
/**
* Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
* Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
* @param {String} url
* @param {Function} callback
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
*/
function loadSVGFromURL(url: string, callback: (results: IObject[], options: any) => void, reviver?: Function): void;
/**
* Returns CSS rules for a given SVG document
* @param {SVGDocument} doc SVG document to parse
*/
function getCSSRules(doc: SVGElement): any;
function parseElements(elements: any[], callback: Function, options: any, reviver?: Function): void;
/**
* Parses "points" attribute, returning an array of values
* @param {String} points points attribute string
*/
function parsePointsAttribute(points: string): any[];
/**
* Parses "style" attribute, retuning an object with values
* @param {SVGElement} element Element to parse
*/
function parseStyleAttribute(element: SVGElement): any;
/**
* Transforms an array of svg elements to corresponding fabric.* instances
* @param {Array} elements Array of elements to parse
* @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)
* @param {Object} [options] Options object
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
*/
function parseElements(elements: any[], callback: Function, options?: any, reviver?: Function): void;
/**
* Returns an object of attributes' name/value, given element and an array of attribute names;
* Parses parent "g" nodes recursively upwards.
* @param {DOMElement} element Element to parse
* @param {Array} attributes Array of attributes to parse
*/
function parseAttributes(elemen: HTMLElement, attributes: string[], svgUid?: string): { [key: string]: string }
/**
* Parses an SVG document, returning all of the gradient declarations found in it
* @param {SVGDocument} doc SVG document to parse
*/
function getGradientDefs(doc: SVGElement): { [key: string]: any };
/**
* Parses a short font declaration, building adding its properties to a style object
* @param {String} value font declaration
* @param {Object} oStyle definition
*/
function parseFontDeclaration(value: string, oStyle: any): void;
/**
* Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
* @param {SVGDocument} doc SVG document to parse
* @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
* @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
*/
function parseSVGDocument(doc: SVGElement, callback: (results: IObject[], options: any) => void, reviver?: Function): void;
/**
* Parses "transform" attribute, returning an array of values
* @param {String} attributeValue String containing attribute value
*/
function parseTransformAttribute(attributeValue: string): number[];
// fabric Log
// ---------------
/**
* Wrapper around `console.log` (when available)
*/
function log(...values: any[]): void;
/**
* Wrapper around `console.warn` (when available)
*/
function warn(...values: any[]): void;
////////////////////////////////////////////////////
// Classes
////////////////////////////////////////////////////
var Canvas: ICanvasStatic;
var StaticCanvas: IStaticCanvasStatic;
var Color: IColorStatic;
var Pattern: IPatternStatic;
var Intersection: IIntersectionStatic;
var Point: IPointStatic;
var Circle: ICircleStatic;
var Ellipse: IEllipseStatic;
var Group: IGroupStatic;
var Image: IImageStatic;
var Line: ILineStatic;
var Object: IObjectStatic;
var Path: IPathStatic;
var PathGroup: IPathGroupStatic;
var Polygon: IPolygonStatic;
var Polyline: IPolylineStatic;
var Rect: IRectStatic;
var Shadow: IShadowStatic;
var Text: ITextStatic;
var IText: IITextStatic;
var Triangle: ITriangleStatic;
var util: IUtil;
///////////////////////////////////////////////////////////////////////////////
// Data Object Interfaces - These intrface are not specific part of fabric,
// They are just helpful for for defining function paramters
//////////////////////////////////////////////////////////////////////////////
interface IDataURLOptions {
/**
* The format of the output image. Either "jpeg" or "png"
*/
format?: string;
/**
* Quality level (0..1). Only used for jpeg
*/
quality?: number;
/**
* Multiplier to scale by
*/
multiplier?: number;
/**
* Cropping left offset. Introduced in v1.2.14
*/
left?: number;
/**
* Cropping top offset. Introduced in v1.2.14
*/
top?: number;
/**
* Cropping width. Introduced in v1.2.14
*/
width?: number;
/**
* Cropping height. Introduced in v1.2.14
*/
height?: number;
}
interface IEvent {
e: Event;
target?: IObject;
}
interface IFillOptions {
/**
* options.source Pattern source
*/
source: string | HTMLImageElement;
/**
* Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
*/
repeat?: string;
/**
* Pattern horizontal offset from object's left/top corner
*/
offsetX?: number;
/**
* Pattern vertical offset from object's left/top corner
*/
offsetY?: number;
}
interface IToSVGOptions {
/**
* If true xml tag is not included
*/
suppressPreamble: boolean;
/**
* SVG viewbox object
*/
viewBox: IViewBox;
/**
* Encoding of SVG output
*/
encoding: string;
}
interface IViewBox {
/**
* x-cooridnate of viewbox
*/
x: number;
/**
* y-coordinate of viewbox
*/
y: number;
/**
* Width of viewbox
*/
width: number;
/**
* Height of viewbox
*/
height: number;
}
///////////////////////////////////////////////////////////////////////////////
// Mixins Interfaces
//////////////////////////////////////////////////////////////////////////////
interface ICollection<T> {
/**
* Adds objects to collection, then renders canvas (if `renderOnAddRemove` is not `false`)
* Objects should be instances of (or inherit from) fabric.Object
* @param {...fabric.Object} object Zero or more fabric instances
*/
add(...object: IObject[]): T;
/**
* Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)
* An object should be an instance of (or inherit from) fabric.Object
* @param {Object} object Object to insert
* @param {Number} index Index to insert object at
* @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs
* @return {Self} thisArg
* @chainable
*/
insertAt(object: IObject, index: number, nonSplicing: boolean): T;
/**
* Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
* @param {...fabric.Object} object Zero or more fabric instances
* @return {Self} thisArg
* @chainable
*/
remove(...object: IObject[]): T;
/**
* Executes given function for each object in this group
* @param {Function} callback
* @param {Object} context Context (aka thisObject)
* @return {Self} thisArg
*/
forEachObject(callback: (element: IObject, index: number, array: IObject[]) => any, context?: any): T;
/**
* Returns an array of children objects of this instance
* Type parameter introduced in 1.3.10
* @param {String} [type] When specified, only objects of this type are returned
* @return {Array}
*/
getObjects(type?: string): IObject[];
/**
* Returns object at specified index
* @param {Number} index
* @return {Self} thisArg
*/
item(index: number): T;
/**
* Returns true if collection contains no objects
* @return {Boolean} true if collection is empty
*/
isEmpty(): boolean;
/**
* Returns a size of a collection (i.e: length of an array containing its objects)
* @return {Number} Collection size
*/
size(): number;
/**
* Returns true if collection contains an object
* @param {Object} object Object to check against
* @return {Boolean} `true` if collection contains an object
*/
contains(object: IObject): boolean;
/**
* Returns number representation of a collection complexity
* @return {Number} complexity
*/
complexity(): number;
}
interface IObservable<T> {
/**
* Observes specified event
* @param eventName Event name (eg. 'after:render')
* @param handler Function that receives a notification when an event of the specified type occurs
*/
on(eventName: string, handler: (e: IEvent) => any): T;
/**
* Observes specified event
* @param eventName Object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
*/
on(eventName: {[key:string] : Function}): T;
/**
* Fires event with an optional options object
* @param {String} eventName Event name to fire
* @param {Object} [options] Options object
*/
trigger(eventName: string, options?: any): T;
/**
* Stops event observing for a particular event handler. Calling this method
* without arguments removes all handlers for all events
* @param eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
* @param handler Function to be deleted from EventListeners
*/
off(eventName?: string|any, handler?: (e: IEvent) => any): T;
}
// animation mixin
// ----------------------------------------------------
interface ICanvasAnimation<T> {
FX_DURATION: number;
/**
* Centers object horizontally with animation.
* @param {fabric.Object} object Object to center
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
* @param {Function} [callbacks.onComplete] Invoked on completion
* @param {Function} [callbacks.onChange] Invoked on every step of animation
*/
fxCenterObjectH(object: IObject, callbacks?: { onComplete: Function; onChange: Function; }): T;
/**
* Centers object vertically with animation.
* @param {fabric.Object} object Object to center
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
* @param {Function} [callbacks.onComplete] Invoked on completion
* @param {Function} [callbacks.onChange] Invoked on every step of animation
*/
fxCenterObjectV(object: IObject, callbacks?: { onComplete: Function; onChange: Function; }): T;
/**
* Same as `fabric.Canvas#remove` but animated
* @param {fabric.Object} object Object to remove
* @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
* @param {Function} [callbacks.onComplete] Invoked on completion
* @param {Function} [callbacks.onChange] Invoked on every step of animation
* @return {fabric.Canvas} thisArg
* @chainable
*/
fxRemove(object: IObject, callbacks?: { onComplete: Function; onChange: Function; }): T;
}
interface IObjectAnimation<T> {
/**
* Animates object's properties
* object.animate('left', ..., {duration: ...});
* @param property Property to animate
* @param value Value to animate property
* @param options The animation options
*/
animate(property: string, value: number|string, options?: IAnimationOptions): IObject;
/**
* Animates object's properties
* object.animate({ left: ..., top: ... }, { duration: ... });
* @param properties Properties to animate
* @param value Options object
*/
animate(properties: any, options?: IAnimationOptions): IObject;
}
interface IAnimationOptions {
/**
* Allows to specify starting value of animatable property (if we don't want current value to be used).
*/
from?: string|number;
/**
* Defaults to 500 (ms). Can be used to change duration of an animation.
*/
duration?: number;
/**
* Callback; invoked on every value change
*/
onChange?: Function;
/**
* Callback; invoked when value change is completed
*/
onComplete?: Function;
/**
* Easing function. Default: fabric.util.ease.easeInSine
*/
easing?: Function;
/**
* Value to modify the property by, default: end - start
*/
by?: number;
}
///////////////////////////////////////////////////////////////////////////////
// General Fabric Interfaces
//////////////////////////////////////////////////////////////////////////////
interface IColor {
/**
* Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
*/
getSource(): number[];
/**
* Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
*/
setSource(source: number[]): void;
/**
* Returns color represenation in RGB format ex: rgb(0-255,0-255,0-255)
*/
toRgb(): string;
/**
* Returns color represenation in RGBA format ex: rgba(0-255,0-255,0-255,0-1)
*/
toRgba(): string;
/**
* Returns color represenation in HSL format ex: hsl(0-360,0%-100%,0%-100%)
*/
toHsl(): string;
/**
* Returns color represenation in HSLA format ex: hsla(0-360,0%-100%,0%-100%,0-1)
*/
toHsla(): string;
/**
* Returns color represenation in HEX format ex: FF5555
*/
toHex(): string;
/**
* Gets value of alpha channel for this color
*/
getAlpha(): number;
/**
* Sets value of alpha channel for this color
* @param {Number} alpha Alpha value 0-1
*/
setAlpha(alpha: number): void;
/**
* Transforms color to its grayscale representation
*/
toGrayscale(): IColor;
/**
* Transforms color to its black and white representation
* @param {Number} threshold
*/
toBlackWhite(threshold: number): IColor;
/**
* Overlays color with another color
* @param {String|fabric.Color} otherColor
*/
overlayWith(otherColor: string|IColor): IColor;
}
interface IColorStatic {
/**
* Color class
* The purpose of Color is to abstract and encapsulate common color operations;
* @param {String} color optional in hex or rgb(a) format
*/
new (color?: string): IColor;
/**
* Returns new color object, when given a color in RGB format
* @param {String} color Color value ex: rgb(0-255,0-255,0-255)
*/
fromRgb(color: string): IColor;
/**
* Returns new color object, when given a color in RGBA format
* @param {String} color Color value ex: rgb(0-255,0-255,0-255)
*/
fromRgba(color: string): IColor;
/**
* Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
* @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)
*/
sourceFromRgb(color: string): number[];
/**
* Returns new color object, when given a color in HSL format
* @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)
*/
fromHsl(color: string): IColor;
/**
* Returns new color object, when given a color in HSLA format
* @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)
*/
fromHsla(color: string): IColor;
/**
* Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.
* @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)
*/
sourceFromHsl(color: string): number[];
/**
* Returns new color object, when given a color in HEX format
* @param {String} color Color value ex: FF5555
*/
fromHex(color: string): IColor;
/**
* Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
* @param {String} color ex: FF5555
*/
sourceFromHex(color: string): number[];
/**
* Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
* @param {Array} source
*/
fromSource(source: number[]): IColor;
prototype: any;
}
interface IGradientOptions {
/**
* @param {String} [options.type] Type of gradient 'radial' or 'linear'
*/
type?: string;
/**
* x-coordinate of start point
*/
x1?: number;
/**
* y-coordinate of start point
*/
y1?: number;
/**
* x-coordinate of end point
*/
x2?: number;
/**
* y-coordinate of end point
*/
y2?: number;
/**
* Radius of start point (only for radial gradients)
*/
r1?: number;
/**
* Radius of end point (only for radial gradients)
*/
r2?: number;
/**
* Color stops object eg. {0:string; 1:string;
*/
colorStops?: any;
}
interface IGradient extends IGradientOptions {
/**
* Adds another colorStop
* @param {Object} colorStop Object with offset and color
*/
addColorStop(colorStop: any): IGradient;
/**
* Returns object representation of a gradient
*/
toObject(): any;
/**
* Returns SVG representation of an gradient
* @param {Object} object Object to create a gradient for
* @param {Boolean} normalize Whether coords should be normalized
* @return {String} SVG representation of an gradient (linear/radial)
*/
toSVG(object: IObject, normalize?: boolean): string;
/**
* Returns an instance of CanvasGradient
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
toLive(ctx: CanvasRenderingContext2D, object?: IPathGroup): CanvasGradient;
}
interface IGrandientStatic {
new (options?: IGradientOptions): IGradient;
/**
* Returns instance from an SVG element
* @param {SVGGradientElement} el SVG gradient element
* @param {fabric.Object} instance
*/
fromElement(el: SVGGradientElement, instance: IObject): IGradient;
/**
* Returns instance from its object representation
* @param {Object} obj
* @param {Object} [options] Options object
*/
fromObject(obj: any, options: any[]): IGradient;
}
interface IIntersection {
/**
* Appends a point to intersection
*/
appendPoint(point: IPoint): void;
/**
* Appends points to intersection
*/
appendPoints(points: IPoint[]): void;
}
interface IIntersectionStatic {
/**
* Intersection class
*/
new (status?: string): void;
/**
* Checks if polygon intersects another polygon
*/
intersectPolygonPolygon(points1: IPoint[], points2: IPoint[]): IIntersection;
/**
* Checks if line intersects polygon
*/
intersectLinePolygon(a1: IPoint, a2: IPoint, points: IPoint[]): IIntersection;
/**
* Checks if one line intersects another
*/
intersectLineLine(a1: IPoint, a2: IPoint, b1: IPoint, b2: IPoint): IIntersection;
/**
* Checks if polygon intersects rectangle
*/
intersectPolygonRectangle(points: IPoint[], r1: number, r2: number): IIntersection;
}
interface IPatternOptions {
/**
* Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
*/
repeat: string;
/**
* Pattern horizontal offset from object's left/top corner
*/
offsetX: number;
/**
* Pattern vertical offset from object's left/top corner
*/
offsetY: number;
/**
* The source for the pattern
*/
source: string|HTMLImageElement;
}
interface IPattern extends IPatternOptions {
new (options?: IPatternOptions): IPattern;
initialise(options?: IPatternOptions): IPattern;
/**
* Returns an instance of CanvasPattern
*/
toLive(ctx: CanvasRenderingContext2D): IPattern;
/**
* Returns object representation of a pattern
*/
toObject(): any;
/**
* Returns SVG representation of a pattern
* @param {fabric.Object} object
*/
toSVG(object: IObject): string;
}
interface IPatternStatic {
new (options?: IPatternOptions): IPattern;
prototype: any;
}
interface IPoint {
x: number;
y: number;
/**
* Adds another point to this one and returns another one
* @param {fabric.Point} that
*/
add(that: IPoint): IPoint;
/**
* Adds another point to this one
* @param {fabric.Point} that
*/
addEquals(that: IPoint): IPoint;
/**
* Adds value to this point and returns a new one
* @param {Number} scalar
*/
scalarAdd(scalar: number): IPoint;
/**
* Adds value to this point
* @param {Number} scalar
*/
scalarAddEquals(scalar: number): IPoint;
/**
* Subtracts another point from this point and returns a new one
* @param {fabric.Point} that
*/
subtract(that: IPoint): IPoint;
/**
* Subtracts another point from this point
* @param {fabric.Point} that
*/
subtractEquals(that: IPoint): IPoint;
/**
* Subtracts value from this point and returns a new one
* @param {Number} scalar
*/
scalarSubtract(scalar: number): IPoint;
/**
* Subtracts value from this point
* @param {Number} scalar
*/
scalarSubtractEquals(scalar: number): IPoint;
/**
* Miltiplies this point by a value and returns a new one
* @param {Number} scalar
*/
multiply(scalar: number): IPoint;
/**
* Miltiplies this point by a value
* @param {Number} scalar
*/
multiplyEquals(scalar: number): IPoint;
/**
* Divides this point by a value and returns a new one
* @param {Number} scalar
*/
divide(scalar: number): IPoint;
/**
* Divides this point by a value
* @param {Number} scalar
*/
divideEquals(scalar: number): IPoint;
/**
* Returns true if this point is equal to another one
* @param {fabric.Point} that
*/
eq(that: IPoint): IPoint;
/**
* Returns true if this point is less than another one
* @param {fabric.Point} that
*/
lt(that: IPoint): IPoint;
/**
* Returns true if this point is less than or equal to another one
* @param {fabric.Point} that
*/
lte(that: IPoint): IPoint;
/**
* Returns true if this point is greater another one
* @param {fabric.Point} that
*/
gt(that: IPoint): IPoint;
/**
* Returns true if this point is greater than or equal to another one
* @param {fabric.Point} that
*/
gte(that: IPoint): IPoint;
/**
* Returns new point which is the result of linear interpolation with this one and another one
* @param {fabric.Point} that
* @param {Number} t
*/
lerp(that: IPoint, t: number): IPoint;
/**
* Returns distance from this point and another one
* @param {fabric.Point} that
*/
distanceFrom(that: IPoint): number;
/**
* Returns the point between this point and another one
* @param {fabric.Point} that
*/
midPointFrom(that: IPoint): IPoint;
/**
* Returns a new point which is the min of this and another one
* @param {fabric.Point} that
*/
min(that: IPoint): IPoint;
/**
* Returns a new point which is the max of this and another one
* @param {fabric.Point} that
*/
max(that: IPoint): IPoint;
/**
* Returns string representation of this point
*/
toString(): string;
/**
* Sets x/y of this point
* @param {Number} x
* @param {Number} y
*/
setXY(x:number, y: number): IPoint;
/**
* Sets x/y of this point from another point
* @param {fabric.Point} that
*/
setFromPoint(that: IPoint): IPoint;
/**
* Swaps x/y of this point and another point
* @param {fabric.Point} that
*/
swap(that: IPoint): IPoint;
}
interface IPointStatic {
new (x: number, y: number): IPoint;
prototype: any;
}
interface IShadowOptions {
/**
* Whether the shadow should affect stroke operations
*/
affectStrike: boolean;
/**
* Shadow blur
*/
blur: number;
/**
* Shadow color
*/
color: string;
/**
* Indicates whether toObject should include default values
*/
includeDefaultValues: boolean;
/**
* Shadow horizontal offset
*/
offsetX: number;
/**
* Shadow vertical offset
*/
offsetY: number;
}
interface IShadow extends IShadowOptions {
initialize(options?: IShadowOptions|string): IShadow;
/**
* Returns object representation of a shadow
*/
toObject(): IObject;
/**
* Returns a string representation of an instance, CSS3 text-shadow declaration
*/
toString(): string;
/**
* Returns SVG representation of a shadow
* @param {fabric.Object} object
*/
toSVG(object: IObject): string;
/**
* Regex matching shadow offsetX, offsetY and blur, Static
*/
reOffsetsAndBlur: RegExp
}
interface IShadowStatic {
new (options?: IShadowOptions): IShadow;
reOffsetsAndBlur: RegExp;
}
///////////////////////////////////////////////////////////////////////////////
// Canvas Interfaces
//////////////////////////////////////////////////////////////////////////////
interface ICanvasDimensions {
/**
* Width of canvas element
*/
width: number;
/**
* Height of canvas element
*/
height: number;
}
interface ICanvasDimensionsOptions {
/**
* Set the given dimensions only as canvas backstore dimensions
*/
backstoreOnly?: boolean;
/**
* Set the given dimensions only as css dimensions
*/
cssOnly?: boolean;
}
interface IStaticCanvasOptions {
/**
* Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
*/
allowTouchScrolling?: boolean;
/**
* Indicates whether this canvas will use image smoothing, this is on by default in browsers
*/
imageSmoothingEnabled?: boolean;
/**
* Indicates whether objects should remain in current stack position when selected.
* When false objects are brought to top and rendered as part of the selection group
*/
preserveObjectStacking?: boolean;
/**
* The transformation (in the format of Canvas transform) which focuses the viewport
*/
viewportTransform?: number[];
freeDrawingColor?: string;
freeDrawingLineWidth?: number;
/**
* Background color of canvas instance.
* Should be set via setBackgroundColor
*/
backgroundColor?: string|IPattern;
/**
* Background image of canvas instance.
* Should be set via setBackgroundImage
* <b>Backwards incompatibility note:</b> The "backgroundImageOpacity" and "backgroundImageStretch" properties are deprecated since 1.3.9.
*/
backgroundImage?: IImage | string;
backgroundImageOpacity?: number;
backgroundImageStretch?: number;
/**
* Function that determines clipping of entire canvas area
* Being passed context as first argument. See clipping canvas area
*/
clipTo?: (context: CanvasRenderingContext2D) => void;
/**
* Indicates whether object controls (borders/controls) are rendered above overlay image
*/
controlsAboveOverlay?: boolean;
/**
* Indicates whether toObject/toDatalessObject should include default values
*/
includeDefaultValues?: boolean;
/**
* Overlay color of canvas instance.
* Should be set via setOverlayColor
*/
overlayColor?: string|IPattern;
/**
* Overlay image of canvas instance.
* Should be set via setOverlayImage
* <b>Backwards incompatibility note:</b> The "overlayImageLeft" and "overlayImageTop" properties are deprecated since 1.3.9.
*/
overlayImage?: IImage;
overlayImageLeft?: number;
overlayImageTop?: number;
/**
* Indicates whether add, insertAt and remove should also re-render canvas.
* Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once
* (followed by a manual rendering after addition/deletion)
*/
renderOnAddRemove?: boolean;
/**
* Indicates whether objects' state should be saved
*/
stateful?: boolean;
}
interface IStaticCanvas extends IObservable<IStaticCanvas>, IStaticCanvasOptions, ICollection<IStaticCanvas>, ICanvasAnimation<IStaticCanvas> {
/**
* Calculates canvas element offset relative to the document
* This method is also attached as "resize" event handler of window
*/
calcOffset(): IStaticCanvas;
/**
* Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
* @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to
* @param {Function} callback callback to invoke when image is loaded and set as an overlay
* @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.
*/
setOverlayImage(image: IImage|string, callback: Function, options?: IObjectOptions): IStaticCanvas;
/**
* Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
* @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to
* @param {Function} callback Callback to invoke when image is loaded and set as background
* @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.
*/
setBackgroundImage(image: IImage|string, callback: Function, options?: IObjectOptions): IStaticCanvas;
/**
* Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas
* @param {(String|fabric.Pattern)} overlayColor Color or pattern to set background color to
* @param {Function} callback Callback to invoke when background color is set
*/
setOverlayColor(overlayColor: string|IPattern, callback: Function): IStaticCanvas;
/**
* Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
* @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to
* @param {Function} callback Callback to invoke when background color is set
*/
setBackgroundColor(backgroundColor: string|IPattern, callback: Function): IStaticCanvas;
/**
* Returns canvas width (in px)
*/
getWidth(): number;
/**
* Returns canvas height (in px)
*/
getHeight(): number;
/**
* Sets width of this canvas instance
* @param {Number|String} value Value to set width to
* @param {Object} [options] Options object
*/
setWidth(value: number|string, options?: ICanvasDimensionsOptions): IStaticCanvas
/**
* Sets height of this canvas instance
* @param {Number|String} value Value to set height to
* @param {Object} [options] Options object
*/
setHeight(value: number|string, options?: ICanvasDimensionsOptions): IStaticCanvas;
/**
* Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
* @param {Object} dimensions Object with width/height properties
* @param {Object} [options] Options object
*/
setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): IStaticCanvas;
/**
* Returns canvas zoom level
*/
getZoom(): number;
/**
* Sets viewport transform of this canvas instance
* @param {Array} vpt the transform in the form of context.transform
*/
setViewportTransform(vpt: number[]): IStaticCanvas;
/**
* Sets zoom level of this canvas instance, zoom centered around point
* @param {fabric.Point} point to zoom with respect to
* @param {Number} value to set zoom to, less than 1 zooms out
*/
zoomToPoint(point: IPoint, value: number): IStaticCanvas;
/**
* Sets zoom level of this canvas instance
* @param {Number} value to set zoom to, less than 1 zooms out
*/
setZoom(value: number): IStaticCanvas;
/**
* Pan viewport so as to place point at top left corner of canvas
* @param {fabric.Point} point to move to
*/
absolutePan(point: IPoint): IStaticCanvas;
/**
* Pans viewpoint relatively
* @param {fabric.Point} point (position vector) to move by
*/
relativePan(point: IPoint): IStaticCanvas;
/**
* Returns <canvas> element corresponding to this instance
*/
getElement(): HTMLCanvasElement;
/**
* Returns currently selected object, if any
*/
getActiveObject(): IObject;
/**
* Returns currently selected group of object, if any
*/
getActiveGroup(): IGroup;
/**
* Clears specified context of canvas element
* @param {CanvasRenderingContext2D} ctx Context to clear
* @chainable
*/
clearContext(ctx: CanvasRenderingContext2D): IStaticCanvas;
/**
* Returns context of canvas where objects are drawn
*/
getContext(): CanvasRenderingContext2D;
/**
* Clears all contexts (background, main, top) of an instance
*/
clear(): IStaticCanvas;
/**
* Renders both the top canvas and the secondary container canvas.
* @param {Boolean} [allOnTop] Whether we want to force all images to be rendered on the top canvas
* @chainable
*/
renderAll(allOnTop?: boolean): IStaticCanvas;
/**
* Method to render only the top canvas.
* Also used to render the group selection box.
* @chainable
*/
renderTop(): IStaticCanvas;
/**
* Returns coordinates of a center of canvas.
* Returned value is an object with top and left properties
*/
getCenter(): { top: number; left: number; };
/**
* Centers object horizontally.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center horizontally
*/
centerObjectH(object: IObject): IStaticCanvas;
/**
* Centers object vertically.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center vertically
*/
centerObjectV(object: IObject): IStaticCanvas;
/**
* Centers object vertically and horizontally.
* You might need to call `setCoords` on an object after centering, to update controls area.
* @param {fabric.Object} object Object to center vertically and horizontally
*/
centerObject(object: IObject): IStaticCanvas;
/**
* Returs dataless JSON representation of canvas
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
*/
toDatalessJSON(propertiesToInclude?: any[]): string;
/**
* Returns object representation of canvas
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
*/
toObject(propertiesToInclude?: any[]): any;
/**
* Returns dataless object representation of canvas
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
*/
toDatalessObject(propertiesToInclude?: any[]): any;
/**
* When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
* a zoomed canvas will then produce zoomed SVG output.
*/
svgViewportTransformation: boolean;
/**
* Returns SVG representation of canvas
* @param {Object} [options] Options object for SVG output
* @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
*/
toSVG(options: IToSVGOptions, reviver?: Function): string;
/**
* Moves an object to the bottom of the stack of drawn objects
* @param {fabric.Object} object Object to send to back
* @chainable
*/
sendToBack(object: IObject): IStaticCanvas;
/**
* Moves an object to the top of the stack of drawn objects
* @param {fabric.Object} object Object to send
* @chainable
*/
bringToFront(object: IObject): IStaticCanvas;
/**
* Moves an object down in stack of drawn objects
* @param {fabric.Object} object Object to send
* @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
* @chainable
*/
sendBackwards(object: IObject): IStaticCanvas;
/**
* Moves an object up in stack of drawn objects
* @param {fabric.Object} object Object to send
* @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
* @chainable
*/
bringForward(object: IObject): IStaticCanvas;
/**
* Moves an object to specified level in stack of drawn objects
* @param {fabric.Object} object Object to send
* @param {Number} index Position to move to
* @chainable
*/
moveTo(object: IObject, index: number): IStaticCanvas;
/**
* Clears a canvas element and removes all event listeners
*/
dispose(): IStaticCanvas;
/**
* Returns a string representation of an instance
*/
toString(): string;
/**
* Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
* @param {Object} [options] Options object
*/
toDataURL(options?: IDataURLOptions): string;
/**
* Provides a way to check support of some of the canvas methods
* (either those of HTMLCanvasElement itself, or rendering context)
* @param {String} methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
* @return {Boolean | null} `true` if method is supported (or at least exists), null` if canvas element or context can not be initialized
*/
supports(methodName: string): boolean;
/**
* Populates canvas with data from the specified JSON.
* JSON format must conform to the one of toJSON formats
* @param {String|Object} json JSON string or object
* @param {Function} callback Callback, invoked when json is parsed
* and corresponding objects (e.g: {@link fabric.Image})
* are initialized
* @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
*/
loadFromJSON(json: string|any, callback: Function, reviver?: Function): ICanvas;
/**
* Clones canvas instance
* @param {Object} [callback] Receives cloned instance as a first argument
* @param {Array} [properties] Array of properties to include in the cloned canvas and children
*/
clone(callback: (canvas: IStaticCanvas) => any, properties?: any[]): void;
/**
* Clones canvas instance without cloning existing data.
* This essentially copies canvas dimensions, clipping properties, etc.
* but leaves data empty (so that you can populate it with your own)
* @param {Object} [callback] Receives cloned instance as a first argument
*/
cloneWithoutData(callback: (canvas: IStaticCanvas) => any): void;
/**
* Callback; invoked right before object is about to be scaled/rotated
*/
onBeforeScaleRotate(target: IObject): void;
// Functions from object straighten mixin
// --------------------------------------------------------------------------------------------------------------------------------
/**
* Straightens object, then rerenders canvas
* @param {fabric.Object} object Object to straighten
*/
straightenObject(object: IObject): IStaticCanvas
/**
* Same as straightenObject, but animated
* @param {fabric.Object} object Object to straighten
*/
fxStraightenObject(object: IObject): IStaticCanvas
}
interface IStaticCanvasStatic {
/**
* Constructor
* @param {HTMLElement|String} element <canvas> element to initialize instance on
* @param {Object} [options] Options object
*/
new (element: HTMLCanvasElement|string, options?: ICanvasOptions): IStaticCanvas;
EMPTY_JSON: string;
/**
* Provides a way to check support of some of the canvas methods
* (either those of HTMLCanvasElement itself, or rendering context)
* @param {String} methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
*/
supports(methodName: string): boolean;
prototype: any;
/**
* Returns JSON representation of canvas
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
*/
toJSON(propertiesToInclude?: any[]): string;
}
interface ICanvasOptions extends IStaticCanvasOptions {
/**
* When true, objects can be transformed by one side (unproportionally)
*/
uniScaleTransform?: boolean;
/**
* When true, objects use center point as the origin of scale transformation.
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
*/
centeredScaling?: boolean;
/**
* When true, objects use center point as the origin of rotate transformation.
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
*/
centeredRotation?: boolean;
/**
* Indicates that canvas is interactive. This property should not be changed.
*/
interactive?: boolean;
/**
* Indicates whether group selection should be enabled
*/
selection?: boolean;
/**
* Color of selection
*/
selectionColor?: string;
/**
* Default dash array pattern
* If not empty the selection border is dashed
*/
selectionDashArray?: any[];
/**
* Color of the border of selection (usually slightly darker than color of selection itself)
*/
selectionBorderColor?: string;
/**
* Width of a line used in object/group selection
*/
selectionLineWidth?: number;
/**
* Default cursor value used when hovering over an object on canvas
*/
hoverCursor?: string;
/**
* Default cursor value used when moving an object on canvas
*/
moveCursor?: string;
/**
* Default cursor value used for the entire canvas
*/
defaultCursor?: string;
/**
* Cursor value used during free drawing
*/
freeDrawingCursor?: string;
/**
* Cursor value used for rotation point
*/
rotationCursor?: string;
/**
* Default element class that's given to wrapper (div) element of canvas
*/
containerClass?: string;
/**
* When true, object detection happens on per-pixel basis rather than on per-bounding-box
*/
perPixelTargetFind?: boolean;
/**
* Number of pixels around target pixel to tolerate (consider active) during object detection
*/
targetFindTolerance?: number;
/**
* When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
*/
skipTargetFind?: boolean;
/**
* When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.
* After mousedown, mousemove creates a shape,
* and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
*/
isDrawingMode?: boolean;
}
interface ICanvas extends IStaticCanvas, ICanvasOptions {
_objects: IObject[];
/**
* Checks if point is contained within an area of given object
* @param {Event} e Event object
* @param {fabric.Object} target Object to test against
*/
containsPoint(e: Event, target: IObject): boolean;
/**
* Deactivates all objects on canvas, removing any active group or object
* @return {fabric.Canvas} thisArg
*/
deactivateAll(): ICanvas;
/**
* Deactivates all objects and dispatches appropriate events
* @param {Event} [e] Event (passed along when firing)
* @return {fabric.Canvas} thisArg
*/
deactivateAllWithDispatch(e?: Event): ICanvas;
/**
* Discards currently active group
* @param {Event} [e] Event (passed along when firing)
* @return {fabric.Canvas} thisArg
*/
discardActiveGroup(e?: Event): ICanvas;
/**
* Discards currently active object
* @param {Event} [e] Event (passed along when firing)
* @return {fabric.Canvas} thisArg
* @chainable
*/
discardActiveObject(e?: Event): ICanvas;
/**
* Draws objects' controls (borders/controls)
* @param {CanvasRenderingContext2D} ctx Context to render controls on
*/
drawControls(ctx: CanvasRenderingContext2D): void;
/**
* Method that determines what object we are clicking on
* @param {Event} e mouse event
* @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through
*/
findTarget(e: MouseEvent, skipGroup: boolean): ICanvas;
/**
* Returns currently active group
* @return {fabric.Group} Current group
*/
getActiveGroup(): IGroup;
/**
* Returns currently active object
* @return {fabric.Object} active object
*/
getActiveObject(): IObject;
/**
* Returns pointer coordinates relative to canvas.
* @param {Event} e
* @return {Object} object with "x" and "y" number values
*/
getPointer(e: Event, ignoreZoom?: boolean, upperCanvasEl?: CanvasRenderingContext2D): { x: number; y: number; };
/**
* Returns context of canvas where object selection is drawn
* @return {CanvasRenderingContext2D}
*/
getSelectionContext(): CanvasRenderingContext2D;
/**
* Returns <canvas> element on which object selection is drawn
* @return {HTMLCanvasElement}
*/
getSelectionElement(): HTMLCanvasElement;
/**
* Returns true if object is transparent at a certain location
* @param {fabric.Object} target Object to check
* @param {Number} x Left coordinate
* @param {Number} y Top coordinate
*/
isTargetTransparent(target: IObject, x: number, y: number): boolean;
/**
* Sets active group to a speicified one
* @param {fabric.Group} group Group to set as a current one
* @param {Event} [e] Event (passed along when firing)
*/
setActiveGroup(group: IGroup, e?: Event): ICanvas;
/**
* Sets given object as the only active object on canvas
* @param {fabric.Object} object Object to set as an active one
* @param {Event} [e] Event (passed along when firing "object:selected")
*/
setActiveObject(object: IObject, e?: Event): ICanvas;
/**
* Set the cursor type of the canvas element
* @param {String} value Cursor type of the canvas element.
* @see http://www.w3.org/TR/css3-ui/#cursor
*/
setCursor(value: string): void;