Constructor
Optional objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[] = []instance objects
Optional options: Partial<GroupProps> = {}Options object
Optional objectsRelativeToGroup: booleantrue if objects exist in group coordinate plane
Optional __cornerkeeps the value of the last hovered corner during mouse move. 0 is no corner, or 'mt', 'ml', 'mtr' etc.. It should be private, but there is no harm in using it as a read-only property. this isn't cleaned automatically. Non selected objects may have wrong values
Private __objectPrivate __objectOptional __owningA reference to the parent of the object
Used to keep the original parent ref when the object has been added to an ActiveSelection, hence loosing the group ref
Private _activeUsed internally to optimize performance Once an object is selected, instance is rendered without the selected object. This way instance is cached only once for the entire interaction with the selected object.
Optional Private _cacheA reference to the HTMLCanvasElement that is used to contain the cache of the object this canvas element is resized and cleared as needed Is marked private, you can read it, don't use it since it is handled by fabric since 1.7.0
undefined
@private
Private _cacheQuick access for the _cacheCanvas rendering context This is part of the objectCaching feature since 1.7.0
undefined
@private
a map of control visibility for this object. this was left when controls were introduced to not break the api too much this takes priority over the generic control visibility
Private _firstneeds to end up in the constructor too
Optional _scalingA boolean used from the gesture module to keep tracking of a scaling action when there is no scaling transform in place. This is an edge case and is used twice in all codebase. Probably added to keep track of some performance issues
use git blame to investigate why it was added DON'T USE IT. WE WILL TRY TO REMOVE IT
Optional Private _transformPrivate. indicates if the object inside a group is on a transformed context or not or is part of a larger cache for many object ( a group for example)
undefined
@private
Describe object's corner position in canvas object absolute coordinates properties are tl,tr,bl,br and describe the four main corner. each property is an object with x, y, instance of Fabric.Point. The coordinates depends from this properties: width, height, scaleX, scaleY skewX, skewY, angle, strokeWidth, top, left. Those coordinates are useful to understand where an object is. They get updated with lineCoords or oCoords in interactive cases but they do not need to be updated when zoom or panning change. The coordinates get updated with
setCoords. You can calculate them without updating with
calcACoords();
Optional Private cacheSize of the cache canvas, height since 1.7.0
undefined
@private
Optional Private cachezoom level used on the cacheCanvas to draw the cache, Y axe since 1.7.0
undefined
@private
Optional Private cachetranslation of the cacheCanvas away from the center, for subpixel accuracy and crispness since 1.7.0
undefined
@private
Optional Private cacheSize of the cache canvas, width since 1.7.0
undefined
@private
Optional canvasOptional clipOptional clipWhen an object is being exported as SVG as a clippath, a reference inside the SVG is needed. This reference is a UID in the fabric namespace and is temporary stored here.
List of properties to consider for animating colors.
holds the controls for the object. controls are added by default_controls.js
When set to true, object's cache will be rerendered next render call.
since 1.7.0
true
Optional Private groupA reference to the parent of the object, usually a Group
undefined
@private
Used to allow targeting of object inside groups.
set to true if you want to select an object inside a group.
REQUIRES subTargetCheck set to true
Optional isinternal boolean to signal the code that the object is part of the move action.
Specifies the layout strategy for instance
Used by getLayoutStrategyResult to calculate layout
fit-content, fit-content-lazy, fixed, clip-path are supported out of the box
Describe object's corner position in canvas element coordinates. includes padding. Used of object detection. set and refreshed with setCoords. Those could go away
investigate how to get rid of those
Optional matrixstorage cache for object full transform matrix
Describe object's corner position in canvas element coordinates.
properties are depending on control keys and padding the main controls.
each property is an object with x, y and corner.
The corner property contains in a similar manner the 4 points of the
interactive area of the corner.
The coordinates depends from the controls positionHandler and are used
to draw and locate controls
Optional Private ownIndicate if the object is sitting on a cache dedicated to it or is part of a larger cache for many object ( a group for example)
undefined
@private
Optional ownstorage cache for object transform matrix
Optional snapOptional snapUsed to optimize performance
set to false if you don't need contained objects to be targets of events
Optional Private zoomXzoom level used on the cacheCanvas to draw the cache, X axe since 1.7.0
undefined
@private
Optional Private zoomYzoom level used on the cacheCanvas to draw the cache, Y axe since 1.7.0
undefined
@private
Static cacheList of properties to consider when checking if cache needs refresh Those properties are checked by calls to Object.set(key, value). If the key is in this list, the object is marked as dirty and refreshed at the next render
Static ownStatic stateStatic typeLegacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists because is very hard to catch all the ways in which a type value could be set in the instance
add sustainable warning message
Private __objectPrivate __objectPrivate
keeps track of the selected objects
Private __serializePrivate _adjustPrivate
Private _animatePrivate
Property to animate
Optional options: Partial<AnimationOptions<T>> = {}Options object
Private _applyPrivate
initial layout logic: calculate bbox of objects (if necessary) and translate it according to options received from the constructor (left, top, width, height) so it is placed in the center of the bbox received from the constructor
Private _applyPrivate
This function try to patch the missing gradientTransform on canvas gradients. transforming a context to transform the gradient, is going to transform the stroke too. we want to transform the gradient but not the stroke operation, so we create a transformed gradient on a pattern and then we use the pattern instead of the gradient. this method has drawbacks: is slow, is in low resolution, needs a patch for when the size is limited.
Context to render on
Private _applyPrivate _calculatePrivate _constrainPrivate _createPrivate
Optional additionalOptional reviver?: TSVGReviverPrivate _createPrivate
Optional additionalOptional noOptional reviver?: TSVGReviverOptional withPrivate _createPrivate _createSVGBgPrivate
Optional reviver: TSVGReviverPrivate _drawPrivate
Context to draw on
object to override the object style
Prepare clipPath state and cache and draw it on instance's cache
Optional clipPath: FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>Private _enterPrivate
Optional removeParentTransform: booleantrue if object is in canvas coordinate plane
Private _exitPrivate
Optional removeParentTransform: booleantrue if object should exit group without applying group's transform to it
Private _filterPrivate
Override this method to enhance performance (for groups with a lot of objects). If Overriding, be sure not pass illegal objects to group - it will break your app.
Private _findPrivate _findPrivate
Determines which corner is under the mouse cursor, represented by pointer.
This function is return a corner only if the object is the active one.
This is done to avoid selecting corner of non active object and activating transformations
rather than drag action. The default behavior of fabricJS is that if you want to transform
an object, first you select it to show the control set
The pointer indicating the mouse position
indicates if we are looking for interaction area with a touch action
corner code (tl, tr, bl, br, etc.), or 0 if nothing is found.
Private _getPrivate
Return the dimension and the zoom level needed to create a cache canvas big enough to host the object to be cached.
.x width of object to be cached
Private _getPrivate _getPrivate _getLimit the cache dimensions so that X * Y do not cross config.perfLimitSizeTotal and each side do not cross fabric.cacheSideLimit those numbers are configurable so that you can get as much detail as you want making bargain with performances.
.width width of canvas
Private _onPrivate
Private _onPrivate
Optional removeParentTransform: booleantrue if object should exit group without applying group's transform to it
Private _removePrivate _removePrivate _renderPrivate _renderRenders controls and borders for the object the context here is not transformed
Context to render on
Optional styleOverride: TStyleOverride = {}properties to override the object style
move to interactivity
Private _renderPrivate _renderPrivate _renderPrivate _setPrivate _setPrivate _setPrivate _setProtected _setPrivate _setPrivate _shouldReturns svg representation of an instance
Optional reviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Private _updatePrivate _watchPrivate
Add objects
Rest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]Animates object's properties
map of keys and end values
Optional options: Partial<AnimationOptions<T>>map of animation contexts
As object — multiple properties
object.animate({ left: ..., top: ... }); object.animate({ left: ..., top: ... }, { duration: ... });
Moves an object or a selection up in stack of drawn objects An optional parameter, intersecting allows to move the object in front of the first intersecting object. Where intersection is calculated with bounding box. If no intersection is found, there will not be change in the stack.
Object to send
Optional intersecting: booleanIf true, send object in front of next upper intersecting object
true if change occurred
Moves an object or the objects of a multiple selection to the top of the stack of drawn objects
Object to send
true if change occurred
Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.
return the coordinate of the 4 corners of the bounding box in HTMLCanvasElement coordinates used for bounding box interactivity with the mouse
Calculates the coordinates of the center of each control plus the corners of the control itself This basically just delegates to each control positionHandler WARNING: changing what is passed to positionHandler is a breaking change, since position handler is a public api and should be done just if extremely necessary
calculate transform matrix that represents the current transformations from the object's properties.
Optional skipGroup: boolean = falsereturn transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.
transform matrix for the object
Private canPrivate
Checks if object can enter group and logs relevant warnings
Clears the canvas.contextTop in a specific area that corresponds to the object's bounding box that is in the canvas.contextContainer. This function is used to clear pieces of contextTop where we render ephemeral effects on top of the object. Example: blinking cursor text selection, drag effects.
Optional restoreManually: booleanWhen true won't restore the context after clear, in order to draw something else.
canvas.contextTop that is either still transformed with the object transformMatrix, or restored to neutral transform
discuss swapping restoreManually with a renderCallback, but think of async issues
Creates an instance of Image out of an object makes use of toCanvasElement. Once this method was based on toDataUrl and loadImage, so it also had a quality and format option. toCanvasElement is faster and produce no loss of quality. If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. toCanvasElement and then toBlob from the obtained canvas is also a good option.
Optional options: anyfor clone as image, passed to toDataURL
Object cloned as image.
fix the export type, it could not be Image but the type that getClass return for 'image'.
Given a bounding box, return all the objects of the collection that are contained in the bounding box.
If includeIntersecting is true, return also the objects that intersect the bounding box as well.
This is meant to work with selection. Is not a generic method.
Optional includearray of objects contained in the bounding box, ordered from top to bottom stacking wise
Returns true if collection contains an object.
Prefer using FabricObject#isDescendantOf for performance reasons
instead of a.contains(b) use b.isDescendantOf(a)
Object to check against
Optional deep: booleantrue to check all descendants, false to check only _objects
true if collection contains an object
Checks if point is inside the object
Point to check against
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of stored ones
true if point is inside the object
Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Context to draw on
object representing current object parameters
Optional styleOverride: TStyleOverrideobject to override the object style
Paint the cached copy of the object on the target context.
Context to render on
Execute the drawing operation for an object clipPath
Context to render on
Draws corners of an object's bounding box. Requires public properties: width, height Requires public options: cornerSize, padding
Context to draw on
object to override the object style
Draws lines from a borders of an object's bounding box to controls that have withConnection property set.
Requires public properties: width, height
Requires public options: padding, borderColor
Context to draw on
object size x = width, y = height
Draws a colored layer behind the object, inside its selection borders. Requires public options: padding, selectionBackgroundColor this function is called when the context is transformed has checks to be skipped when the object is on a staticCanvas
Context to draw on
evaluate if make this disappear in favor of a pre-render hook for objects this was added by Andrea Bogazzi to make possible some feature for work reasons it seemed a good option, now is an edge case
Private enterPrivate
Optional removeParentTransform: booleantrue if object is in canvas coordinate plane
true if object entered group
Private exitPrivate
Optional removeParentTransform: booleantrue if object should exit group without applying group's transform to it
Compare ancestors
Optional strict: Sfinds only ancestors that are objects (without canvas)
an object that represent the ancestry situation.
Optional intersecting: booleanOptional intersecting: booleanFires event with an optional options object
Event name to fire
Optional options: GroupEvents[K]Options object
Calls a function for each control. The function gets called, with the control, the control's key and the object that is calling the iterator
function to iterate over the controls over
Executes given function for each object in this group A simple shortcut for getObjects().forEach, before es6 was more complicated, now is just a shortcut.
Callback invoked with current object as first argument, index - as second and an array of all objects - as third.
Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.
Optional absolute: booleanuse coordinates without viewportTransform
Optional calculate: booleanuse coordinates of current position instead of .lineCoords / .aCoords
Object with left, top, width, height properties
return correct set of coordinates for intersection this will return either aCoords or lineCoords. The coords are returned in an array.
will return aCoords if true or lineCoords
will return aCoords if true or lineCoords
[tl, tr, br, bl] of points
Override this method to customize layout.
If you need to run logic once layout completes use onLayout
Returns an array of children objects of this instance
Optional Rest ...types: string[]When specified, only objects of these types are returned
Calculate the bbox of objects relative to instance's containing plane
Optional ignoreOffset: booleanbounding box
Returns id attribute for svg output
Returns filter for svg shadow
Returns transform-string for svg-export
Optional full: booleanx position according to object's originX property in canvas coordinate plane
y position according to object's originY property in canvas coordinate plane
Optional strict: booleanchecks only ancestors that are objects (without canvas)
return true if the object will draw a fill Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when fill happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the fill is invisible.
Boolean
3.0.0
return true if the object will draw a stroke Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when stroke happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the stroke is invisible.
Boolean
3.0.0
Inserts an object into collection at specified index
Index to insert object at
Rest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]Object to insert
Checks if object intersects with another object
Object to test
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of calculating them
true if object intersects with another object
Checks if object is fully contained within area of another object
Object to test
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of stored ones
true if object is fully contained within area of another object
Returns true if the specified control is visible, false otherwise.
The key of the control. Possible values are usually 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr', but since the control api allow for any control name, can be any string.
true if the specified control is visible, false otherwise
Checks if object is descendant of target Should be used instead of Group.contains or StaticCanvas.contains for performance reasons
object to compare against
if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns undefined
Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen
Optional calculate: boolean = falseuse coordinates of current position instead of .aCoords
true if object is fully or partially contained within canvas
Returns object at specified index
object at index
Moves an object to specified level in stack of drawn objects
Object to send
Position to move to
true if change occurred
When set to true, force the object to have its own cache, even if it is inside a group
it may be needed when your object behave in a particular way on the cache and always needs
its own isolated canvas to render correctly.
Created to be overridden
since 1.7.12
Boolean
unsubscribe an event listener
event name (eg. 'after:render')
event listener to unsubscribe
unsubscribe event listeners
handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
unsubscribe all event listeners
Observes specified event
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
on
This callback function is called every time _discardActiveObject or _setActiveObject try to to deselect this object. If the function returns true, the process is cancelled
Optional options: { options sent from the upper functions
Optional e?: TPointerEventevent if the process is generated by an event
Optional object?: InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>next object we are setting as active, and reason why this is being deselected
Hook that is called once layout has completed.
Provided for layout customization, override if necessary.
Complements getLayoutStrategyResult, which is called at the beginning of layout.
layout context
layout result
This callback function is called every time _discardActiveObject or _setActiveObject try to to select this object. If the function returns true, the process is cancelled
Optional options: { options sent from the upper functions
Optional e?: TPointerEventevent if the process is generated by an event
Observes specified event once
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
once
Override this method to customize layout. A wrapper around Group#getObjectsBoundingBox
Calculates center taking into account originX, originY while not being sure that width/height are initialized
Remove objects
Rest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]removed objects
Remove all objects
removed objects
Override to customize drag and drop behavior render a specific effect when an object is the target of a drag event used to show that the underly object can receive a drop, or to show how the object will change when dropping. example: show the cursor where the text is about to be dropped
Sets "angle" of an instance with centered rotation
Angle value (in degrees)
Moves an object or a selection down in stack of drawn objects
An optional parameter, intersecting allows to move the object in behind
the first intersecting object. Where intersection is calculated with
bounding box. If no intersection is found, there will not be change in the
stack.
Object to send
Optional intersecting: booleanIf true, send object behind next lower intersecting object
true if change occurred
Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects
Object to send to back
true if change occurred
Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls. If you need to update those, call setCoords().
Property name or object (if object, iterate over the object properties)
Optional value: anyProperty value (if function, the value is passed into it and its return value is used as a new one)
Sets the visibility of the specified control. please do not use.
The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. but since the control api allow for any control name, can be any string.
true to set the specified control visible, false otherwise
discuss this overlap of priority here with the team. Andrea Bogazzi for details
Sets the visibility state of object controls, this is just a bulk option for setControlVisible;
Optional options: Record<string, boolean> = {}with an optional key per control example: {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
Protected setAs setXY, but in current parent's coordinate plane (the current group if any or the canvas)
x position according to object's originX property in canvas coordinate plane
Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. You can specify originX and originY values, that otherwise are the object's current values.
Set object's bottom left corner to point (5,5) on canvas
object.setXY(new Point(5, 5), 'left', 'bottom').
y position according to object's originY property in canvas coordinate plane
Decide if the object should cache or not. Create its own cache level needsItsOwnCache should be used when the object drawing method requires a cache step. None of the fabric classes requires it. Generally you do not cache objects in groups because the group is already cached.
override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style.
ctx is rotated and translated so that (0,0) is at object's center
the control box size used
Returns svg clipPath representation of an instance
Optional reviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Returns object representation of an instance
Optional propertiesToInclude: K[] = []Any properties that you might want to additionally include in the output
object representation of an instance
Returns svg representation of an instance
Optional reviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Translates the coordinates from a set of origin to another (based on the object's dimensions)
The point which corresponds to the originX and originY params
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Optional context: Partial<LayoutResult> & { pass values to use for layout calculations
Static _fromStatic Private fromPrivate
Object to create a group from
support loading from svg
Group
Static getGenerated using TypeDoc
Fires
object:added
Fires
object:removed
Fires
layout once layout completes