Constructor
Text string
Optional options: PropsOptions object
Private Readonly CACHE_use this size when measuring text. To avoid IE11 rounding errors
@readonly
@private
contains the min text width to avoid getting 0
Protected __charcontains characters bounding boxes This variable is considered to be protected. But for how mixins are implemented right now, we can't leave it private
Optional __cornerkeeps the value of the last hovered corner during mouse move. 0 is no corner, or 'mt', 'ml', 'mtr' etc.. It should be private, but there is no harm in using it as a read-only property. this isn't cleaned automatically. Non selected objects may have wrong values
Optional __owningA reference to the parent of the object
Used to keep the original parent ref when the object has been added to an ActiveSelection, hence loosing the group ref
Protected __selectionOptional Private _cacheA reference to the HTMLCanvasElement that is used to contain the cache of the object this canvas element is resized and cleared as needed Is marked private, you can read it, don't use it since it is handled by fabric since 1.7.0
undefined
@private
Private _cacheQuick access for the _cacheCanvas rendering context This is part of the objectCaching feature since 1.7.0
undefined
@private
a map of control visibility for this object. this was left when controls were introduced to not break the api too much this takes priority over the generic control visibility
Protected _currentPrivate _fontText Line proportion to font Size (in pixels)
Protected _forcePrivate _reProtected _rePrivate _reUse this regular expression to filter for whitespace that is not a new line. Mostly used when text is 'justify' aligned.
Private _reUse this regular expression to filter for whitespaces that is not a new line. Mostly used when text is 'justify' aligned.
Private _reUse this regular expression to filter consecutive groups of non spaces. Mostly used when text is 'justify' aligned.
Protected Optional _savedOptional defaultOptional moveOptional _scalingA boolean used from the gesture module to keep tracking of a scaling action when there is no scaling transform in place. This is an edge case and is used twice in all codebase. Probably added to keep track of some performance issues
use git blame to investigate why it was added DON'T USE IT. WE WILL TRY TO REMOVE IT
Protected _selectionsame as textlines, but each line is an array of graphemes as split by splitByGrapheme
Optional Private _transformPrivate. indicates if the object inside a group is on a transformed context or not or is part of a larger cache for many object ( a group for example)
undefined
@private
Describe object's corner position in canvas object absolute coordinates properties are tl,tr,bl,br and describe the four main corner. each property is an object with x, y, instance of Fabric.Point. The coordinates depends from this properties: width, height, scaleX, scaleY skewX, skewY, angle, strokeWidth, top, left. Those coordinates are useful to understand where an object is. They get updated with lineCoords or oCoords in interactive cases but they do not need to be updated when zoom or panning change. The coordinates get updated with
setCoords. You can calculate them without updating with
calcACoords();
Optional Private cacheSize of the cache canvas, height since 1.7.0
undefined
@private
Optional Private cachezoom level used on the cacheCanvas to draw the cache, Y axe since 1.7.0
undefined
@private
Optional Private cachetranslation of the cacheCanvas away from the center, for subpixel accuracy and crispness since 1.7.0
undefined
@private
Optional Private cacheSize of the cache canvas, width since 1.7.0
undefined
@private
Indicates whether internal text char widths can be cached
Optional canvasadditional space between characters expressed in thousands of em unit
Optional clipOptional clipWhen an object is being exported as SVG as a clippath, a reference inside the SVG is needed. This reference is a UID in the fabric namespace and is temporary stored here.
List of properties to consider for animating colors.
holds the controls for the object. controls are added by default_controls.js
For functionalities on keyDown + ctrl || cmd
For functionalities on keyUp + ctrl || cmd
Color of text cursor color in editing mode. if not set (default) will take color from the text. if set to a color value that fabric can understand, it will be used instead of the color of the text at the current position.
Delay between cursor blink (in ms)
Duration of cursor fade in (in ms)
Protected cursorOptional left?: numberOptional top?: numberWidth of cursor (in px)
Baseline shift, styles only, keep at 0 for the main text object
WARNING: EXPERIMENTAL. NOT SUPPORTED YET determine the direction of the text. This has to be set manually together with textAlign and originX for proper experience. some interesting link for the future https://www.w3.org/International/questions/qa-bidi-unicode-controls
4.5.0
When set to true, object's cache will be rerendered next render call.
since 1.7.0
true
Protected draggableIndicates whether a text can be edited
Border color of text object while it's in editing mode
Font family
Font size (in pixels)
Font style . Possible values: "", "normal", "italic" or "oblique".
Font weight (e.g. bold, normal, 400, 600, 800)
Optional Private groupA reference to the parent of the object, usually a Group
undefined
@private
Optional hiddenDOM container to append the hiddenTextarea. An alternative to attaching to the document.body. Useful to reduce laggish redraw of the full document.body tree and also with modals event capturing that won't let the textarea take focus.
Protected inHelps determining when the text is in composition, so that the cursor rendering is altered.
Optional initializedIndicates whether text is in editing mode
Optional isinternal boolean to signal the code that the object is part of the move action.
For functionalities on keyDown Map a special key to a function of the instance/prototype If you need different behavior for ESC or TAB or arrows, you have to change this map setting the name of a function that you build on the IText or your prototype. the map change will affect all Instances unless you need for only some text Instances in that case you have to clone this object and assign your Instance. this.keysMap = Object.assign({}, this.keysMap); The function must be in IText.prototype.myFunction And will receive event as args[0]
Describe object's corner position in canvas element coordinates. includes padding. Used of object detection. set and refreshed with setCoords. Those could go away
investigate how to get rid of those
Line height
Text decoration linethrough.
Optional matrixstorage cache for object full transform matrix
Describe object's corner position in canvas element coordinates.
properties are depending on control keys and padding the main controls.
each property is an object with x, y and corner.
The corner property contains in a similar manner the 4 points of the
interactive area of the corner.
The coordinates depends from the controls positionHandler and are used
to draw and locate controls
Private offsetsText decoration overline.
Optional Private ownIndicate if the object is sitting on a cache dedicated to it or is part of a larger cache for many object ( a group for example)
undefined
@private
Optional ownstorage cache for object transform matrix
Optional pathPath that the text should follow. since 4.6.0 the path will be drawn automatically. if you want to make the path visible, give it a stroke and strokeWidth or fill value if you want it to be hidden, assign visible = false to the path. This feature is in BETA, and SVG import/export is not yet supported.
const textPath = new Text('Text on a path', {
top: 150,
left: 150,
textAlign: 'center',
charSpacing: -50,
path: new Path('M 0 0 C 50 -100 150 -100 200 0', {
strokeWidth: 1,
visible: false
}),
pathSide: 'left',
pathStartOffset: 0
});
How text is aligned to the path. This property determines the perpendicular position of each character relative to the path. (one of "baseline", "center", "ascender", "descender") This feature is in BETA, and its behavior may change
Which side of the path the text should be drawn on. Only used when text has a path
Offset amount for text path starting position Only used when text has a path
Protected selectedColor of text selection
Index where text selection ends
Index where text selection starts (or where cursor is when there is no selection)
Optional snapOptional snapSubscript schema object (minimum overlap)
baseline-shift factor (downwards)
0.11
fontSize factor
0.6
Superscript schema object (minimum overlap)
baseline-shift factor (upwards)
-0.35
fontSize factor
0.6
Text alignment. Possible values: "left", "center", "right", "justify", "justify-left", "justify-center" or "justify-right".
Background color of text lines
contains the the text of the object, divided in lines as they are displayed on screen. Wrapping will divide the text independently of line breaks
Text decoration underline.
Optional Private zoomXzoom level used on the cacheCanvas to draw the cache, X axe since 1.7.0
undefined
@private
Optional Private zoomYzoom level used on the cacheCanvas to draw the cache, Y axe since 1.7.0
undefined
@private
Static ATTRIBUTE_List of attribute names to account for when parsing SVG element (used by FabricText.fromElement)
Static _styleStatic cacheStatic genericStatic ownStatic stateThis 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
Static Protected textProperties that requires a text layout recalculation when changed
Static typePrivate __getPrivate _animatePrivate
Property to animate
Optional options: Partial<AnimationOptions<T>> = {}Options object
Private _animatePrivate
Optional delay?: numberOptional onPrivate _applyPrivate
This function try to patch the missing gradientTransform on canvas gradients. transforming a context to transform the gradient, is going to transform the stroke too. we want to transform the gradient but not the stroke operation, so we create a transformed gradient on a pattern and then we use the pattern instead of the gradient. this method has drawbacks: is slow, is in low resolution, needs a patch for when the size is limited.
Context to render on
Private _applyPrivate _applyPrivate
This function try to patch the missing gradientTransform on canvas gradients. transforming a context to transform the gradient, is going to transform the stroke too. we want to transform the gradient but not the stroke operation, so we create a transformed gradient on a pattern and then we use the pattern instead of the gradient. this method has drawbacks: is slow, is in low resolution, needs a patch for when the size is limited.
a fabric gradient instance
a pattern to use as fill/stroke style
Private _calcPrivate
style contains style for hiddenTextarea
Private _calculatePrivate _clearPrivate _constrainPrivate _createPrivate
Optional additionalOptional reviver?: TSVGReviverPrivate _createPrivate
Optional additionalOptional noOptional reviver?: TSVGReviverOptional withPrivate _createProtected _deletePrivate _deletePrivate _drawPrivate
Context to draw on
object to override the object style
Prepare clipPath state and cache and draw it on instance's cache
Optional clipPath: FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>Protected _exitruns the actual logic that exits from editing state, see exitEditing
Private _findPrivate _findPrivate
Determines which corner is under the mouse cursor, represented by pointer.
This function is return a corner only if the object is the active one.
This is done to avoid selecting corner of non active object and activating transformations
rather than drag action. The default behavior of fabricJS is that if you want to transform
an object, first you select it to show the control set
The pointer indicating the mouse position
indicates if we are looking for interaction area with a touch action
corner code (tl, tr, bl, br, etc.), or 0 if nothing is found.
Private _firePrivate _getPrivate
Return the dimension and the zoom level needed to create a cache canvas big enough to host the object to be cached.
.width width of canvas
Private _getPrivate _getPrivate
Returns cursor boundaries (left, top, leftOffset, topOffset) left/top are left/top of entire text box leftOffset/topOffset are offset from that left/top point of a text box
Optional index: number = ...index from start
Optional skipCaching: booleanPrivate _getPrivate
Caches and returns cursor left/top offset relative to instance's center point
index from start
Optional skipCaching: booleanreturn font declaration string for canvas context
Optional __namedParameters: Partial<Pick<Partial<CompleteTextStyleDeclaration>, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight">> = {}Optional forMeasuring: booleanfont declaration formatted for canvas context.
to be measured
index of the line where the char is
position in the line
Optional prevGrapheme: stringcharacter preceding the one to be measured
Optional skipLeft: booleangrapheme bbox
Private _getPrivate _getPrivate _getPrivate _getPrivate _getPrivate _getget the reference, not a clone, of the style object for a given character, if not style is set for a pre det
style object a REFERENCE to the existing one or a new empty object
Private _getPrivate _getPrivate _getLimit the cache dimensions so that X * Y do not cross config.perfLimitSizeTotal and each side do not cross fabric.cacheSideLimit those numbers are configurable so that you can get as much detail as you want making bargain with performances.
.width width of canvas
Private _measurePrivate
measure and return the width of a single character. possibly overridden to accommodate different measure logic or to hook some external lib for character measurement
style of char to be measured
Optional previousChar: stringprevious char
Optional prevCharStyle: CompleteTextStyleDeclaration | Record<string, never>style of previous char
measure every grapheme of a line, populating __charBounds
object.width total width of characters
Default event handler for the basic functionalities needed on _mouseDown can be overridden to do something different. Scope of this implementation is: find the click position, set selectionStart find selectionEnd, initialize the drawing of either cursor or selection area initializing a mousedDown on a text area will cancel fabricjs knowledge of current compositionMode. It will be set to false.
Default event handler for the basic functionalities needed on mousedown:before can be overridden to do something different. Scope of this implementation is: verify the object is already selected when mousing down
Private _movePrivate _movePrivate _movePrivate _removePrivate _removePrivate _removePrivate _renderPrivate _renderPrivate _renderPrivate _renderPrivate
fillText or strokeText.
Context to render on
Content of the line, splitted in an array by grapheme
Renders controls and borders for the object the context here is not transformed
Context to render on
Optional styleOverride: TStyleOverride = {}properties to override the object style
move to interactivity
Private _renderPrivate _renderPrivate _renderPrivate
Renders text selection
transformed context to draw on
Object with left/top/leftOffset/topOffset
Private _renderPrivate _renderPrivate _renderPrivate _renderPrivate _renderPrivate _renderPrivate
Method name ("fillText" or "strokeText")
Context to render on
Text to render
Left position of text
Top position of text
Index of a line in a text
Private _renderPrivate _renderPrivate _restorePrivate _savePrivate _setPrivate _setThis function prepare the canvas for a ill style, and fill need to be sent in as defined
with ill defined
Private _setPrivate
Calculate the angle and the left,top position of the char that follow a path. It appends it to graphemeInfo to be reused later at rendering
to be measured
current grapheme box information
Private _setPrivate _setPrivate _setPrivate _setProtected _setPrivate _setPrivate _setThis function prepare the canvas for a stroke style, and stroke and strokeWidth need to be sent in as defined
with stroke and strokeWidth defined
Private _setPrivate _setPrivate
Set the font parameter of the context with the object properties or with charStyle
Context to render on
Optional charStyle: anyobject with font style properties
Optional forMeasuring: booleanPrivate _splitReturns svg representation of an instance This function is implemented in each subclass This is just because typescript otherwise cryies all the time
Optional reviver: TSVGReviveran array of strings with the specific svg representation of the instance
Private _updatePrivate _updatePrivate _updateAnimates object's properties
map of keys and end values
Optional options: Partial<AnimationOptions<T>>map of animation contexts
As object — multiple properties
object.animate({ left: ..., top: ... }); object.animate({ left: ..., top: ... }, { duration: ... });
Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.
return the coordinate of the 4 corners of the bounding box in HTMLCanvasElement coordinates used for bounding box interactivity with the mouse
Calculates the coordinates of the center of each control plus the corners of the control itself This basically just delegates to each control positionHandler WARNING: changing what is passed to positionHandler is a breaking change, since position handler is a public api and should be done just if extremely necessary
Private calccalculate transform matrix that represents the current transformations from the object's properties.
Optional skipGroup: boolean = falsereturn transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.
transform matrix for the object
Check if characters in a text have a value for a property whose value matches the textbox's value for that property. If so, the character-level property is deleted. If the character has no other properties, then it is also deleted. Finally, if the line containing that character has no other characters then it also is deleted.
The property to compare between characters and text.
Clears the canvas.contextTop in a specific area that corresponds to the object's bounding box that is in the canvas.contextContainer. This function is used to clear pieces of contextTop where we render ephemeral effects on top of the object. Example: blinking cursor text selection, drag effects.
Optional restoreManually: booleanWhen true won't restore the context after clear, in order to draw something else.
canvas.contextTop that is either still transformed with the object transformMatrix, or restored to neutral transform
discuss swapping restoreManually with a renderCallback, but think of async issues
Creates an instance of Image out of an object makes use of toCanvasElement. Once this method was based on toDataUrl and loadImage, so it also had a quality and format option. toCanvasElement is faster and produce no loss of quality. If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. toCanvasElement and then toBlob from the obtained canvas is also a good option.
Optional options: anyfor clone as image, passed to toDataURL
Object cloned as image.
fix the export type, it could not be Image but the type that getClass return for 'image'.
Checks if point is inside the object
Point to check against
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of stored ones
true if point is inside the object
Default handler for double click, select a word
Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Context to draw on
object representing current object parameters
Optional styleOverride: TStyleOverrideobject to override the object style
Paint the cached copy of the object on the target context.
Context to render on
Execute the drawing operation for an object clipPath
Context to render on
Draws corners of an object's bounding box. Requires public properties: width, height Requires public options: cornerSize, padding
Context to draw on
object to override the object style
Draws lines from a borders of an object's bounding box to controls that have withConnection property set.
Requires public properties: width, height
Requires public options: padding, borderColor
Context to draw on
object size x = width, y = height
Draws a colored layer behind the object, inside its selection borders. Requires public options: padding, selectionBackgroundColor this function is called when the context is transformed has checks to be skipped when the object is on a staticCanvas
Context to draw on
evaluate if make this disappear in favor of a pre-render hook for objects this was added by Andrea Bogazzi to make possible some feature for work reasons it seemed a good option, now is an edge case
Enters editing state
Optional e: TPointerEventCompare ancestors
Optional strict: Sfinds only ancestors that are objects (without canvas)
an object that represent the ancestry situation.
Calls a function for each control. The function gets called, with the control, the control's key and the object that is calling the iterator
function to iterate over the controls over
convert from fabric to textarea values
convert from textarea to grapheme indexes
Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
Optional selectionStart: number = ...Optional index. When not given, current selectionStart is used.
Optional skipWrapping: booleanconsider the location for unwrapped lines. useful to manage styles.
Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.
Optional absolute: booleanuse coordinates without viewportTransform
Optional calculate: booleanuse coordinates of current position instead of .lineCoords / .aCoords
Object with left, top, width, height properties
return a new object that contains all the style property for a character the object returned is newly created
of the line where the character is
position of the character on the line
style object
return correct set of coordinates for intersection this will return either aCoords or lineCoords. The coords are returned in an array.
will return aCoords if true or lineCoords
will return aCoords if true or lineCoords
[tl, tr, br, bl] of points
High level function to know the color of the cursor. the currentChar is the one that precedes the cursor Returns color (fill) of char at the current cursor if the text object has a pattern or gradient for filler, it will return that. Unused by the library, is for the end user
Character color (fill)
Private getReturns index of a character corresponding to where an object was clicked
Event object
Index of a character
Gets style of a current selection/cursor (at the start position) if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.
Start index to get styles at
End index to get styles at, if not specified selectionEnd or startIndex + 1
Optional complete: booleanget full style or not
styles an array with one, zero or more Style objects
Private getPrivate
Gets style of a current selection/cursor position
to get styles at
Optional complete: booleanfull style if true
style Style object at a specified index
Returns id attribute for svg output
Returns filter for svg shadow
Returns styles-string for svg-export
Optional skipShadow: booleana boolean to skip shadow filter output
Returns transform-string for svg-export
Optional full: booleanRetrieves the value of property at given character position
the line number
the character number
the property name
the value of 'property'
x position according to object's originX property in canvas coordinate plane
y position according to object's originY property in canvas coordinate plane
Override this method to customize grapheme splitting
array of graphemes
the util graphemeSplit needs to be injectable in some way.
is more comfortable to inject the correct util rather than having to override text
in the middle of the prototype chain
Optional strict: booleanchecks only ancestors that are objects (without canvas)
return true if the object will draw a fill Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when fill happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the fill is invisible.
Boolean
3.0.0
return true if the object will draw a stroke Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when stroke happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the stroke is invisible.
Boolean
3.0.0
Private initInserts style object for a given line/char index
Index of a line
Index of a char
number Style object to insert, if given
Optional copiedStyle: Partial<CompleteTextStyleDeclaration>[]array of style objects
insert characters at start position, before start position. start equal 1 it means the text get inserted between actual grapheme 0 and 1 if style array is provided, it must be as the same length of text in graphemes if end is provided and is bigger than start, old text is replaced. start/end ar per grapheme position in _text array.
text to insert
array of style objects
default to start + 1
Inserts style object(s)
Characters at the location where style is inserted
cursor index for inserting style
Optional copiedStyle: Partial<CompleteTextStyleDeclaration>[]array of style objects to insert.
Handle insertion of more consecutive style lines for when one or more newlines gets added to the text. Since current style needs to be shifted first we shift the current style of the number lines needed, then we add new lines from the last to the first.
Index of a line
Index of a char
number of lines to add
Optional copiedStyle: { Array of objects styles
Checks if object intersects with another object
Object to test
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of calculating them
true if object intersects with another object
Checks if object is fully contained within area of another object
Object to test
Optional absolute: boolean = falseuse coordinates without viewportTransform
Optional calculate: boolean = falseuse coordinates of current position instead of stored ones
true if object is fully contained within area of another object
Returns true if the specified control is visible, false otherwise.
The key of the control. Possible values are usually 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr', but since the control api allow for any control name, can be any string.
true if the specified control is visible, false otherwise
Checks if object is descendant of target Should be used instead of Group.contains or StaticCanvas.contains for performance reasons
object to compare against
if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns undefined
Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen
Optional calculate: boolean = falseuse coordinates of current position instead of .aCoords
true if object is fully or partially contained within canvas
Detect if a line has a linebreak and so we need to account for it when moving and counting style. It return always 1 for text and Itext. Textbox has its own implementation
Optional skipWrapping: booleanNumber
Private mousePrivate
standard handler for mouse up, overridable
When set to true, force the object to have its own cache, even if it is inside a group
it may be needed when your object behave in a particular way on the cache and always needs
its own isolated canvas to render correctly.
Created to be overridden
since 1.7.12
Boolean
unsubscribe an event listener
event name (eg. 'after:render')
event listener to unsubscribe
unsubscribe event listeners
handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
unsubscribe all event listeners
Observes specified event
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
on
Optional options: { Optional e?: TPointerEventOptional object?: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>Handles onInput event
Event object
Private onPrivate
Default event handler to simulate triple click
This callback function is called every time _discardActiveObject or _setActiveObject try to to select this object. If the function returns true, the process is cancelled
Optional options: { options sent from the upper functions
Optional e?: TPointerEventevent if the process is generated by an event
Observes specified event once
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
once
Remove a style property or properties from all individual character styles in a text object. Deletes the character style object if it contains no other style props. Deletes a line style object if it contains no other character styles.
Private renderSets "angle" of an instance with centered rotation
Angle value (in degrees)
Sets the visibility of the specified control. please do not use.
The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. but since the control api allow for any control name, can be any string.
true to set the specified control visible, false otherwise
discuss this overlap of priority here with the team. Andrea Bogazzi for details
Sets the visibility state of object controls, this is just a bulk option for setControlVisible;
Optional options: Record<string, boolean> = {}with an optional key per control example: {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
Sets corner and controls position coordinates based on current angle, width and height, left and top. oCoords are used to find the corners aCoords are used to quickly find an object on the canvas lineCoords are used to quickly find object during pointer events. See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabricjs.com/fabric-gotchas
Changes cursor location in a text depending on passed pointer (x/y) object
Event object
Protected setAs setXY, but in current parent's coordinate plane (the current group if any or the canvas)
Sets style of a current selection, if no selection exist, do not set anything.
Optional styles: objectStyles object
Optional startIndex: number = ...Start index to get styles at
Optional endIndex: number = ...End index to get styles at, if not specified selectionEnd or startIndex + 1
x position according to object's originX property in canvas coordinate plane
Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. You can specify originX and originY values, that otherwise are the object's current values.
Set object's bottom left corner to point (5,5) on canvas
object.setXY(new Point(5, 5), 'left', 'bottom').
y position according to object's originY property in canvas coordinate plane
Decide if the object should cache or not. Create its own cache level 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.
override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style.
ctx is rotated and translated so that (0,0) is at object's center
the control box size used
Returns true if object has a style property or has it ina specified line This function is used to detect if a text will use a particular property or not.
to check for
Optional lineIndex: numberto check the style on
Returns svg clipPath representation of an instance
Optional reviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Returns object representation of an instance
Optional propertiesToInclude: K[] = []Any properties that you might want to additionally include in the output
Object representation of an instance
Returns svg representation of an instance
Optional reviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Translates the coordinates from a set of origin to another (based on the object's dimensions)
The point which corresponds to the originX and originY params
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Default handler for triple click, select a line
Private updatecalled by Canvas#textEditingManager
Private updateStatic _fromStatic fromReturns FabricText instance from an SVG element (not yet implemented)
Element to parse
Optional options: AbortableOptions object
Optional cssRules: CSSRulesText
Static fromReturns FabricText instance from an object representation
plain js Object to create an instance from
Static getGenerated using TypeDoc
Fires
changed
Fires
selection:changed
Fires
editing:entered
Fires
editing:exited
Fires
dragstart
Fires
drag drag event firing on the drag source
Fires
dragend
Fires
copy
Fires
cut
Fires
paste
Supported key combinations
Supported mouse/touch combination