Group objects
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 usefull to understand where an object is. They get updated with oCoords but they do not need to be updated when zoom or panning change. The coordinates get updated with @method setCoords. You can calculate them without updating with @method calcCoords(true);
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
Angle of rotation of an object (in degrees)
Is running animation
Animation property
Anime instance
Background color of an object. Only works with text objects at the moment.
Color of controlling borders of an object (when it's active)
Array specifying dash pattern of an object's border (hasBorder must be true)
Opacity of object's controlling borders when object is active and moving
Scale factor of object's controlling borders
List of properties to consider when checking if cache needs refresh Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single 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
The canvas the object belongs to
When true, this object will use center point as the origin of transformation when being rotated via the controls. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
When true, this object will use center point as the origin of transformation when being scaled via the controls. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
Object class
Whether it can be clicked
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'
Is possible clone
Color of controlling corners of an object (when it's active)
Array specifying dash pattern of an object's control (hasBorder must be true)
Size of object's controlling corners (in pixels)
Color of controlling corners of an object (when it's active and transparentCorners false)
Specify style of control, 'rect' or 'circle'
Not used by fabric, just for convenience
Is enable double click
Is possible delete
When set to true, object's cache will be rerendered next render call.
Object editable
When set to false, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
When true, object is not exported in OBJECT/JSON
since 1.6.3
Color of object's fill
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
When true, an object is rendered as flipped horizontally
When true, an object is rendered as flipped vertically
Composite rule used for canvas globalCompositeOperation
The group the object is part of
When set to false, object's controlling borders are not rendered
When set to false, object's controls are not displayed and can not be used to manipulate object
When set to false, object's controlling rotating point will not be visible or selectable
Object height
Default cursor value used when hovering over this object on canvas
Object id
When false, default object's values are not included in its serialization
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
Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
Link property
When true, object horizontal movement is locked
When true, object vertical movement is locked
When true, object rotation is locked
When true, object cannot be flipped by scaling into negative values
When true, object horizontal scaling is locked
When true, object vertical scaling is locked
When true, object horizontal skewing is locked
When true, object vertical skewing is locked
When true, object non-uniform scaling is locked
Is locked object
storage for object full transform matrix
Minimum allowed scale value of an object
Default cursor value used when moving an object on canvas
Not used by fabric, just for convenience
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
Describe object's corner position in canvas element coordinates.
properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for 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 this properties: width, height, scaleX, scaleY
skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding.
The coordinates get updated with @method setCoords.
You can calculate them without updating with @method calcCoords;
When true, object is cached on an additional canvas.
Opacity of an object
Original angle
Original fill color
Original left position
Original opacity
Original rotation
Original scale X
Original scale Y
Original stroke color
Original top position
Horizontal origin of transformation of an object (one of "left", "right", "center")
Vertical origin of transformation of an object (one of "top", "bottom", "center")
storage for object transform matrix
Padding between object and its controlling borders (in pixels)
Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
Parent object id
When set to true, objects are "found" on canvas on per-pixel basis rather than according to bounding box
Offset for object's controlling rotating point (when enabled via hasRotatingPoint)
This property replaces "angle"
Object scale factor (horizontal)
Object scale factor (vertical)
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.
Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.
Shadow object representing shadow of this shape
Object skew factor (horizontal)
Object skew factor (vertical)
Indicates the angle that an object will lock to while rotating. Can get from canvas.
Indicates the distance from the snapAngle the rotation will lock to the snapAngle. Can get from canvas.
List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged) as well as for history (undo/redo) purposes
When true, object properties are checked for cache invalidation. In some particular
situation you may want this to be disabled ( spray brush, very big, groups)
or if your application does not allow you to modify properties for groups child you want
to disable it for groups.
default to false
since 1.7.0
When defined, an object is rendered via stroke and this property specifies its color
Array specifying dash pattern of an object's stroke (stroke must be defined)
Line offset of an object's stroke
Line endings style of an object's stroke (one of "butt", "round", "square")
Corner style of an object's stroke (one of "bevil", "round", "miter")
Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
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.
default to false
Width of a stroke used to render this object
Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets
Object Super type
Tooltip property
Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
Type of an object (rect, circle, path, etc.). Note that this property is meant to be read-only and not meant to be modified. If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still available setting this boolean to true.
When set to false, an object is not rendered on canvas
Object width
Retores original state of each of group objects (original state is that which was before group was created).
thisArg
Retores original state of each of group objects (original state is that which was before group was created).
thisArg
Adds objects to collection, then renders canvas (if renderOnAddRemove is not false)
Objects should be instances of (or inherit from) fabric.Object
Zero or more fabric instances
Adds an object to a group; Then recalculates group's dimension, position.
thisArg
Adds an object to a group; Then recalculates group's dimension, position.
thisArg
Animates object's properties object.animate('left', ..., {duration: ...});
Property to animate
Value to animate property
The animation options
Animates object's properties object.animate({ left: ..., top: ... }, { duration: ... });
Properties to animate with values to animate to
The animation options
Returns number representation of a collection complexity
complexity
Returns true if collection contains an object
Object to check against
true if collection contains an object
Destroys a group (restoring state of its objects)
thisArg
Execute the drawing operation for an object on a specified context
Context to render on
Fires event with an optional options object
Event name to fire
thisArg
Executes given function for each object in this group
Context (aka thisObject)
thisArg
Returns an array of children objects of this instance Type parameter introduced in 1.3.10
Inserts an object into collection at specified index, then renders canvas (if renderOnAddRemove is not false)
An object should be an instance of (or inherit from) fabric.Object
Object to insert
Index to insert object at
When true, no splicing (shifting) of objects occurs
thisArg
Check if cache is dirty
Returns true if collection contains no objects
true if collection is empty
Check if this group or its parent group are caching, recursively up
Returns object at specified index
thisArg
Stops event observing for a particular event handler. Calling this method without arguments removes all handlers for all events
Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
Function to be deleted from EventListeners
Observes specified event
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
Realises the transform from this group onto the supplied object i.e. it tells you what would happen if the supplied object was in the group, and then the group was destroyed. It mutates the supplied object.
transformedObject
Removes objects from a collection, then renders canvas (if renderOnAddRemove is not false)
Zero or more fabric instances
thisArg
Removes an object from a group; Then recalculates group's dimension, position.
thisArg
Renders instance on a given context
context to render instance on
Sets coordinates of all group objects
thisArg
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 a size of a collection (i.e: length of an array containing its objects)
Collection size
make a group an active selection, remove the group from canvas the group has to be on canvas for this to work.
thisArg
Returns svg clipPath representation of an instance
svg representation of an instance
Returns svg representation of an instance
svg representation of an instance
Destroys a group (restoring state of its objects)
thisArg
Check if this object or a child object will cast a shadow
Returns {@link fabric.Group} instance from an object representation
Object to create a group from
Generated using TypeDoc
Constructor