// Type definitions for FabricJS v1.5.0
// Project: http://fabricjs.com/
// Definitions by: Oliver Klemencic , Joseph Livecchi , Michael Randolph
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/* tslint:disable:no-unused-variable */
/* tslint:disable:whitespace */
/* tslint:disable:typedef */
// Support AMD require
declare module "fabric" {
export = fabric;
}
declare module 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 {
/**
* 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 {
/**
* 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
* @deprecated `fire` deprecated since 1.0.7 (use `trigger` instead)
* @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
* @deprecated `stopObserving` deprecated since 0.8.34 (use `off` instead)
* @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 {
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 {
/**
* 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
* Backwards incompatibility note: 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
* Backwards incompatibility note: 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, IStaticCanvasOptions, ICollection, ICanvasAnimation {
/**
* 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