Namespace: util

fabric.util

Source:

Namespaces

array
ease
object
string

Members

(static) getElementStyle

Returns style attribute value of a given element
Source:

Methods

(static) addClass(element, className)

Adds class to an element
Parameters:
Name Type Description
element HTMLElement Element to add class to
className String Class to add to an element
Source:

(static) addListener(element, eventName, handler)

Adds an event listener to an element
Parameters:
Name Type Description
element HTMLElement
eventName String
handler function
Source:

(static) animate(optionsopt)

Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
Parameters:
Name Type Attributes Description
options Object <optional>
Animation options
Properties
Name Type Attributes Default Description
onChange function <optional>
Callback; invoked on every value change
onComplete function <optional>
Callback; invoked when value change is completed
startValue Number <optional>
0 Starting value
endValue Number <optional>
100 Ending value
byValue Number <optional>
100 Value to modify the property by
easing function <optional>
Easing function
duration Number <optional>
500 Duration of change (in ms)
Source:

(static) animateColor(fromColor, toColor, durationopt, optionsopt)

Changes the color from one to another within certain period of time, invoking callbacks as value is being changed.
Parameters:
Name Type Attributes Description
fromColor String The starting color in hex or rgb(a) format.
toColor String The starting color in hex or rgb(a) format.
duration Number <optional>
Duration of change (in ms).
options Object <optional>
Animation options
Properties
Name Type Attributes Description
onChange function <optional>
Callback; invoked on every value change
onComplete function <optional>
Callback; invoked when value change is completed
colorEasing function <optional>
Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used.
Source:

(static) clearFabricFontCache(fontFamilyopt)

Clear char widths cache for a font family.
Parameters:
Name Type Attributes Description
fontFamily String <optional>
font family to clear
Source:

(static) clipContext(receiver, ctx)

Parameters:
Name Type Description
receiver fabric.Object Object implementing `clipTo` method
ctx CanvasRenderingContext2D Context to clip
Deprecated:
  • since 2.0.0
Source:

(static) createCanvasElement() → {CanvasElement}

Creates canvas element
Source:
Returns:
initialized canvas element
Type
CanvasElement

(static) createClass(parentopt, propertiesopt)

Helper for creation of "classes".
Parameters:
Name Type Attributes Description
parent function <optional>
optional "Class" to inherit from
properties Object <optional>
Properties shared by all instances of this class (be careful modifying objects defined here as this would affect all instances)
Source:

(static) createImage() → {HTMLImageElement}

Creates image element (works on client and node)
Source:
Returns:
HTML image element
Type
HTMLImageElement

(static) degreesToRadians(degrees) → {Number}

Transforms degrees to radians.
Parameters:
Name Type Description
degrees Number value in degrees
Source:
Returns:
value in radians
Type
Number

(static) drawArc(ctx, fx, fy, coords)

Draws arc
Parameters:
Name Type Description
ctx CanvasRenderingContext2D
fx Number
fy Number
coords Array
Source:

(static) drawDashedLine(ctx, x, y, x2, y2, da)

Draws a dashed line between two points This method is used to draw dashed line around selection area. See dotted stroke in canvas
Parameters:
Name Type Description
ctx CanvasRenderingContext2D context
x Number start x coordinate
y Number start y coordinate
x2 Number end x coordinate
y2 Number end y coordinate
da Array dash array pattern
Source:

(static) enlivenObjects(objects, callback, namespace, reviver)

Creates corresponding fabric instances from their object representations
Parameters:
Name Type Description
objects Array Objects to enliven
callback function Callback to invoke when all objects are created
namespace String Namespace to get klass "Class" object from
reviver function Method for further parsing of object elements, called after each fabric object created.
Source:

(static) enlivenPatterns(patterns, callback)

Create and wait for loading of patterns
Parameters:
Name Type Description
patterns Array Objects to enliven
callback function Callback to invoke when all objects are created called after each fabric object created.
Source:

(static) falseFunction() → {Boolean}

Function which always returns `false`.
Source:
Returns:
Type
Boolean

(static) getBoundsOfArc(fx, fy, rx, ry, rot, large, sweep, tx, ty)

Calculate bounding box of a elliptic-arc
Parameters:
Name Type Description
fx Number start point of arc
fy Number
rx Number horizontal radius
ry Number vertical radius
rot Number angle of horizontal axe
large Number 1 or 0, whatever the arc is the big or the small on the 2 points
sweep Number 1 or 0, 1 clockwise or counterclockwise direction
tx Number end point of arc
ty Number
Source:

(static) getById(id) → {HTMLElement|null}

