BaseFabricObject
Root object class from which all 2d shape classes inherit from
Tutorial
http://fabricjs.com/fabric-intro-part-1#objects
Fires
added
Fires
removed
Fires
selected
Fires
deselected
Fires
rotating
Fires
scaling
Fires
moving
Fires
skewing
Fires
modified
Fires
mousedown
Fires
mouseup
Fires
mouseover
Fires
mouseout
Fires
mousewheel
Fires
mousedblclick
Fires
dragover
Fires
dragenter
Fires
dragleave
Fires
drop
Extends
ObjectGeometry<EventSpec>
Extended by
Type Parameters
• Props extends TOptions<ObjectProps> = Partial<ObjectProps>
• SProps extends SerializedObjectProps = SerializedObjectProps
• EventSpec extends ObjectEvents = ObjectEvents
Implements
ObjectProps
Constructors
new BaseFabricObject()
new BaseFabricObject<
Props,SProps,EventSpec>(options?):BaseFabricObject<Props,SProps,EventSpec>
Constructor
Parameters
• options?: Props
Options object
Returns
BaseFabricObject<Props, SProps, EventSpec>
Overrides
ObjectGeometry<EventSpec>.constructor
Defined in
src/shapes/Object/Object.ts:369
Properties
aCoords
aCoords:
TCornerPoint
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
ObjectGeometry.aCoords
Defined in
src/shapes/Object/ObjectGeometry.ts:63
absolutePositioned
absolutePositioned:
boolean
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
falseImplementation of
ObjectProps.absolutePositioned
Defined in
src/shapes/Object/Object.ts:214
angle
angle:
TDegree
Angle of rotation of an object (in degrees)
Default
0Implementation of
ObjectProps.angle
Inherited from
ObjectGeometry.angle
Defined in
src/shapes/Object/ObjectGeometry.ts:581
backgroundColor
backgroundColor:
string
Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
Default
Implementation of
ObjectProps.backgroundColor
Defined in
src/shapes/Object/Object.ts:201
centeredRotation
centeredRotation:
boolean
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
Implementation of
ObjectProps.centeredRotation
Defined in
src/shapes/Object/Object.ts:215
centeredScaling
centeredScaling:
boolean
When true, this object will use center point as the origin of transformation when being scaled via the controls.
Since
1.3.4
Default
Implementation of
ObjectProps.centeredScaling
Defined in
src/shapes/Object/Object.ts:216
clipPath?
optionalclipPath:BaseFabricObject<Partial<ObjectProps>,SerializedObjectProps,ObjectEvents>
Implementation of
ObjectProps.clipPath
Defined in
src/shapes/Object/Object.ts:212
dirty
dirty:
boolean
When set to true, object’s cache will be rerendered next render call.
since 1.7.0
Default
trueDefined in
src/shapes/Object/Object.ts:241
excludeFromExport
excludeFromExport:
boolean
When true, object is not exported in OBJECT/JSON
Since
1.6.3
Default
Implementation of
ObjectProps.excludeFromExport
Defined in
src/shapes/Object/Object.ts:208
fill
fill:
null|string|TFiller
Implementation of
ObjectProps.fill
Defined in
src/shapes/Object/Object.ts:191
fillRule
fillRule:
CanvasFillRule
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
nonzeroImplementation of
ObjectProps.fillRule
Defined in
src/shapes/Object/Object.ts:192
flipX
flipX:
boolean
When true, an object is rendered as flipped horizontally
Default
falseImplementation of
ObjectProps.flipX
Inherited from
ObjectGeometry.flipX
Defined in
src/shapes/Object/ObjectGeometry.ts:567
flipY
flipY:
boolean
When true, an object is rendered as flipped vertically
Default
falseImplementation of
ObjectProps.flipY
Inherited from
ObjectGeometry.flipY
Defined in
src/shapes/Object/ObjectGeometry.ts:568
globalCompositeOperation
globalCompositeOperation:
GlobalCompositeOperation
Composite rule used for canvas globalCompositeOperation
Default
Implementation of
ObjectProps.globalCompositeOperation
Defined in
src/shapes/Object/Object.ts:200
height
height:
number
Object height
Default
Implementation of
ObjectProps.height
Inherited from
ObjectGeometry.height
Defined in
src/shapes/Object/ObjectGeometry.ts:566
includeDefaultValues
includeDefaultValues:
boolean
When false, default object’s values are not included in its serialization
Default
Implementation of
ObjectProps.includeDefaultValues
Defined in
src/shapes/Object/Object.ts:207
inverted
inverted:
boolean
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
falseImplementation of
ObjectProps.inverted
Defined in
src/shapes/Object/Object.ts:213
left
left:
number
Left position of an object. Note that by default it’s relative to object left. You can change this by setting originX
Default
0Implementation of
ObjectProps.left
Inherited from
ObjectGeometry.left
Defined in
src/shapes/Object/ObjectGeometry.ts:564
matrixCache?
optionalmatrixCache:TMatrixCache
storage cache for object full transform matrix
Inherited from
ObjectGeometry.matrixCache
Defined in
src/shapes/Object/ObjectGeometry.ts:73
minScaleLimit
minScaleLimit:
number
Minimum allowed scale value of an object
Default
0Implementation of
ObjectProps.minScaleLimit
Defined in
src/shapes/Object/Object.ts:186
objectCaching
objectCaching:
boolean
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
trueImplementation of
ObjectProps.objectCaching
Defined in
src/shapes/Object/Object.ts:210
opacity
opacity:
number
Opacity of an object
Default
1Implementation of
ObjectProps.opacity
Defined in
src/shapes/Object/Object.ts:188
originX
originX:
TOriginX
Implementation of
ObjectProps.originX
Inherited from
ObjectGeometry.originX
Defined in
src/shapes/Object/ObjectGeometry.ts:576
originY
originY:
TOriginY
Implementation of
ObjectProps.originY
Inherited from
ObjectGeometry.originY
Defined in
src/shapes/Object/ObjectGeometry.ts:580
ownMatrixCache?
optionalownMatrixCache:TMatrixCache
storage cache for object transform matrix
Inherited from
ObjectGeometry.ownMatrixCache
Defined in
src/shapes/Object/ObjectGeometry.ts:68
padding
padding:
number
Padding between object and its controlling borders (in pixels)
Default
0Inherited from
ObjectGeometry.padding
Defined in
src/shapes/Object/ObjectGeometry.ts:53
paintFirst
paintFirst:
"fill"|"stroke"
Determines if the fill or the stroke is drawn first (one of “fill” or “stroke”)
Default
Implementation of
ObjectProps.paintFirst
Defined in
src/shapes/Object/Object.ts:190
parent?
optionalparent:Group
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
Defined in
src/shapes/Object/Object.ts:1595
scaleX
scaleX:
number
Object scale factor (horizontal)
Default
1Implementation of
ObjectProps.scaleX
Inherited from
ObjectGeometry.scaleX
Defined in
src/shapes/Object/ObjectGeometry.ts:569
scaleY
scaleY:
number
Object scale factor (vertical)
Default
1Implementation of
ObjectProps.scaleY
Inherited from
ObjectGeometry.scaleY
Defined in
src/shapes/Object/ObjectGeometry.ts:570
shadow
shadow:
null|Shadow
Implementation of
ObjectProps.shadow
Defined in
src/shapes/Object/Object.ts:203
skewX
skewX:
number
Angle of skew on x axes of an object (in degrees)
Default
0Implementation of
ObjectProps.skewX
Inherited from
ObjectGeometry.skewX
Defined in
src/shapes/Object/ObjectGeometry.ts:571
skewY
skewY:
number
Angle of skew on y axes of an object (in degrees)
Default
0Implementation of
ObjectProps.skewY
Inherited from
ObjectGeometry.skewY
Defined in
src/shapes/Object/ObjectGeometry.ts:572
stroke
stroke:
null|string|TFiller
Implementation of
ObjectProps.stroke
Defined in
src/shapes/Object/Object.ts:193
strokeDashArray
strokeDashArray:
null|number[]
Array specifying dash pattern of an object’s stroke (stroke must be defined)
Default
null;Implementation of
ObjectProps.strokeDashArray
Defined in
src/shapes/Object/Object.ts:194
strokeDashOffset
strokeDashOffset:
number
Line offset of an object’s stroke
Default
0Implementation of
ObjectProps.strokeDashOffset
Defined in
src/shapes/Object/Object.ts:195
strokeLineCap
strokeLineCap:
CanvasLineCap
Line endings style of an object’s stroke (one of “butt”, “round”, “square”)
Default
buttImplementation of
ObjectProps.strokeLineCap
Defined in
src/shapes/Object/Object.ts:196
strokeLineJoin
strokeLineJoin:
CanvasLineJoin
Corner style of an object’s stroke (one of “bevel”, “round”, “miter”)
Default
Implementation of
ObjectProps.strokeLineJoin
Defined in
src/shapes/Object/Object.ts:197
strokeMiterLimit
strokeMiterLimit:
number
Maximum miter length (used for strokeLineJoin = “miter”) of an object’s stroke
Default
4Implementation of
ObjectProps.strokeMiterLimit
Defined in
src/shapes/Object/Object.ts:198
strokeUniform
strokeUniform:
boolean
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
falseDefault
falseImplementation of
ObjectProps.strokeUniform
Inherited from
ObjectGeometry.strokeUniform
Defined in
src/shapes/Object/ObjectGeometry.ts:583
strokeWidth
strokeWidth:
number
Width of a stroke used to render this object
Default
1Implementation of
ObjectProps.strokeWidth
Inherited from
ObjectGeometry.strokeWidth
Defined in
src/shapes/Object/ObjectGeometry.ts:582
top
top:
number
Top position of an object. Note that by default it’s relative to object top. You can change this by setting originY
Default
0Implementation of
ObjectProps.top
Inherited from
ObjectGeometry.top
Defined in
src/shapes/Object/ObjectGeometry.ts:563
visible
visible:
boolean
When set to false, an object is not rendered on canvas
Default
Implementation of
ObjectProps.visible
Defined in
src/shapes/Object/Object.ts:205
width
width:
number
Object width
Default
Implementation of
ObjectProps.width
Inherited from
ObjectGeometry.width
Defined in
src/shapes/Object/ObjectGeometry.ts:565
cacheProperties
staticcacheProperties:string[]
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
Defined in
src/shapes/Object/Object.ts:233
colorProperties
staticcolorProperties:string[]
List of properties to consider for animating colors.
Defined in
src/shapes/Object/Object.ts:1502
customProperties
staticcustomProperties:string[] =[]
Define a list of custom properties that will be serialized when instance.toObject() gets called
Defined in
src/shapes/Object/Object.ts:1743
ownDefaults
staticownDefaults:Partial<TClassProperties<BaseFabricObject<Partial<ObjectProps>,SerializedObjectProps,ObjectEvents>>> =fabricObjectDefaultValues
Defined in
src/shapes/Object/Object.ts:326
stateProperties
staticstateProperties:string[]
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
Defined in
src/shapes/Object/Object.ts:224
type
statictype:string='FabricObject'
The class type. This is used for serialization and deserialization purposes and internally it can be used to identify classes. When we transform a class in a plain JS object we need a way to recognize which class it was, and the type is the way we do that. It has no other purposes and you should not give one. Hard to reach on instances and please do not use to drive instance’s logic (this.constructor.type). To idenfity a class use instanceof class ( instanceof Rect ). We do not do that in fabricJS code because we want to try to have code splitting possible.
Defined in
src/shapes/Object/Object.ts:342
Accessors
type
gettype():string
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
settype(value):void
Parameters
• value: string
Returns
string
Defined in
src/shapes/Object/Object.ts:353
Methods
_drawClipPath()
_drawClipPath(
ctx,clipPath,context):void
Prepare clipPath state and cache and draw it on instance’s cache
Parameters
• ctx: CanvasRenderingContext2D
• clipPath: undefined | BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>
• context: DrawContext
Returns
void
Defined in
src/shapes/Object/Object.ts:883
_limitCacheSize()
_limitCacheSize(
dims):any
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
Defined in
src/shapes/Object/Object.ts:402
_removeCacheCanvas()
_removeCacheCanvas():
void
Remove cacheCanvas and its dimensions from the objects
Returns
void
Defined in
src/shapes/Object/Object.ts:719
_setClippingProperties()
_setClippingProperties(
ctx):void
Parameters
• ctx: CanvasRenderingContext2D
Returns
void
Defined in
src/shapes/Object/Object.ts:1025
_setFillStyles()
_setFillStyles(
ctx,__namedParameters):void
Parameters
• ctx: CanvasRenderingContext2D
• __namedParameters: Pick<BaseFabricObject<Props, SProps, EventSpec>, "fill">
Returns
void
Defined in
src/shapes/Object/Object.ts:1014
_setStrokeStyles()
_setStrokeStyles(
ctx,decl):void
Parameters
• ctx: CanvasRenderingContext2D
• decl: Pick<BaseFabricObject<Props, SProps, EventSpec>, "stroke" | "strokeWidth" | "strokeDashOffset" | "strokeLineCap" | "strokeLineJoin" | "strokeMiterLimit">
Returns
void
Defined in
src/shapes/Object/Object.ts:972
_setupCompositeOperation()
_setupCompositeOperation(
ctx):void
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
Defined in
src/shapes/Object/Object.ts:1477
animate()
animate<
T>(animatable,options?):Record<string,TAnimation<T>>
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
Defined in
src/shapes/Object/Object.ts:1516
calcACoords()
calcACoords():
TCornerPoint
Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.
Returns
Inherited from
ObjectGeometry.calcACoords
Defined in
src/shapes/Object/ObjectGeometry.ts:427
calcOwnMatrix()
calcOwnMatrix():
TMat2D
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
ObjectGeometry.calcOwnMatrix
Defined in
src/shapes/Object/ObjectGeometry.ts:513
calcTransformMatrix()
calcTransformMatrix(
skipGroup?):TMat2D
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
ObjectGeometry.calcTransformMatrix
Defined in
src/shapes/Object/ObjectGeometry.ts:485
clone()
clone(
propertiesToInclude?):Promise<BaseFabricObject<Props,SProps,EventSpec>>
Clones an instance.
Parameters
• propertiesToInclude?: string[]
Any properties that you might want to additionally include in the output
Returns
Promise<BaseFabricObject<Props, SProps, EventSpec>>
Defined in
src/shapes/Object/Object.ts:1251
cloneAsImage()
cloneAsImage(
options?):FabricImage<Partial<ImageProps>,SerializedImageProps,ObjectEvents>
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
FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>
Object cloned as image.
Todo
fix the export type, it could not be Image but the type that getClass return for ‘image’.
Defined in
src/shapes/Object/Object.ts:1277
complexity()
complexity():
number
Returns complexity of an instance
Returns
number
complexity of this instance (is 1 unless subclassed)
Defined in
src/shapes/Object/Object.ts:1419
containsPoint()
containsPoint(
point):boolean
Checks if point is inside the object
Parameters
• point: Point
Point to check against
Returns
boolean
true if point is inside the object
Inherited from
ObjectGeometry.containsPoint
Defined in
src/shapes/Object/ObjectGeometry.ts:282
dispose()
dispose():
void
cancel instance’s running animations
override if necessary to dispose artifacts such as clipPath
Returns
void
Defined in
src/shapes/Object/Object.ts:1487
drawCacheOnCanvas()
drawCacheOnCanvas(
this,ctx):void
Paint the cached copy of the object on the target context.
Parameters
• this: TCachedFabricObject<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>
• ctx: CanvasRenderingContext2D
Context to render on
Returns
void
Defined in
src/shapes/Object/Object.ts:905
drawClipPathOnCache()
drawClipPathOnCache(
ctx,clipPath,canvasWithClipPath):void
Execute the drawing operation for an object clipPath
Parameters
• ctx: CanvasRenderingContext2D
Context to render on
• clipPath: BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>
• canvasWithClipPath: HTMLCanvasElement
Returns
void
Defined in
src/shapes/Object/Object.ts:810
drawObject()
drawObject(
ctx,forClipping,context):void
Execute the drawing operation for an object on a specified context
Parameters
• ctx: CanvasRenderingContext2D
Context to render on
• forClipping: undefined | boolean
apply clipping styles
• context: DrawContext
additional context for rendering
Returns
void
Defined in
src/shapes/Object/Object.ts:835
drawSelectionBackground()
drawSelectionBackground(
_ctx):void
Parameters
• _ctx: CanvasRenderingContext2D
Returns
void
Defined in
src/shapes/Object/Object.ts:691
findCommonAncestors()
findCommonAncestors<
T>(other):AncestryComparison
Compare ancestors
Type Parameters
• T extends BaseFabricObject<Props, SProps, EventSpec>
Parameters
• other: T
Returns
AncestryComparison
an object that represent the ancestry situation.
Defined in
src/shapes/Object/Object.ts:1634
fire()
fire<
K>(eventName,options?):void
Fires event with an optional options object
Type Parameters
• K extends string | number | symbol
Parameters
• eventName: K
Event name to fire
• options?: EventSpec[K]
Options object
Returns
void
Inherited from
ObjectGeometry.fire
Defined in
get()
get(
property):any
Basic getter
Parameters
• property: string
Property name
Returns
any
value of a property
Inherited from
ObjectGeometry.get
Defined in
getAncestors()
getAncestors():
Ancestors
Returns
Ancestors
ancestors (excluding ActiveSelection) from bottom to top
Defined in
src/shapes/Object/Object.ts:1617
getBoundingRect()
getBoundingRect():
TBBox
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
ObjectGeometry.getBoundingRect
Defined in
src/shapes/Object/ObjectGeometry.ts:343
getCanvasRetinaScaling()
getCanvasRetinaScaling():
number
Returns
number
Inherited from
ObjectGeometry.getCanvasRetinaScaling
Defined in
src/shapes/Object/ObjectGeometry.ts:400
getCenterPoint()
getCenterPoint():
Point
Returns the center coordinates of the object relative to canvas
Returns
Inherited from
ObjectGeometry.getCenterPoint
Defined in
src/shapes/Object/ObjectGeometry.ts:732
getCoords()
getCoords():
Point[]
Returns
Point[]
[tl, tr, br, bl] in the scene plane
Inherited from
ObjectGeometry.getCoords
Defined in
src/shapes/Object/ObjectGeometry.ts:204
getObjectOpacity()
getObjectOpacity():
number
Return the object opacity counting also the group property
Returns
number
Defined in
src/shapes/Object/Object.ts:570
getObjectScaling()
getObjectScaling():
Point
Return the object scale factor counting also the group scaling
Returns
Defined in
src/shapes/Object/Object.ts:539
getPointByOrigin()
getPointByOrigin(
originX,originY):Point
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: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• originY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
ObjectGeometry.getPointByOrigin
Defined in
src/shapes/Object/ObjectGeometry.ts:762
getRelativeCenterPoint()
getRelativeCenterPoint():
Point
Returns the center coordinates of the object relative to it’s parent
Returns
Inherited from
ObjectGeometry.getRelativeCenterPoint
Defined in
src/shapes/Object/ObjectGeometry.ts:743
getRelativeX()
getRelativeX():
number
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
ObjectGeometry.getRelativeX
Defined in
src/shapes/Object/ObjectGeometry.ts:115
getRelativeXY()
getRelativeXY():
Point
Returns
x,y position according to object’s originX originY properties in parent’s coordinate plane
Inherited from
ObjectGeometry.getRelativeXY
Defined in
src/shapes/Object/ObjectGeometry.ts:176
getRelativeY()
getRelativeY():
number
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
ObjectGeometry.getRelativeY
Defined in
src/shapes/Object/ObjectGeometry.ts:131
getScaledHeight()
getScaledHeight():
number
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
ObjectGeometry.getScaledHeight
Defined in
src/shapes/Object/ObjectGeometry.ts:361
getScaledWidth()
getScaledWidth():
number
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
ObjectGeometry.getScaledWidth
Defined in
src/shapes/Object/ObjectGeometry.ts:352
getTotalAngle()
getTotalAngle():
TDegree
Returns the object angle relative to canvas counting also the group property
Returns
Inherited from
ObjectGeometry.getTotalAngle
Defined in
src/shapes/Object/ObjectGeometry.ts:408
getTotalObjectScaling()
getTotalObjectScaling():
Point
Return the object scale factor counting also the group scaling, zoom and retina
Returns
object with scaleX and scaleY properties
Defined in
src/shapes/Object/Object.ts:556
getViewportTransform()
getViewportTransform():
TMat2D
Retrieves viewportTransform from Object’s canvas if available
Returns
Inherited from
ObjectGeometry.getViewportTransform
Defined in
src/shapes/Object/ObjectGeometry.ts:418
getX()
getX():
number
Returns
number
x position according to object’s originX property in canvas coordinate plane
Inherited from
ObjectGeometry.getX
Defined in
src/shapes/Object/ObjectGeometry.ts:86
getXY()
getXY():
Point
Returns
x position according to object’s originX originY properties in canvas coordinate plane
Inherited from
ObjectGeometry.getXY
Defined in
src/shapes/Object/ObjectGeometry.ts:146
getY()
getY():
number
Returns
number
y position according to object’s originY property in canvas coordinate plane
Inherited from
ObjectGeometry.getY
Defined in
src/shapes/Object/ObjectGeometry.ts:100
hasCommonAncestors()
hasCommonAncestors<
T>(other):boolean
Type Parameters
• T extends BaseFabricObject<Props, SProps, EventSpec>
Parameters
• other: T
Returns
boolean
Defined in
src/shapes/Object/Object.ts:1699
hasFill()
hasFill():
null|boolean|""
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
Defined in
src/shapes/Object/Object.ts:750
hasStroke()
hasStroke():
null|boolean|""
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
Defined in
src/shapes/Object/Object.ts:734
intersectsWithObject()
intersectsWithObject(
other):boolean
Checks if object intersects with another object
Parameters
• other: ObjectGeometry<ObjectEvents>
Object to test
Returns
boolean
true if object intersects with another object
Inherited from
ObjectGeometry.intersectsWithObject
Defined in
src/shapes/Object/ObjectGeometry.ts:232
intersectsWithRect()
intersectsWithRect(
tl,br):boolean
Checks if object intersects with the scene rect formed by tl and br
Parameters
• tl: Point
• br: Point
Returns
boolean
Inherited from
ObjectGeometry.intersectsWithRect
Defined in
src/shapes/Object/ObjectGeometry.ts:218
isCacheDirty()
isCacheDirty(
skipCanvas):boolean
Check if cache is dirty
Parameters
• skipCanvas: boolean = false
skip canvas checks because this object is painted on parent canvas.
Returns
boolean
Defined in
src/shapes/Object/Object.ts:919
isContainedWithinObject()
isContainedWithinObject(
other):boolean
Checks if object is fully contained within area of another object
Parameters
• other: ObjectGeometry<ObjectEvents>
Object to test
Returns
boolean
true if object is fully contained within area of another object
Inherited from
ObjectGeometry.isContainedWithinObject
Defined in
src/shapes/Object/ObjectGeometry.ts:251
isContainedWithinRect()
isContainedWithinRect(
tl,br):boolean
Checks if object is fully contained within the scene rect formed by tl and br
Parameters
• tl: Point
• br: Point
Returns
boolean
Inherited from
ObjectGeometry.isContainedWithinRect
Defined in
src/shapes/Object/ObjectGeometry.ts:259
isDescendantOf()
isDescendantOf(
target):boolean
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
Defined in
src/shapes/Object/Object.ts:1603
isInFrontOf()
isInFrontOf<
T>(other):undefined|boolean
Type Parameters
• T extends BaseFabricObject<Props, SProps, EventSpec>
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
Defined in
src/shapes/Object/Object.ts:1709
isNotVisible()
isNotVisible():
boolean
Returns
boolean
Defined in
src/shapes/Object/Object.ts:649
isOnScreen()
isOnScreen():
boolean
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
ObjectGeometry.isOnScreen
Defined in
src/shapes/Object/ObjectGeometry.ts:291
isOverlapping()
isOverlapping<
T>(other):boolean
Type Parameters
• T extends ObjectGeometry<ObjectEvents>
Parameters
• other: T
Returns
boolean
Inherited from
ObjectGeometry.isOverlapping
Defined in
src/shapes/Object/ObjectGeometry.ts:269
isPartiallyOnScreen()
isPartiallyOnScreen():
boolean
Checks if object is partially contained within the canvas with current viewportTransform
Returns
boolean
true if object is partially contained within canvas
Inherited from
ObjectGeometry.isPartiallyOnScreen
Defined in
src/shapes/Object/ObjectGeometry.ts:321
isType()
isType(…
types):boolean
Returns true if any of the specified types is identical to the type of an instance
Parameters
• …types: string[]
Returns
boolean
Defined in
src/shapes/Object/Object.ts:1408
needsItsOwnCache()
needsItsOwnCache():
boolean
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
Defined in
src/shapes/Object/Object.ts:762
off()
off(eventName)
off<
K>(eventName):void
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 string | number | symbol
Parameters
• eventName: K
event name (eg. ‘after:render’)
Returns
void
Inherited from
ObjectGeometry.off
Defined in
off(eventName, handler)
off<
K>(eventName,handler):void
unsubscribe an event listener
Type Parameters
• K extends string | number | symbol
Parameters
• eventName: K
event name (eg. ‘after:render’)
• handler: TEventCallback<any>
event listener to unsubscribe
Returns
void
Inherited from
ObjectGeometry.off
Defined in
off(handlers)
off(
handlers):void
unsubscribe event listeners
Parameters
• handlers: EventRegistryObject<EventSpec>
handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
void
Inherited from
ObjectGeometry.off
Defined in
off()
off():
void
unsubscribe all event listeners
Returns
void
Inherited from
ObjectGeometry.off
Defined in
on()
on(eventName, handler)
on<
K,E>(eventName,handler):VoidFunction
Observes specified event
Type Parameters
• K extends string | number | symbol
• E
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
ObjectGeometry.on
Defined in
on(handlers)
on(
handlers):VoidFunction
Parameters
• handlers: EventRegistryObject<EventSpec>
Returns
VoidFunction
Inherited from
ObjectGeometry.on
Defined in
once()
once(eventName, handler)
once<
K,E>(eventName,handler):VoidFunction
Observes specified event once
Type Parameters
• K extends string | number | symbol
• E
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
ObjectGeometry.once
Defined in
once(handlers)
once(
handlers):VoidFunction
Parameters
• handlers: EventRegistryObject<EventSpec>
Returns
VoidFunction
Inherited from
ObjectGeometry.once
Defined in
render()
render(
ctx):void
Renders an object on a specified context
Parameters
• ctx: CanvasRenderingContext2D
Context to render on
Returns
void
Defined in
src/shapes/Object/Object.ts:661
renderCache()
renderCache(
this,options?):void
Parameters
• this: TCachedFabricObject<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>
• options?: any
Returns
void
Defined in
src/shapes/Object/Object.ts:695
rotate()
rotate(
angle):void
Sets “angle” of an instance with centered rotation
Parameters
• angle: TDegree
Angle value (in degrees)
Returns
void
Defined in
src/shapes/Object/Object.ts:1436
scale()
scale(
value):void
Scales an object (equally by x and y)
Parameters
• value: number
Scale factor
Returns
void
Inherited from
ObjectGeometry.scale
Defined in
src/shapes/Object/ObjectGeometry.ts:370
scaleToHeight()
scaleToHeight(
value):void
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
ObjectGeometry.scaleToHeight
Defined in
src/shapes/Object/ObjectGeometry.ts:393
scaleToWidth()
scaleToWidth(
value):void
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
ObjectGeometry.scaleToWidth
Defined in
src/shapes/Object/ObjectGeometry.ts:381
set()
set(
key,value?):BaseFabricObject<Props,SProps,EventSpec>
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: string | Record<string, any>
Property name or object (if object, iterate over the object properties)
• value?: any
Property value (if function, the value is passed into it and its return value is used as a new one)
Returns
BaseFabricObject<Props, SProps, EventSpec>
Inherited from
ObjectGeometry.set
Defined in
setCoords()
setCoords():
void
Sets corner and controls position coordinates based on current angle, width and height, left and top. aCoords are used to quickly find an object on the canvas. See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabricjs.com/fabric-gotchas
Returns
void
Inherited from
ObjectGeometry.setCoords
Defined in
src/shapes/Object/ObjectGeometry.ts:449
setOnGroup()
setOnGroup():
void
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
Defined in
src/shapes/Object/Object.ts:1468
setPositionByOrigin()
setPositionByOrigin(
pos,originX,originY):void
Sets the position of the object taking into consideration the object’s origin
Parameters
• pos: Point
The new position of the object
• originX: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• originY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
void
Inherited from
ObjectGeometry.setPositionByOrigin
Defined in
src/shapes/Object/ObjectGeometry.ts:777
setRelativeX()
setRelativeX(
value):void
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
ObjectGeometry.setRelativeX
Defined in
src/shapes/Object/ObjectGeometry.ts:123
setRelativeXY()
setRelativeXY(
point,originX?,originY?):void
As setXY, but in current parent’s coordinate plane (the current group if any or the canvas)
Parameters
• point: 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
ObjectGeometry.setRelativeXY
Defined in
src/shapes/Object/ObjectGeometry.ts:186
setRelativeY()
setRelativeY(
value):void
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
ObjectGeometry.setRelativeY
Defined in
src/shapes/Object/ObjectGeometry.ts:139
setX()
setX(
value):void
Parameters
• value: number
x position according to object’s originX property in canvas coordinate plane
Returns
void
Inherited from
ObjectGeometry.setX
Defined in
src/shapes/Object/ObjectGeometry.ts:93
setXY()
setXY(
point,originX?,originY?):void
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: Point
position in scene coordinate plane
• originX?: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• originY?: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
void
Example
object.setXY(new Point(5, 5), 'left', 'bottom').Inherited from
ObjectGeometry.setXY
Defined in
src/shapes/Object/ObjectGeometry.ts:163
setY()
setY(
value):void
Parameters
• value: number
y position according to object’s originY property in canvas coordinate plane
Returns
void
Inherited from
ObjectGeometry.setY
Defined in
src/shapes/Object/ObjectGeometry.ts:107
shouldCache()
shouldCache():
boolean
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. Read as: cache if is needed, or if the feature is enabled but we are not already caching.
Returns
boolean
Defined in
src/shapes/Object/Object.ts:786
toCanvasElement()
toCanvasElement(
options):HTMLCanvasElement
Converts an object into a HTMLCanvas element
Parameters
• options: ObjectToCanvasElementOptions = {}
Options object
Returns
HTMLCanvasElement
Returns DOM element
Defined in
src/shapes/Object/Object.ts:1299
toDataURL()
toDataURL(
options):string
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
Defined in
src/shapes/Object/Object.ts:1395
toDatalessObject()
toDatalessObject(
propertiesToInclude?):any
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
Defined in
src/shapes/Object/Object.ts:1843
toJSON()
toJSON():
any
Returns a JSON representation of an instance
Returns
any
JSON
Defined in
src/shapes/Object/Object.ts:1427
toObject()
toObject(
propertiesToInclude?):any
Returns an 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
Defined in
src/shapes/Object/Object.ts:1750
toString()
toString():
string
Returns a string representation of an instance
Returns
string
Defined in
src/shapes/Object/Object.ts:1883
toggle()
toggle(
property):BaseFabricObject<Props,SProps,EventSpec>
Toggles specified property from true to false or from false to true
Parameters
• property: string
Property to toggle
Returns
BaseFabricObject<Props, SProps, EventSpec>
Inherited from
ObjectGeometry.toggle
Defined in
transform()
transform(
ctx):void
Transforms context when rendering an object
Parameters
• ctx: CanvasRenderingContext2D
Context
Returns
void
Defined in
src/shapes/Object/Object.ts:527
transformMatrixKey()
transformMatrixKey(
skipGroup):number[]
Parameters
• skipGroup: boolean = false
Returns
number[]
Inherited from
ObjectGeometry.transformMatrixKey
Defined in
src/shapes/Object/ObjectGeometry.ts:453
translateToCenterPoint()
translateToCenterPoint(
point,originX,originY):Point
Translates the coordinates from origin to center coordinates (based on the object’s dimensions)
Parameters
• point: Point
The point which corresponds to the originX and originY params
• originX: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• originY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
ObjectGeometry.translateToCenterPoint
Defined in
src/shapes/Object/ObjectGeometry.ts:682
translateToGivenOrigin()
translateToGivenOrigin(
point,fromOriginX,fromOriginY,toOriginX,toOriginY):Point
Translates the coordinates from a set of origin to another (based on the object’s dimensions)
Parameters
• point: Point
The point which corresponds to the originX and originY params
• fromOriginX: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• fromOriginY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
• toOriginX: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• toOriginY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
ObjectGeometry.translateToGivenOrigin
Defined in
src/shapes/Object/ObjectGeometry.ts:654
translateToOriginPoint()
translateToOriginPoint(
center,originX,originY):Point
Translates the coordinates from center to origin coordinates (based on the object’s dimensions)
Parameters
• center: Point
The point which corresponds to center of the object
• originX: TOriginX
Horizontal origin: ‘left’, ‘center’ or ‘right’
• originY: TOriginY
Vertical origin: ‘top’, ‘center’ or ‘bottom’
Returns
Inherited from
ObjectGeometry.translateToOriginPoint
Defined in
src/shapes/Object/ObjectGeometry.ts:710
willDrawShadow()
willDrawShadow():
boolean
Check if this object will cast a shadow with an offset. used by Group.shouldCache to know if child has a shadow recursively
Returns
boolean
Defined in
src/shapes/Object/Object.ts:799
_fromObject()
static_fromObject<S>(__namedParameters,__namedParameters):Promise<S>
Type Parameters
• S extends BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>
Parameters
• __namedParameters: Record<string, unknown>
• __namedParameters: Abortable & object = {}
Returns
Promise<S>
Defined in
src/shapes/Object/Object.ts:1896
fromObject()
staticfromObject<T>(object,options?):Promise<BaseFabricObject<Partial<ObjectProps>,SerializedObjectProps,ObjectEvents>>
Type Parameters
• T extends TOptions<SerializedObjectProps>
Parameters
• object: T
• options?: Abortable
Returns
Promise<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>
Defined in
src/shapes/Object/Object.ts:1925
getDefaults()
staticgetDefaults():Record<string,any>
Returns
Record<string, any>