ActiveSelection
Defined in: src/shapes/ActiveSelection.ts:36
Used by Canvas to manage selection.
Example
Extends
Constructors
new ActiveSelection()
new ActiveSelection(
objects
,options
):ActiveSelection
Defined in: src/shapes/ActiveSelection.ts:60
Parameters
objects
FabricObject
[] = []
options
Partial
<ActiveSelectionOptions
> = {}
Returns
Overrides
Properties
__corner?
optional
__corner:string
Defined in: src/shapes/Object/InteractiveObject.ts:105
keeps 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
Inherited from
_controlsVisibility
_controlsVisibility:
Record
<string
,boolean
>
Defined in: src/shapes/Object/InteractiveObject.ts:112
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
Inherited from
_objects
_objects:
FabricObject
[] =[]
Defined in: src/Collection.ts:21
TODO
needs to end up in the constructor too
Inherited from
_scaling?
optional
_scaling:boolean
Defined in: src/shapes/Object/InteractiveObject.ts:134
A 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
TODO
use git blame to investigate why it was added DON’T USE IT. WE WILL TRY TO REMOVE IT
Inherited from
absolutePositioned
absolutePositioned:
boolean
Defined in: src/shapes/Object/Object.ts:214
Meaningful ONLY when the object is used as clipPath. if true, the clipPath will have its top and left relative to canvas, and will not be influenced by the object transform. This will make the clipPath relative to the canvas, but clipping just a particular object. WARNING this is beta, this feature may change or be renamed. since 2.4.0
Default
Inherited from
aCoords
aCoords:
TCornerPoint
Defined in: src/shapes/Object/ObjectGeometry.ts:63
Describe object’s corner position in scene coordinates. The coordinates are derived from the following: left, top, width, height, scaleX, scaleY, skewX, skewY, angle, strokeWidth. The coordinates do not depend on viewport changes. The coordinates get updated with setCoords. You can calculate them without updating with ()
Inherited from
angle
angle:
TDegree
Defined in: src/shapes/Object/ObjectGeometry.ts:581
Angle of rotation of an object (in degrees)
Default
Inherited from
backgroundColor
backgroundColor:
string
Defined in: src/shapes/Object/Object.ts:201
Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
Default
Inherited from
borderColor
borderColor:
string
Defined in: src/shapes/Object/InteractiveObject.ts:74
Color of controlling borders of an object (when it’s active)
Default
Inherited from
borderDashArray
borderDashArray:
null
|number
[]
Defined in: src/shapes/Object/InteractiveObject.ts:75
Array specifying dash pattern of an object’s borders (hasBorder must be true)
Since
1.6.2
Inherited from
borderOpacityWhenMoving
borderOpacityWhenMoving:
number
Defined in: src/shapes/Object/InteractiveObject.ts:76
Opacity of object’s controlling borders when object is active and moving
Default
Inherited from
borderScaleFactor
borderScaleFactor:
number
Defined in: src/shapes/Object/InteractiveObject.ts:77
Scale factor for the border of the objects ( selection box and controls stroke ). Bigger number will make a thicker border border default value is 1, so this scale value is equal to a border and control strokeWidth. Id you need to divide border from control strokeWidth you will need to write your own render function for controls
Default
Inherited from
centeredRotation
centeredRotation:
boolean
Defined in: src/shapes/Object/Object.ts:215
When true
the object will rotate on its center.
When false
will rotate around the origin point defined by originX and originY.
The value of this property is IGNORED during a transform if the canvas has already
centeredRotation set to true
The object method rotate
will always consider this property and never the canvas’s one.
Since
1.3.4
Default
Inherited from
centeredScaling
centeredScaling:
boolean
Defined in: src/shapes/Object/Object.ts:216
When true, this object will use center point as the origin of transformation when being scaled via the controls.
Since
1.3.4
Default
Inherited from
clipPath?
optional
clipPath:BaseFabricObject
Defined in: src/shapes/Object/Object.ts:212
a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to ‘center’
Inherited from
clipPathId?
optional
clipPathId:string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:14
When 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.
Inherited from
controls
controls:
TControlSet
Defined in: src/shapes/Object/InteractiveObject.ts:118
holds the controls for the object. controls are added by default_controls.js
Inherited from
cornerColor
cornerColor:
string
Defined in: src/shapes/Object/InteractiveObject.ts:68
Color of controlling corners of an object (when it’s active)
Default
Inherited from
cornerDashArray
cornerDashArray:
null
|number
[]
Defined in: src/shapes/Object/InteractiveObject.ts:71
Array specifying dash pattern of an object’s control (hasBorder must be true)
Since
1.6.2
Default
Inherited from
cornerSize
cornerSize:
number
Defined in: src/shapes/Object/InteractiveObject.ts:65
Size of object’s controlling corners (in pixels)
Default
Inherited from
cornerStrokeColor
cornerStrokeColor:
string
Defined in: src/shapes/Object/InteractiveObject.ts:69
Color of controlling corners of an object (when it’s active and transparentCorners false)
Since
1.6.2
Default
Inherited from
cornerStyle
cornerStyle:
"circle"
|"rect"
Defined in: src/shapes/Object/InteractiveObject.ts:70
Specify style of control, ‘rect’ or ‘circle’ This is deprecated. In the future there will be a standard control render And you can swap it with one of the alternative proposed with the control api
Since
1.6.2
Default
Inherited from
dirty
dirty:
boolean
Defined in: src/shapes/Object/Object.ts:241
When set to true
, object’s cache will be rerendered next render call.
since 1.7.0
Default
Inherited from
evented
evented:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:82
When set to false
, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
Default
Inherited from
excludeFromExport
excludeFromExport:
boolean
Defined in: src/shapes/Object/Object.ts:208
When true
, object is not exported in OBJECT/JSON
Since
1.6.3
Default
Inherited from
fill
fill:
null
|string
|TFiller
Defined in: src/shapes/Object/Object.ts:191
Color of object’s fill takes css colors https://www.w3.org/TR/css-color-3/
Default
Inherited from
fillRule
fillRule:
CanvasFillRule
Defined in: src/shapes/Object/Object.ts:192
Fill rule used to fill an object
accepted values are nonzero, evenodd
Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use globalCompositeOperation
instead)
Default
Inherited from
flipX
flipX:
boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:567
When true, an object is rendered as flipped horizontally
Default
Inherited from
flipY
flipY:
boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:568
When true, an object is rendered as flipped vertically
Default
Inherited from
globalCompositeOperation
globalCompositeOperation:
GlobalCompositeOperation
Defined in: src/shapes/Object/Object.ts:200
Composite rule used for canvas globalCompositeOperation
Default
Inherited from
Group
.globalCompositeOperation
hasBorders
hasBorders:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:78
When set to false
, object’s controlling borders are not rendered
Default
Inherited from
hasControls
hasControls:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:72
When set to false
, object’s controls are not displayed and can not be used to manipulate object
Default
Inherited from
height
height:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:566
Object height
Default
Inherited from
hoverCursor
hoverCursor:
null
|string
Defined in: src/shapes/Object/InteractiveObject.ts:86
Default cursor value used when hovering over this object on canvas
Default
Inherited from
includeDefaultValues
includeDefaultValues:
boolean
Defined in: src/shapes/Object/Object.ts:207
When false
, default object’s values are not included in its serialization
Default
Inherited from
interactive
interactive:
boolean
Defined in: src/shapes/Group.ts:108
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
This will be not removed but slowly replaced with a method setInteractive
that will take care of enabling subTargetCheck and necessary object events.
There is too much attached to group interactivity to just be evaluated by a
boolean in the code
Default
Inherited from
inverted
inverted:
boolean
Defined in: src/shapes/Object/Object.ts:213
Meaningful ONLY when the object is used as clipPath. if true, the clipPath will make the object clip to the outside of the clipPath since 2.4.0
Default
Inherited from
isMoving?
optional
isMoving:boolean
Defined in: src/shapes/Object/InteractiveObject.ts:124
internal boolean to signal the code that the object is part of the move action.
Inherited from
layoutManager
layoutManager:
ActiveSelectionLayoutManager
Defined in: src/shapes/ActiveSelection.ts:49
The ActiveSelection needs to use the ActiveSelectionLayoutManager or selections on interactive groups may be broken
Overrides
left
left:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:564
Left position of an object. Note that by default it’s relative to object left. You can change this by setting originX
Default
Inherited from
lockMovementX
lockMovementX:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:56
When true
, object horizontal movement is locked
Default
Inherited from
lockMovementY
lockMovementY:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:57
When true
, object vertical movement is locked
Default
Inherited from
lockRotation
lockRotation:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:58
When true
, object rotation is locked
Default
Inherited from
lockScalingFlip
lockScalingFlip:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:63
When true
, object cannot be flipped by scaling into negative values
Default
Inherited from
lockScalingX
lockScalingX:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:59
When true
, object horizontal scaling is locked
Default
Inherited from
lockScalingY
lockScalingY:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:60
When true
, object vertical scaling is locked
Default
Inherited from
lockSkewingX
lockSkewingX:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:61
When true
, object horizontal skewing is locked
Default
Inherited from
lockSkewingY
lockSkewingY:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:62
When true
, object vertical skewing is locked
Default
Inherited from
matrixCache?
optional
matrixCache:TMatrixCache
Defined in: src/shapes/Object/ObjectGeometry.ts:73
storage cache for object full transform matrix
Inherited from
minScaleLimit
minScaleLimit:
number
Defined in: src/shapes/Object/Object.ts:186
Minimum allowed scale value of an object
Default
Inherited from
moveCursor
moveCursor:
null
|string
Defined in: src/shapes/Object/InteractiveObject.ts:87
Default cursor value used when moving this object on canvas
Default
Inherited from
multiSelectionStacking
multiSelectionStacking:
MultiSelectionStacking
Defined in: src/shapes/ActiveSelection.ts:58
controls how selected objects are added during a multiselection event
canvas-stacking
adds the selected object to the active selection while respecting canvas object stacking orderselection-order
adds the selected object to the top of the stack, meaning that the stack is ordered by the order in which objects were selected
Default
canvas-stacking
noScaleCache
noScaleCache:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:51
When true
, cache does not get updated during scaling. The picture will get blocky if scaled
too much and will be redrawn with correct details at the end of scaling.
this setting is performance and application dependant.
default to true
since 1.7.0
Default
Inherited from
objectCaching
objectCaching:
boolean
Defined in: src/shapes/Object/Object.ts:210
When true
, object is cached on an additional canvas.
When false
, object is not cached unless necessary ( clipPath )
default to true
Since
1.7.0
Default
Inherited from
oCoords
oCoords:
Record
<string
,TOCoord
>
Defined in: src/shapes/Object/InteractiveObject.ts:95
The object’s controls’ position in viewport coordinates
Calculated by Control#positionHandler and Control#calcCornerCoords, depending on padding.
corner/touchCorner
describe the 4 points forming the interactive area of the corner.
Used to draw and locate controls.
Inherited from
opacity
opacity:
number
Defined in: src/shapes/Object/Object.ts:188
Opacity of an object
Default
Inherited from
originX
originX:
TOriginX
Defined in: src/shapes/Object/ObjectGeometry.ts:576
Inherited from
originY
originY:
TOriginY
Defined in: src/shapes/Object/ObjectGeometry.ts:580
Inherited from
ownMatrixCache?
optional
ownMatrixCache:TMatrixCache
Defined in: src/shapes/Object/ObjectGeometry.ts:68
storage cache for object transform matrix
Inherited from
padding
padding:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:53
Padding between object and its controlling borders (in pixels)
Default
Inherited from
paintFirst
paintFirst:
"fill"
|"stroke"
Defined in: src/shapes/Object/Object.ts:190
Determines if the fill or the stroke is drawn first (one of “fill” or “stroke”)
Default
Inherited from
parent?
optional
parent:Group
Defined in: src/shapes/Object/Object.ts:1595
A 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
Inherited from
perPixelTargetFind
perPixelTargetFind:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:83
When set to true
, objects are “found” on canvas on per-pixel basis rather than according to bounding box
Default
Inherited from
scaleX
scaleX:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:569
Object scale factor (horizontal)
Default
Inherited from
scaleY
scaleY:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:570
Object scale factor (vertical)
Default
Inherited from
selectable
selectable:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:81
When set to false
, an object can not be selected for modification (using either point-click-based or group-based selection).
But events still fire on it.
Default
Inherited from
selectionBackgroundColor
selectionBackgroundColor:
string
Defined in: src/shapes/Object/InteractiveObject.ts:79
Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.
Default
Inherited from
Group
.selectionBackgroundColor
shadow
shadow:
null
|Shadow
Defined in: src/shapes/Object/Object.ts:203
Shadow object representing shadow of this shape
Default
Inherited from
skewX
skewX:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:571
Angle of skew on x axes of an object (in degrees)
Default
Inherited from
skewY
skewY:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:572
Angle of skew on y axes of an object (in degrees)
Default
Inherited from
snapAngle?
optional
snapAngle:TDegree
Defined in: src/shapes/Object/InteractiveObject.ts:53
The angle that an object will lock to while rotating.
Inherited from
snapThreshold?
optional
snapThreshold:TDegree
Defined in: src/shapes/Object/InteractiveObject.ts:54
The angle difference from the current snapped angle in which snapping should occur. When undefined, the snapThreshold will default to the snapAngle.
Inherited from
stroke
stroke:
null
|string
|TFiller
Defined in: src/shapes/Object/Object.ts:193
When defined, an object is rendered via stroke and this property specifies its color takes css colors https://www.w3.org/TR/css-color-3/
Default
Inherited from
strokeDashArray
strokeDashArray:
null
|number
[]
Defined in: src/shapes/Object/Object.ts:194
Array specifying dash pattern of an object’s stroke (stroke must be defined)
Default
Inherited from
strokeDashOffset
strokeDashOffset:
number
Defined in: src/shapes/Object/Object.ts:195
Line offset of an object’s stroke
Default
Inherited from
strokeLineCap
strokeLineCap:
CanvasLineCap
Defined in: src/shapes/Object/Object.ts:196
Line endings style of an object’s stroke (one of “butt”, “round”, “square”)
Default
Inherited from
strokeLineJoin
strokeLineJoin:
CanvasLineJoin
Defined in: src/shapes/Object/Object.ts:197
Corner style of an object’s stroke (one of “bevel”, “round”, “miter”)
Default
Inherited from
strokeMiterLimit
strokeMiterLimit:
number
Defined in: src/shapes/Object/Object.ts:198
Maximum miter length (used for strokeLineJoin = “miter”) of an object’s stroke
Default
Inherited from
strokeUniform
strokeUniform:
boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:583
When false
, the stoke width will scale with the object.
When true
, the stroke will always match the exact pixel size entered for stroke width.
this Property does not work on Text classes or drawing call that uses strokeText,fillText methods
default to false
Since
2.6.0
Default
Default
Inherited from
strokeWidth
strokeWidth:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:582
Width of a stroke used to render this object
Default
Inherited from
subTargetCheck
subTargetCheck:
boolean
Defined in: src/shapes/Group.ts:94
Used to optimize performance
set to false
if you don’t need contained objects to be targets of events
Default
Inherited from
top
top:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:563
Top position of an object. Note that by default it’s relative to object top. You can change this by setting originY
Default
Inherited from
touchCornerSize
touchCornerSize:
number
Defined in: src/shapes/Object/InteractiveObject.ts:66
Size of object’s controlling corners when touch interaction is detected
Default
Inherited from
transparentCorners
transparentCorners:
boolean
Defined in: src/shapes/Object/InteractiveObject.ts:67
When true, object’s controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
Default
Inherited from
visible
visible:
boolean
Defined in: src/shapes/Object/Object.ts:205
When set to false
, an object is not rendered on canvas
Default
Inherited from
width
width:
number
Defined in: src/shapes/Object/ObjectGeometry.ts:565
Object width
Default
Inherited from
cacheProperties
static
cacheProperties:string
[]
Defined in: src/shapes/Object/Object.ts:233
List 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
Inherited from
colorProperties
static
colorProperties:string
[]
Defined in: src/shapes/Object/Object.ts:1502
List of properties to consider for animating colors.
Inherited from
customProperties
static
customProperties:string
[] =[]
Defined in: src/shapes/Object/Object.ts:1743
Define a list of custom properties that will be serialized when instance.toObject() gets called
Inherited from
ownDefaults
static
ownDefaults:Record
<string
,any
> =activeSelectionDefaultValues
Defined in: src/shapes/ActiveSelection.ts:39
Overrides
stateProperties
static
stateProperties:string
[]
Defined in: src/shapes/Object/Object.ts:224
This list of properties is used to check if the state of an object is changed. This state change now is only used for children of groups to understand if a group needs its cache regenerated during a .set call
Inherited from
type
static
type:string
='ActiveSelection'
Defined in: src/shapes/ActiveSelection.ts:37
Legacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists to avoid type errors in old code and possibly current deserialization code. DO NOT build new code around this type value
TODO
add sustainable warning message
Overrides
Accessors
type
Get Signature
get type():
string
Defined in: src/shapes/Object/Object.ts:353
Legacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists to avoid type errors in old code and possibly current deserialization code. DO NOT build new code around this type value
TODO
add sustainable warning message
Returns
string
Set Signature
set type(
value
):void
Defined in: src/shapes/Object/Object.ts:361
Parameters
value
string
Returns
void
Inherited from
Methods
_drawClipPath()
_drawClipPath(
ctx
,clipPath
,context
):void
Defined in: src/shapes/Object/Object.ts:883
Prepare clipPath state and cache and draw it on instance’s cache
Parameters
ctx
CanvasRenderingContext2D
clipPath
undefined
| BaseFabricObject
context
Returns
void
Inherited from
_limitCacheSize()
_limitCacheSize(
dims
):any
Defined in: src/shapes/Object/Object.ts:402
Limit 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.
Parameters
dims
any
Returns
any
.width width of canvas
.height height of canvas
.zoomX zoomX zoom value to unscale the canvas before drawing cache
.zoomY zoomY zoom value to unscale the canvas before drawing cache
Inherited from
_onObjectAdded()
_onObjectAdded(
object
):void
Defined in: src/shapes/Group.ts:258
Parameters
object
Returns
void
Inherited from
_onStackOrderChanged()
_onStackOrderChanged():
void
Defined in: src/shapes/Group.ts:288
Returns
void
Inherited from
_removeCacheCanvas()
_removeCacheCanvas():
void
Defined in: src/shapes/Object/Object.ts:719
Remove cacheCanvas and its dimensions from the objects
Returns
void
Inherited from
_renderControls()
_renderControls(
ctx
,styleOverride
?,childrenOverride
?):void
Defined in: src/shapes/ActiveSelection.ts:237
Renders controls and borders for the object
Parameters
ctx
CanvasRenderingContext2D
Context to render on
styleOverride?
Partial
<Pick
<InteractiveFabricObject
, "cornerStyle"
| "cornerSize"
| "cornerColor"
| "cornerStrokeColor"
| "cornerDashArray"
| "transparentCorners"
>>
properties to override the object style
childrenOverride?
Partial
<Pick
<InteractiveFabricObject
, "cornerStyle"
| "cornerSize"
| "cornerColor"
| "cornerStrokeColor"
| "cornerDashArray"
| "transparentCorners"
>>
properties to override the children overrides
Returns
void
Overrides
_setClippingProperties()
_setClippingProperties(
ctx
):void
Defined in: src/shapes/Object/Object.ts:1025
Parameters
ctx
CanvasRenderingContext2D
Returns
void
Inherited from
_setFillStyles()
_setFillStyles(
ctx
,__namedParameters
):void
Defined in: src/shapes/Object/Object.ts:1014
Parameters
ctx
CanvasRenderingContext2D
__namedParameters
Pick
<ActiveSelection
, "fill"
>
Returns
void
Inherited from
_setStrokeStyles()
_setStrokeStyles(
ctx
,decl
):void
Defined in: src/shapes/Object/Object.ts:972
Parameters
ctx
CanvasRenderingContext2D
decl
Pick
<ActiveSelection
, "stroke"
| "strokeWidth"
| "strokeDashOffset"
| "strokeLineCap"
| "strokeLineJoin"
| "strokeMiterLimit"
>
Returns
void
Inherited from
_setupCompositeOperation()
_setupCompositeOperation(
ctx
):void
Defined in: src/shapes/Object/Object.ts:1477
Sets canvas globalCompositeOperation for specific object custom composition operation for the particular object can be specified using globalCompositeOperation property
Parameters
ctx
CanvasRenderingContext2D
Rendering canvas context
Returns
void
Inherited from
Group
._setupCompositeOperation
_toSVG()
_toSVG(
reviver
?):string
[]
Defined in: src/shapes/Group.ts:637
Returns svg representation of an instance
Parameters
reviver?
Method for further parsing of svg representation.
Returns
string
[]
svg representation of an instance
Inherited from
add()
add(…
objects
):number
Defined in: src/shapes/Group.ts:228
Add objects
Parameters
objects
…FabricObject
[]
Returns
number
Inherited from
addPaintOrder()
addPaintOrder(
this
):string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:249
Parameters
this
FabricObjectSVGExportMixin
& FabricObject
Returns
string
Inherited from
animate()
animate<
T
>(animatable
,options
?):Record
<string
,TAnimation
<T
>>
Defined in: src/shapes/Object/Object.ts:1516
Animates object’s properties
Type Parameters
• T extends number
| number
[] | TColorArg
Parameters
animatable
Record
<string
, T
>
map of keys and end values
options?
Partial
<AnimationOptions
<T
>>
Returns
Record
<string
, TAnimation
<T
>>
map of animation contexts
As object — multiple properties
object.animate({ left: …, top: … }); object.animate({ left: …, top: … }, { duration: … });
Tutorial
http://fabricjs.com/fabric-intro-part-2#animation
Inherited from
bringObjectForward()
bringObjectForward(
object
,intersecting
?):boolean
Defined in: src/Collection.ts:240
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.
Parameters
object
Object to send
intersecting?
boolean
If true
, send object in front of next upper intersecting object
Returns
boolean
true if change occurred
Inherited from
bringObjectToFront()
bringObjectToFront(
object
):boolean
Defined in: src/Collection.ts:194
Moves an object or the objects of a multiple selection to the top of the stack of drawn objects
Parameters
object
Object to send
Returns
boolean
true if change occurred
Inherited from
calcACoords()
calcACoords():
TCornerPoint
Defined in: src/shapes/Object/ObjectGeometry.ts:427
Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.
Returns
Inherited from
calcOCoords()
calcOCoords():
Record
<string
,TOCoord
>
Defined in: src/shapes/Object/InteractiveObject.ts:255
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
Returns
Record
<string
, TOCoord
>
Inherited from
calcOwnMatrix()
calcOwnMatrix():
TMat2D
Defined in: src/shapes/Object/ObjectGeometry.ts:513
calculate transform matrix that represents the current transformations from the object’s properties, this matrix does not include the group transformation
Returns
transform matrix for the object
Inherited from
calcTransformMatrix()
calcTransformMatrix(
skipGroup
?):TMat2D
Defined in: src/shapes/Object/ObjectGeometry.ts:485
calculate transform matrix that represents the current transformations from the object’s properties.
Parameters
skipGroup?
boolean
= false
return transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.
Returns
transform matrix for the object
Inherited from
canDrop()
canDrop(
_e
):boolean
Defined in: src/shapes/Object/InteractiveObject.ts:701
Override to customize drag and drop behavior
Parameters
_e
DragEvent
Returns
boolean
true if the object currently dragged can be dropped on the target
Inherited from
canEnterGroup()
canEnterGroup(
object
):boolean
Defined in: src/shapes/ActiveSelection.ts:115
block ancestors/descendants of selected objects from being selected to prevent a circular object tree
Parameters
object
Returns
boolean
Overrides
Group.canEnterGroup
clearContextTop()
clearContextTop(
restoreManually
?):undefined
|CanvasRenderingContext2D
Defined in: src/shapes/Object/InteractiveObject.ts:627
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.
Parameters
restoreManually?
boolean
When true won’t restore the context after clear, in order to draw something else.
Returns
undefined
| CanvasRenderingContext2D
canvas.contextTop that is either still transformed with the object transformMatrix, or restored to neutral transform
Todo
discuss swapping restoreManually with a renderCallback, but think of async issues
Inherited from
clone()
clone(
propertiesToInclude
?):Promise
<ActiveSelection
>
Defined in: src/shapes/Object/Object.ts:1251
Clones an instance.
Parameters
propertiesToInclude?
string
[]
Any properties that you might want to additionally include in the output
Returns
Promise
<ActiveSelection
>
Inherited from
cloneAsImage()
cloneAsImage(
options
?):FabricImage
Defined in: src/shapes/Object/Object.ts:1277
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.
Parameters
options?
ObjectToCanvasElementOptions
for clone as image, passed to toDataURL
Returns
Object cloned as image.
Todo
fix the export type, it could not be Image but the type that getClass return for ‘image’.
Inherited from
collectObjects()
collectObjects(
bbox
,options
):InteractiveFabricObject
[]
Defined in: src/Collection.ts:326
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.
Parameters
bbox
a bounding box in scene coordinates
options
an object with includeIntersecting
includeIntersecting
boolean
= true
Returns
array of objects contained in the bounding box, ordered from top to bottom stacking wise
Inherited from
complexity()
complexity():
number
Defined in: src/Collection.ts:165
Returns number representation of a collection complexity
Returns
number
complexity
Inherited from
contains()
contains(
object
,deep
?):boolean
Defined in: src/Collection.ts:148
Returns true if collection contains an object.
Prefer using FabricObject#isDescendantOf for performance reasons
instead of a.contains(b)
use b.isDescendantOf(a)
Parameters
object
Object to check against
deep?
boolean
true
to check all descendants, false
to check only _objects
Returns
boolean
true
if collection contains an object
Inherited from
containsPoint()
containsPoint(
point
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:282
Checks if point is inside the object
Parameters
point
Point to check against
Returns
boolean
true if point is inside the object
Inherited from
dispose()
dispose():
void
Defined in: src/shapes/Group.ts:605
cancel instance’s running animations
override if necessary to dispose artifacts such as clipPath
Returns
void
Inherited from
drawBorders()
drawBorders(
ctx
,options
,styleOverride
?):void
Defined in: src/shapes/Object/InteractiveObject.ts:478
Draws borders of an object’s bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Parameters
ctx
CanvasRenderingContext2D
Context to draw on
options
Required
<Omit
<TComposeMatrixArgs
, "flipY"
| "flipX"
>>
object representing current object parameters
styleOverride?
TStyleOverride
object to override the object style
Returns
void
Inherited from
drawCacheOnCanvas()
drawCacheOnCanvas(
this
,ctx
):void
Defined in: src/shapes/Object/Object.ts:905
Paint the cached copy of the object on the target context.
Parameters
this
TCachedFabricObject
<BaseFabricObject
>
ctx
CanvasRenderingContext2D
Context to render on
Returns
void
Inherited from
drawClipPathOnCache()
drawClipPathOnCache(
ctx
,clipPath
,canvasWithClipPath
):void
Defined in: src/shapes/Object/Object.ts:810
Execute the drawing operation for an object clipPath
Parameters
ctx
CanvasRenderingContext2D
Context to render on
clipPath
canvasWithClipPath
HTMLCanvasElement
Returns
void
Inherited from
drawControls()
drawControls(
ctx
,styleOverride
):void
Defined in: src/shapes/Object/InteractiveObject.ts:550
Draws corners of an object’s bounding box. Requires public properties: width, height Requires public options: cornerSize, padding Be aware that since fabric 6.0 this function does not call setCoords anymore. setCoords needs to be called manually if the object of which we are rendering controls is outside the standard selection and transform process.
Parameters
ctx
CanvasRenderingContext2D
Context to draw on
styleOverride
Partial
<Pick
<InteractiveFabricObject
, "cornerStyle"
| "cornerSize"
| "cornerColor"
| "cornerStrokeColor"
| "cornerDashArray"
| "transparentCorners"
>> = {}
object to override the object style
Returns
void
Inherited from
drawControlsConnectingLines()
drawControlsConnectingLines(
ctx
,size
):void
Defined in: src/shapes/Object/InteractiveObject.ts:517
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
Parameters
ctx
CanvasRenderingContext2D
Context to draw on
size
object size x = width, y = height
Returns
void
Inherited from
Group
.drawControlsConnectingLines
drawObject()
drawObject(
ctx
,forClipping
,context
):void
Defined in: src/shapes/Group.ts:496
Execute the drawing operation for an object on a specified context
Parameters
ctx
CanvasRenderingContext2D
Context to render on
forClipping
undefined
| boolean
context
Returns
void
Inherited from
drawSelectionBackground()
drawSelectionBackground(
ctx
):void
Defined in: src/shapes/Object/InteractiveObject.ts:375
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
Parameters
ctx
CanvasRenderingContext2D
Context to draw on
Returns
void
Todo
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
Inherited from
findCommonAncestors()
findCommonAncestors<
T
>(other
):AncestryComparison
Defined in: src/shapes/Object/Object.ts:1634
Compare ancestors
Type Parameters
• T extends ActiveSelection
Parameters
other
T
Returns
AncestryComparison
an object that represent the ancestry situation.
Inherited from
findNewLowerIndex()
findNewLowerIndex(
object
,idx
,intersecting
?):number
Defined in: src/Collection.ts:272
Parameters
object
idx
number
intersecting?
boolean
Returns
number
Inherited from
findNewUpperIndex()
findNewUpperIndex(
object
,idx
,intersecting
?):number
Defined in: src/Collection.ts:295
Parameters
object
idx
number
intersecting?
boolean
Returns
number
Inherited from
fire()
fire<
K
>(eventName
,options
?):void
Defined in: src/Observable.ts:167
Fires event with an optional options object
Type Parameters
• K extends keyof GroupEvents
Parameters
eventName
K
Event name to fire
options?
GroupEvents
[K
]
Options object
Returns
void
Inherited from
forEachControl()
forEachControl(
fn
):void
Defined in: src/shapes/Object/InteractiveObject.ts:353
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
Parameters
fn
(control
, key
, fabricObject
) => any
function to iterate over the controls over
Returns
void
Inherited from
forEachObject()
forEachObject(
callback
):void
Defined in: src/Collection.ts:91
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.
Parameters
callback
(object
, index
, array
) => any
Callback invoked with current object as first argument, index - as second and an array of all objects - as third.
Returns
void
Inherited from
get()
get(
property
):any
Defined in: src/CommonMethods.ts:59
Basic getter
Parameters
property
string
Property name
Returns
any
value of a property
Inherited from
getActiveControl()
getActiveControl():
undefined
| {control
:Control
;coord
:TOCoord
;key
:string
; }
Defined in: src/shapes/Object/InteractiveObject.ts:194
Returns
undefined
| { control
: Control
; coord
: TOCoord
; key
: string
; }
Inherited from
getAncestors()
getAncestors():
Ancestors
Defined in: src/shapes/Object/Object.ts:1617
Returns
Ancestors
ancestors (excluding ActiveSelection
) from bottom to top
Inherited from
getBoundingRect()
getBoundingRect():
TBBox
Defined in: src/shapes/Object/ObjectGeometry.ts:343
Returns coordinates of object’s bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.
Returns
Object with left, top, width, height properties
Inherited from
getCanvasRetinaScaling()
getCanvasRetinaScaling():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:400
Returns
number
Inherited from
getCenterPoint()
getCenterPoint():
Point
Defined in: src/shapes/Object/ObjectGeometry.ts:732
Returns the center coordinates of the object relative to canvas
Returns
Inherited from
getCoords()
getCoords():
Point
[]
Defined in: src/shapes/Object/ObjectGeometry.ts:204
Returns
Point
[]
[tl, tr, br, bl] in the scene plane
Inherited from
getObjectOpacity()
getObjectOpacity():
number
Defined in: src/shapes/Object/Object.ts:570
Return the object opacity counting also the group property
Returns
number
Inherited from
getObjects()
getObjects(…
types
?):FabricObject
[]
Defined in: src/Collection.ts:108
Returns an array of children objects of this instance
Parameters
types?
…string
[]
When specified, only objects of these types are returned
Returns
Inherited from
getObjectScaling()
getObjectScaling():
Point
Defined in: src/shapes/Object/Object.ts:539
Return the object scale factor counting also the group scaling
Returns
Inherited from
getPointByOrigin()
getPointByOrigin(
originX
,originY
):Point
Defined in: src/shapes/Object/ObjectGeometry.ts:762
Returns the position of the object as if it has a different origin. Take an object that has left, top set to 100, 100 with origin ‘left’, ‘top’. Return the values of left top ( wrapped in a point ) that you would need to keep the same position if origin where different. Alternatively you can use this to also find which point in the parent plane is a specific origin ( where is the bottom right corner of my object? )
Parameters
originX
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
getRelativeCenterPoint()
getRelativeCenterPoint():
Point
Defined in: src/shapes/Object/ObjectGeometry.ts:743
Returns the center coordinates of the object relative to it’s parent
Returns
Inherited from
getRelativeX()
getRelativeX():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:115
Returns
number
x position according to object’s originX property in parent’s coordinate plane
if parent is canvas then this property is identical to getX
Inherited from
getRelativeXY()
getRelativeXY():
Point
Defined in: src/shapes/Object/ObjectGeometry.ts:176
Returns
x,y position according to object’s originX originY properties in parent’s coordinate plane
Inherited from
getRelativeY()
getRelativeY():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:131
Returns
number
y position according to object’s originY property in parent’s coordinate plane
if parent is canvas then this property is identical to getY
Inherited from
getScaledHeight()
getScaledHeight():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:361
Returns height of an object bounding box counting transformations
Returns
number
height value
Todo
shouldn’t this account for group transform and return the actual size in canvas coordinate plane?
Inherited from
getScaledWidth()
getScaledWidth():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:352
Returns width of an object’s bounding box counting transformations
Returns
number
width value
Todo
shouldn’t this account for group transform and return the actual size in canvas coordinate plane?
Inherited from
getSvgCommons()
getSvgCommons(
this
):string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:84
Returns id attribute for svg output
Parameters
this
FabricObjectSVGExportMixin
& FabricObject
& object
Returns
string
Inherited from
getSvgFilter()
getSvgFilter(
this
):string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:76
Returns filter for svg shadow
Parameters
this
FabricObjectSVGExportMixin
& FabricObject
Returns
string
Inherited from
getSvgStyles()
getSvgStyles():
string
Defined in: src/shapes/Group.ts:652
Returns styles-string for svg-export, specific version for group
Returns
string
Inherited from
getSvgTransform()
getSvgTransform(
this
,full
?,additionalTransform
?):string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:103
Returns transform-string for svg-export
Parameters
this
FabricObjectSVGExportMixin
& FabricObject
full?
boolean
additionalTransform?
string
= ''
Returns
string
Inherited from
getTotalAngle()
getTotalAngle():
TDegree
Defined in: src/shapes/Object/ObjectGeometry.ts:408
Returns the object angle relative to canvas counting also the group property
Returns
Inherited from
getTotalObjectScaling()
getTotalObjectScaling():
Point
Defined in: src/shapes/Object/Object.ts:556
Return the object scale factor counting also the group scaling, zoom and retina
Returns
object with scaleX and scaleY properties
Inherited from
getViewportTransform()
getViewportTransform():
TMat2D
Defined in: src/shapes/Object/ObjectGeometry.ts:418
Retrieves viewportTransform from Object’s canvas if available
Returns
Inherited from
getX()
getX():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:86
Returns
number
x position according to object’s originX property in canvas coordinate plane
Inherited from
getXY()
getXY():
Point
Defined in: src/shapes/Object/ObjectGeometry.ts:146
Returns
x position according to object’s originX originY properties in canvas coordinate plane
Inherited from
getY()
getY():
number
Defined in: src/shapes/Object/ObjectGeometry.ts:100
Returns
number
y position according to object’s originY property in canvas coordinate plane
Inherited from
hasCommonAncestors()
hasCommonAncestors<
T
>(other
):boolean
Defined in: src/shapes/Object/Object.ts:1699
Type Parameters
• T extends ActiveSelection
Parameters
other
T
Returns
boolean
Inherited from
hasFill()
hasFill():
null
|boolean
|""
Defined in: src/shapes/Object/Object.ts:750
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.
Returns
null
| boolean
| ""
Boolean
Since
3.0.0
Inherited from
hasStroke()
hasStroke():
null
|boolean
|""
Defined in: src/shapes/Object/Object.ts:734
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.
Returns
null
| boolean
| ""
Boolean
Since
3.0.0
Inherited from
insertAt()
insertAt(
index
, …objects
):number
Defined in: src/shapes/Group.ts:240
Inserts an object into collection at specified index
Parameters
index
number
Index to insert object at
objects
…FabricObject
[]
Object to insert
Returns
number
Inherited from
intersectsWithObject()
intersectsWithObject(
other
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:232
Checks if object intersects with another object
Parameters
other
ObjectGeometry
Object to test
Returns
boolean
true if object intersects with another object
Inherited from
intersectsWithRect()
intersectsWithRect(
tl
,br
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:218
Checks if object intersects with the scene rect formed by tl and br
Parameters
tl
br
Returns
boolean
Inherited from
isCacheDirty()
isCacheDirty(
skipCanvas
):boolean
Defined in: src/shapes/Object/Object.ts:919
Check if cache is dirty
Parameters
skipCanvas
boolean
= false
skip canvas checks because this object is painted on parent canvas.
Returns
boolean
Inherited from
isContainedWithinObject()
isContainedWithinObject(
other
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:251
Checks if object is fully contained within area of another object
Parameters
other
ObjectGeometry
Object to test
Returns
boolean
true if object is fully contained within area of another object
Inherited from
isContainedWithinRect()
isContainedWithinRect(
tl
,br
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:259
Checks if object is fully contained within the scene rect formed by tl and br
Parameters
tl
br
Returns
boolean
Inherited from
isControlVisible()
isControlVisible(
controlKey
):boolean
Defined in: src/shapes/Object/InteractiveObject.ts:584
Returns true if the specified control is visible, false otherwise.
Parameters
controlKey
string
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.
Returns
boolean
true if the specified control is visible, false otherwise
Inherited from
isDescendantOf()
isDescendantOf(
target
):boolean
Defined in: src/shapes/Object/Object.ts:1603
Checks if object is descendant of target Should be used instead of Group.contains or StaticCanvas.contains for performance reasons
Parameters
target
TAncestor
Returns
boolean
Inherited from
isEmpty()
isEmpty():
boolean
Defined in: src/Collection.ts:128
Returns true if collection contains no objects
Returns
boolean
true if collection is empty
Inherited from
isInFrontOf()
isInFrontOf<
T
>(other
):undefined
|boolean
Defined in: src/shapes/Object/Object.ts:1709
Type Parameters
• T extends ActiveSelection
Parameters
other
T
object to compare against
Returns
undefined
| boolean
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
Inherited from
isNotVisible()
isNotVisible():
boolean
Defined in: src/shapes/Object/Object.ts:649
Returns
boolean
Inherited from
isOnACache()
isOnACache():
boolean
Defined in: src/shapes/ActiveSelection.ts:227
Check if this group or its parent group are caching, recursively up
Returns
boolean
Overrides
isOnScreen()
isOnScreen():
boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:291
Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen
Returns
boolean
true if object is fully or partially contained within canvas
Inherited from
isOverlapping()
isOverlapping<
T
>(other
):boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:269
Type Parameters
• T extends ObjectGeometry
Parameters
other
T
Returns
boolean
Inherited from
isPartiallyOnScreen()
isPartiallyOnScreen():
boolean
Defined in: src/shapes/Object/ObjectGeometry.ts:321
Checks if object is partially contained within the canvas with current viewportTransform
Returns
boolean
true if object is partially contained within canvas
Inherited from
isType()
isType(…
types
):boolean
Defined in: src/shapes/Object/Object.ts:1408
Returns true if any of the specified types is identical to the type of an instance
Parameters
types
…string
[]
Returns
boolean
Inherited from
item()
item(
index
):FabricObject
Defined in: src/Collection.ts:120
Returns object at specified index
Parameters
index
number
Returns
object at index
Inherited from
moveObjectTo()
moveObjectTo(
object
,index
):boolean
Defined in: src/Collection.ts:262
Moves an object to specified level in stack of drawn objects
Parameters
object
Object to send
index
number
Position to move to
Returns
boolean
true if change occurred
Inherited from
multiSelectAdd()
multiSelectAdd(…
targets
):void
Defined in: src/shapes/ActiveSelection.ts:94
Adds objects with respect to multiSelectionStacking
Parameters
targets
…FabricObject
[]
object to add to selection
Returns
void
needsItsOwnCache()
needsItsOwnCache():
boolean
Defined in: src/shapes/Object/Object.ts:762
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
Returns
boolean
Boolean
Inherited from
off()
Call Signature
off<
K
>(eventName
):void
Defined in: src/Observable.ts:122
Unsubscribe all event listeners for eventname. Do not use this pattern. You could kill internal fabricJS events. We know we should have protected events for internal flows, but we don’t have yet
Type Parameters
• K extends keyof GroupEvents
Parameters
eventName
K
event name (eg. ‘after:render’)
Returns
void
Inherited from
Call Signature
off<
K
>(eventName
,handler
):void
Defined in: src/Observable.ts:128
unsubscribe an event listener
Type Parameters
• K extends keyof GroupEvents
Parameters
eventName
K
event name (eg. ‘after:render’)
handler
TEventCallback
<any
>
event listener to unsubscribe
Returns
void
Inherited from
Call Signature
off(
handlers
):void
Defined in: src/Observable.ts:133
unsubscribe event listeners
Parameters
handlers
EventRegistryObject
<GroupEvents
>
handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
void
Inherited from
Call Signature
off():
void
Defined in: src/Observable.ts:137
unsubscribe all event listeners
Returns
void
Inherited from
on()
Call Signature
on<
K
,E
>(eventName
,handler
):VoidFunction
Defined in: src/Observable.ts:23
Observes specified event
Type Parameters
• K extends keyof GroupEvents
• E extends TPointerEventInfo
| TPointerEventInfo
& object
| TPointerEventInfo
<WheelEvent
> | TPointerEventInfo
& InEvent
| TPointerEventInfo
& OutEvent
| Partial
<TEvent
> & object
| Partial
<TEvent
> & object
| { target
: Canvas
| Group
| StaticCanvas
; } | { target
: Canvas
| Group
| StaticCanvas
; } | { path
: FabricObject
; } | TEventWithTarget
<DragEvent
> | DragEventData
| DragEventData
& InEvent
| DragEventData
& OutEvent
| DropEventData
| SimpleEventHandler
<Event
> | BasicTransformEvent
| BasicTransformEvent
& ModifyPathEvent
| ModifiedEvent
| { target
: FabricObject
; } | { target
: FabricObject
; } | LayoutBeforeEvent
| LayoutAfterEvent
Parameters
eventName
K
Event name (eg. ‘after:render’)
handler
TEventCallback
<E
>
Function that receives a notification when an event of the specified type occurs
Returns
VoidFunction
disposer
Alias
on
Inherited from
Call Signature
on(
handlers
):VoidFunction
Defined in: src/Observable.ts:27
Observes specified event
Parameters
handlers
EventRegistryObject
<GroupEvents
>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
VoidFunction
disposer
Alias
on
Inherited from
once()
Call Signature
once<
K
,E
>(eventName
,handler
):VoidFunction
Defined in: src/Observable.ts:62
Observes specified event once
Type Parameters
• K extends keyof GroupEvents
• E extends TPointerEventInfo
| TPointerEventInfo
& object
| TPointerEventInfo
<WheelEvent
> | TPointerEventInfo
& InEvent
| TPointerEventInfo
& OutEvent
| Partial
<TEvent
> & object
| Partial
<TEvent
> & object
| { target
: Canvas
| Group
| StaticCanvas
; } | { target
: Canvas
| Group
| StaticCanvas
; } | { path
: FabricObject
; } | TEventWithTarget
<DragEvent
> | DragEventData
| DragEventData
& InEvent
| DragEventData
& OutEvent
| DropEventData
| SimpleEventHandler
<Event
> | BasicTransformEvent
| BasicTransformEvent
& ModifyPathEvent
| ModifiedEvent
| { target
: FabricObject
; } | { target
: FabricObject
; } | LayoutBeforeEvent
| LayoutAfterEvent
Parameters
eventName
K
Event name (eg. ‘after:render’)
handler
TEventCallback
<E
>
Function that receives a notification when an event of the specified type occurs
Returns
VoidFunction
disposer
Alias
once
Inherited from
Call Signature
once(
handlers
):VoidFunction
Defined in: src/Observable.ts:66
Observes specified event once
Parameters
handlers
EventRegistryObject
<GroupEvents
>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
VoidFunction
disposer
Alias
once
Inherited from
onDeselect()
onDeselect():
boolean
Defined in: src/shapes/ActiveSelection.ts:198
remove all objects
Returns
boolean
Overrides
onDragStart()
onDragStart(
_e
):boolean
Defined in: src/shapes/Object/InteractiveObject.ts:691
Override to customize Drag behavior
Fired once a drag session has started
Parameters
_e
DragEvent
Returns
boolean
true to handle the drag event
Inherited from
onSelect()
onSelect(
_options
?):boolean
Defined in: src/shapes/Object/InteractiveObject.ts:672
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
Parameters
_options?
options sent from the upper functions
e
event if the process is generated by an event
Returns
boolean
Inherited from
remove()
remove(…
objects
):FabricObject
[]
Defined in: src/shapes/Group.ts:252
Remove objects
Parameters
objects
…FabricObject
[]
Returns
removed objects
Inherited from
removeAll()
removeAll():
FabricObject
[]
Defined in: src/shapes/Group.ts:319
Remove all objects
Returns
removed objects
Inherited from
render()
render(
ctx
):void
Defined in: src/shapes/Group.ts:539
Renders instance on a given context
Parameters
ctx
CanvasRenderingContext2D
context to render instance on
Returns
void
Inherited from
renderCache()
renderCache(
this
,options
?):void
Defined in: src/shapes/Object/Object.ts:695
Parameters
this
TCachedFabricObject
<BaseFabricObject
>
options?
any
Returns
void
Inherited from
renderDragSourceEffect()
renderDragSourceEffect(
_e
):void
Defined in: src/shapes/Object/InteractiveObject.ts:712
Override to customize drag and drop behavior render a specific effect when an object is the source of a drag event example: render the selection status for the part of text that is being dragged from a text object
Parameters
_e
DragEvent
Returns
void
Inherited from
renderDropTargetEffect()
renderDropTargetEffect(
_e
):void
Defined in: src/shapes/Object/InteractiveObject.ts:724
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
Parameters
_e
DragEvent
Returns
void
Inherited from
rotate()
rotate(
angle
):void
Defined in: src/shapes/Object/Object.ts:1436
Sets “angle” of an instance with centered rotation
Parameters
angle
Angle value (in degrees)
Returns
void
Inherited from
scale()
scale(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:370
Scales an object (equally by x and y)
Parameters
value
number
Scale factor
Returns
void
Inherited from
scaleToHeight()
scaleToHeight(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:393
Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
Parameters
value
number
New height value
Returns
void
Inherited from
scaleToWidth()
scaleToWidth(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:381
Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
Parameters
value
number
New width value
Returns
void
Inherited from
sendObjectBackwards()
sendObjectBackwards(
object
,intersecting
?):boolean
Defined in: src/Collection.ts:214
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.
Parameters
object
Object to send
intersecting?
boolean
If true
, send object behind next lower intersecting object
Returns
boolean
true if change occurred
Inherited from
sendObjectToBack()
sendObjectToBack(
object
):boolean
Defined in: src/Collection.ts:178
Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects
Parameters
object
Object to send to back
Returns
boolean
true if change occurred
Inherited from
set()
set(
key
,value
?):ActiveSelection
Defined in: src/CommonMethods.ts:29
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()
.
Parameters
key
Property name or object (if object, iterate over the object properties)
string
| Record
<string
, any
>
value?
any
Property value (if function, the value is passed into it and its return value is used as a new one)
Returns
Inherited from
setControlsVisibility()
setControlsVisibility(
options
?):void
Defined in: src/shapes/Object/InteractiveObject.ts:611
Sets the visibility state of object controls, this is just a bulk option for setControlVisible;
Parameters
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
Returns
void
Inherited from
setControlVisible()
setControlVisible(
controlKey
,visible
):void
Defined in: src/shapes/Object/InteractiveObject.ts:599
Sets the visibility of the specified control. please do not use.
Parameters
controlKey
string
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.
visible
boolean
true to set the specified control visible, false otherwise
Returns
void
Todo
discuss this overlap of priority here with the team. Andrea Bogazzi for details
Inherited from
setCoords()
setCoords():
void
Defined in: src/shapes/Group.ts:521
Returns
void
Inherited from
setOnGroup()
setOnGroup():
void
Defined in: src/shapes/Object/Object.ts:1468
This callback function is called by the parent group of an object every time a non-delegated property changes on the group. It is passed the key and value as parameters. Not adding in this function’s signature to avoid Travis build error about unused variables.
Returns
void
Inherited from
setPositionByOrigin()
setPositionByOrigin(
pos
,originX
,originY
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:777
Sets the position of the object taking into consideration the object’s origin
Parameters
pos
The new position of the object
originX
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
void
Inherited from
setRelativeX()
setRelativeX(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:123
Parameters
value
number
x position according to object’s originX property in parent’s coordinate plane
if parent is canvas then this method is identical to setX
Returns
void
Inherited from
setRelativeXY()
setRelativeXY(
point
,originX
?,originY
?):void
Defined in: src/shapes/Object/ObjectGeometry.ts:186
As setXY, but in current parent’s coordinate plane (the current group if any or the canvas)
Parameters
point
position according to object’s originX originY properties in parent’s coordinate plane
originX?
TOriginX
= ...
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY?
TOriginY
= ...
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
void
Inherited from
setRelativeY()
setRelativeY(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:139
Parameters
value
number
y position according to object’s originY property in parent’s coordinate plane
if parent is canvas then this property is identical to setY
Returns
void
Inherited from
setX()
setX(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:93
Parameters
value
number
x position according to object’s originX property in canvas coordinate plane
Returns
void
Inherited from
setXY()
setXY(
point
,originX
?,originY
?):void
Defined in: src/shapes/Object/ObjectGeometry.ts:163
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.
Parameters
point
position in scene coordinate plane
originX?
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY?
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
void
Example
Inherited from
setY()
setY(
value
):void
Defined in: src/shapes/Object/ObjectGeometry.ts:107
Parameters
value
number
y position according to object’s originY property in canvas coordinate plane
Returns
void
Inherited from
shouldCache()
shouldCache():
boolean
Defined in: src/shapes/ActiveSelection.ts:219
Decide if the object should cache or not. Create its own cache level objectCaching is a global flag, wins over everything 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 outside is cached.
Returns
boolean
Overrides
shouldStartDragging()
shouldStartDragging(
_e
):boolean
Defined in: src/shapes/Object/InteractiveObject.ts:682
Override to customize Drag behavior Fired from Canvas#_onMouseMove
Parameters
_e
Returns
boolean
true in order for the window to start a drag session
Inherited from
size()
size():
number
Defined in: src/Collection.ts:136
Returns a size of a collection (i.e: length of an array containing its objects)
Returns
number
Collection size
Inherited from
strokeBorders()
strokeBorders(
ctx
,size
):void
Defined in: src/shapes/Object/InteractiveObject.ts:399
override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style.
Parameters
ctx
CanvasRenderingContext2D
ctx is rotated and translated so that (0,0) is at object’s center
size
the control box size used
Returns
void
Inherited from
toCanvasElement()
toCanvasElement(
options
):HTMLCanvasElement
Defined in: src/shapes/Object/Object.ts:1299
Converts an object into a HTMLCanvas element
Parameters
options
ObjectToCanvasElementOptions
= {}
Options object
Returns
HTMLCanvasElement
Returns DOM element
Inherited from
toClipPathSVG()
toClipPathSVG(
reviver
?):string
Defined in: src/shapes/Group.ts:666
Returns svg clipPath representation of an instance
Parameters
reviver?
Method for further parsing of svg representation.
Returns
string
svg representation of an instance
Inherited from
toDatalessObject()
toDatalessObject(
propertiesToInclude
?):any
Defined in: src/shapes/Object/Object.ts:1843
Returns (dataless) object representation of an instance
Parameters
propertiesToInclude?
any
[]
Any properties that you might want to additionally include in the output
Returns
any
Object representation of an instance
Inherited from
toDataURL()
toDataURL(
options
):string
Defined in: src/shapes/Object/Object.ts:1395
Converts an object into a data-url-like string
Parameters
options
toDataURLOptions
= {}
Options object
Returns
string
Returns a data: URL containing a representation of the object in the format specified by options.format
Inherited from
toggle()
toggle(
property
):ActiveSelection
Defined in: src/CommonMethods.ts:46
Toggles specified property from true
to false
or from false
to true
Parameters
property
string
Property to toggle
Returns
Inherited from
toJSON()
toJSON():
any
Defined in: src/shapes/Object/Object.ts:1427
Returns a JSON representation of an instance
Returns
any
JSON
Inherited from
toObject()
toObject<
T
,K
>(propertiesToInclude
?):Pick
<T
,K
> &SerializedGroupProps
Defined in: src/shapes/Group.ts:576
Returns object representation of an instance
Type Parameters
• T extends Omit
<GroupProps
& TClassProperties
<ActiveSelection
>, keyof SerializedGroupProps
>
• K extends string
| number
| symbol
= never
Parameters
propertiesToInclude?
K
[] = []
Any properties that you might want to additionally include in the output
Returns
Pick
<T
, K
> & SerializedGroupProps
object representation of an instance
Inherited from
toString()
toString():
string
Defined in: src/shapes/ActiveSelection.ts:207
Returns string representation of a group
Returns
string
Overrides
toSVG()
toSVG(
this
,reviver
?):string
Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:129
Returns svg representation of an instance
Parameters
this
FabricObjectSVGExportMixin
& FabricObject
reviver?
Method for further parsing of svg representation.
Returns
string
svg representation of an instance
Inherited from
transform()
transform(
ctx
):void
Defined in: src/shapes/Object/Object.ts:527
Transforms context when rendering an object
Parameters
ctx
CanvasRenderingContext2D
Context
Returns
void
Inherited from
transformMatrixKey()
transformMatrixKey(
skipGroup
):number
[]
Defined in: src/shapes/Object/ObjectGeometry.ts:453
Parameters
skipGroup
boolean
= false
Returns
number
[]
Inherited from
translateToCenterPoint()
translateToCenterPoint(
point
,originX
,originY
):Point
Defined in: src/shapes/Object/ObjectGeometry.ts:682
Translates the coordinates from origin to center coordinates (based on the object’s dimensions)
Parameters
point
The point which corresponds to the originX and originY params
originX
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
translateToGivenOrigin()
translateToGivenOrigin(
point
,fromOriginX
,fromOriginY
,toOriginX
,toOriginY
):Point
Defined in: src/shapes/Object/ObjectGeometry.ts:654
Translates the coordinates from a set of origin to another (based on the object’s dimensions)
Parameters
point
The point which corresponds to the originX and originY params
fromOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
fromOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
toOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
toOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
translateToOriginPoint()
translateToOriginPoint(
center
,originX
,originY
):Point
Defined in: src/shapes/Object/ObjectGeometry.ts:710
Translates the coordinates from center to origin coordinates (based on the object’s dimensions)
Parameters
center
The point which corresponds to center of the object
originX
Horizontal origin: ‘left’, ‘center’ or ‘right’
originY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
triggerLayout()
triggerLayout(
options
):void
Defined in: src/shapes/Group.ts:527
Parameters
options
Returns
void
Inherited from
willDrawShadow()
willDrawShadow():
boolean
Defined in: src/shapes/Group.ts:472
Check if this object or a child object will cast a shadow
Returns
boolean
Inherited from
_fromObject()
static
_fromObject<S
>(__namedParameters
,__namedParameters
):Promise
<S
>
Defined in: src/shapes/Object/Object.ts:1896
Type Parameters
• S extends BaseFabricObject
Parameters
__namedParameters
Record
<string
, unknown
>
__namedParameters
Abortable
& object
= {}
Returns
Promise
<S
>
Inherited from
createControls()
static
createControls():object
Defined in: src/shapes/Object/InteractiveObject.ts:167
Creates the default control object. If you prefer to have on instance of controls shared among all objects make this function return an empty object and add controls to the ownDefaults
Returns
object
controls
controls:
Record
<string
,Control
>
Inherited from
getDefaults()
static
getDefaults():Record
<string
,any
>
Defined in: src/shapes/ActiveSelection.ts:41
Returns
Record
<string
, any
>