Takes id and returns an element with that id (if one exists in a document)
Parameters:
Name Type Description
id String | HTMLElement
Source:
Returns:
Type
HTMLElement | null

(static) getElementOffset(element) → {Object}

Returns offset for a given element
Parameters:
Name Type Description
element HTMLElement Element to get offset for
Source:
Returns:
Object with "left" and "top" properties
Type
Object

(static) getFunctionBody(fn) → {String}

Returns string representation of function body
Parameters:
Name Type Description
fn function Function to get body of
Source:
Returns:
Function body
Type
String

(static) getKlass(type, namespace) → {Object}

Returns klass "Class" object of given namespace
Parameters:
Name Type Description
type String Type of object (eg. 'circle')
namespace String Namespace to get klass "Class" object from
Source:
Returns:
klass "Class"
Type
Object

(static) getPointer(event)

Cross-browser wrapper for getting event's coordinates
Parameters:
Name Type Description
event Event Event object
Source:

(static) getRandomInt(min, max) → {Number}

Returns random number between 2 specified ones.
Parameters:
Name Type Description
min Number lower limit
max Number upper limit
Source:
Returns:
random value (between min and max)
Type
Number

(static) getScript(url, callback)

Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
Parameters:
Name Type Description
url String URL of a script to load
callback function Callback to execute when script is finished loading
Source:

(static) getScrollLeftTop(element) → {Object}

Returns element scroll offsets
Parameters:
Name Type Description
element HTMLElement Element to operate on
Source:
Returns:
Object with left/top values
Type
Object

(static) getSvgAttributes(type) → {Array}

Returns array of attributes for given svg that fabric parses
Parameters:
Name Type Description
type String Type of svg element (eg. 'circle')
Source:
Returns:
string names of supported attributes
Type
Array

(static) groupSVGElements(elements, optionsopt, path) → {fabric.Object|fabric.Group}

Groups SVG elements (usually those retrieved from SVG document)
Parameters:
Name Type Attributes Description
elements Array SVG elements to group
options Object <optional>
Options object
path String Value to set sourcePath to
Source:
Returns:
Type
fabric.Object | fabric.Group

(static) invertTransform(t) → {Array}

Invert transformation t
Parameters:
Name Type Description
t Array The transform
Source:
Returns:
The inverted transform
Type
Array

(static) isTransparent(ctx, x, y, tolerance)

Returns true if context has transparent pixel at specified location (taking tolerance into account)
Parameters:
Name Type Description
ctx CanvasRenderingContext2D context
x Number x coordinate
y Number y coordinate
tolerance Number Tolerance
Source:

(static) limitDimsByArea(ar, maximumArea) → {Object.x|Object.y}

Clear char widths cache for a font family.
Parameters:
Name Type Description
ar Number aspect ratio
maximumArea Number Maximum area you want to achieve
Source:
Returns:
  • Limited dimensions by X
    Type
    Object.x
  • Limited dimensions by Y
    Type
    Object.y

(static) loadImage(url, callback, contextopt, crossOriginopt)

Loads image element from given url and passes it to a callback
Parameters:
Name Type Attributes Description
url String URL representing an image
callback function Callback; invoked with loaded image
context * <optional>
Context to invoke callback in
crossOrigin Object <optional>
crossOrigin value to set image element to
Source:

(static) loadImageInDom(img, callback) → {Object}

Attaches SVG image with data: URL to the dom
Parameters:
Name Type Description
img Object Image object with data:image/svg src
callback function Callback; invoked with loaded image
Source:
Returns:
DOM element (div containing the SVG image)
Type
Object

(static) makeBoundingBoxFromPoints(points) → {Object}

Returns coordinates of points's bounding rectangle (left, top, width, height)
Parameters:
Name Type Description
points Array 4 points array
Source:
Returns:
Object with left, top, width, height properties
Type
Object

(static) makeElement(tagName, attributesopt) → {HTMLElement}

Creates specified element with specified attributes
Parameters:
Name Type Attributes Description
tagName String Type of an element to create
attributes Object <optional>
Attributes to set on an element
Source:
Returns:
Newly created element
Type
HTMLElement

(static) makeElementSelectable(element) → {HTMLElement}

Makes element selectable
Parameters:
Name Type Description
element HTMLElement Element to make selectable
Source:
Returns:
Element that was passed in
Type
HTMLElement

(static) makeElementUnselectable(element) → {HTMLElement}

Makes element unselectable
Parameters:
Name Type Description
element HTMLElement Element to make unselectable
Source:
Returns:
Element that was passed in
Type
HTMLElement

(static) multiplyTransformMatrices(a, b, is2x2) → {Array}

Multiply matrix A by matrix B to nest transformations
Parameters:
Name Type Description
a Array First transformMatrix
b Array Second transformMatrix
is2x2 Boolean flag to multiply matrices as 2x2 matrices
Source:
Returns:
The product of the two transform matrices
Type
Array

(static) parsePreserveAspectRatioAttribute(attribute) → {Object}

Parse preserveAspectRatio attribute from element
Parameters:
Name Type Description
attribute string to be parsed
Source:
Returns:
an object containing align and meetOrSlice attribute
Type
Object

(static) parseUnit(value, fontSize) → {Number|String}

Converts from attribute value to pixel value if applicable. Returns converted pixels or original value not converted.
Parameters:
Name Type Description
value Number | String number to operate on
fontSize Number
Source:
Returns:
Type
Number | String

(static) populateWithProperties(source, destination) → {Array}

Populates an object with properties of another object
Parameters:
Name Type Description
source Object Source object
destination Object Destination object
Source:
Returns:
properties Properties names to include
Type
Array

(static) qrDecompose(a) → {Object}

Decomposes standard 2x2 matrix into transform componentes
Parameters:
Name Type Description
a Array transformMatrix
Source:
Returns:
Components of transform
Type
Object

(static) radiansToDegrees(radians) → {Number}

Transforms radians to degrees.
Parameters:
Name Type Description
radians Number value in radians
Source:
Returns:
value in degrees
Type
Number

(static) removeFromArray(array, value) → {Array}

Removes value from an array. Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
Parameters:
Name Type Description
array Array
value *
Source:
Returns:
original array
Type
Array

(static) removeListener(element, eventName, handler)

Removes an event listener from an element
Parameters:
Name Type Description
element HTMLElement
eventName String
handler function
Source:

(static) request(url, optionsopt) → {XMLHttpRequest}

Cross-browser abstraction for sending XMLHttpRequest
Parameters:
Name Type Attributes Description
url String URL to send XMLHttpRequest to
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
method String <optional>
"GET"
parameters String <optional>
parameters to append to url in GET or in body
body String <optional>
body to send with POST or PUT request
onComplete function Callback to invoke when request is completed
Source:
Returns:
request
Type
XMLHttpRequest

(static) requestAnimFrame(callback, element)

requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
Parameters:
Name Type Description
callback function Callback to invoke
element DOMElement optional Element to associate with animation
Source:

(static) resolveNamespace(namespace) → {Object}

Returns object of given namespace
Parameters:
Name Type Description
namespace String Namespace string e.g. 'fabric.Image.filter' or 'fabric'
Source:
Returns:
Object for given namespace (default fabric)
Type
Object

(static) rotatePoint(point, origin, radians) → {fabric.Point}

Rotates `point` around `origin` with `radians`
Parameters:
Name Type Description
point fabric.Point The point to rotate
origin fabric.Point The origin of the rotation
radians Number The radians of the angle for the rotation
Source:
Returns:
The new rotated point
Type
fabric.Point

(static) rotateVector(vector, radians) → {Object}

Rotates `vector` with `radians`
Parameters:
Name Type Description
vector Object The vector to rotate (x and y)
radians Number The radians of the angle for the rotation
Source:
Returns:
The new rotated point
Type
Object

(static) setStyle(element, styles) → {HTMLElement}

Cross-browser wrapper for setting element's style
Parameters:
Name Type Description
element HTMLElement
styles Object
Source:
Returns:
Element that was passed as a first argument
Type
HTMLElement

(static) toArray(arrayLike) → {Array}

Converts an array-like object (e.g. arguments or NodeList) to an array
Parameters:
Name Type Description
arrayLike Object
Source:
Returns:
Type
Array

(static) toFixed(number, fractionDigits) → {Number}

A wrapper around Number#toFixed, which contrary to native method returns number, not string.
Parameters:
Name Type Description
number Number | String number to operate on
fractionDigits Number number of fraction digits to "leave"
Source:
Returns:
Type
Number

(static) transformPoint(p, t, ignoreOffsetopt) → {fabric.Point}

Apply transform t to point p
Parameters:
Name Type Attributes Description
p fabric.Point The point to transform
t Array The transform
ignoreOffset Boolean <optional>
Indicates that the offset should not be applied
Source:
Returns:
The transformed point
Type
fabric.Point

(static) wrapElement(element, wrapper, attributesopt) → {HTMLElement}

Wraps element with another element
Parameters:
Name Type Attributes Description
element HTMLElement Element to wrap
wrapper HTMLElement | String Element to wrap with
attributes Object <optional>
Attributes to set on a wrapper
Source:
Returns:
wrapper
Type
HTMLElement