Class fabric.Element
fabric.Element
Defined in: element.class.js.
Constructor Attributes | Constructor Name and Description |
---|---|
fabric.Element(el, options)
|
Field Attributes | Field Name and Description |
---|---|
<static> |
fabric.Element.ATTRIBUTE_NAMES
|
<constant> | |
<constant> | |
<static> |
fabric.Element.EMPTY_JSON
|
Method Attributes | Method Name and Description |
---|---|
add()
Adds objects to canvas, then renders canvas;
Objects should be instances of (or inherit from) fabric.Object
|
|
bringForward(object)
Moves an object one level up in stack of drawn objects
|
|
bringToFront(object)
Moves an object to the top of the stack of drawn objects
|
|
Calculates canvas element offset relative to the document
This method is also attached as "resize" event handler of window
|
|
centerObjectH(object)
Centers object horizontally.
|
|
centerObjectV(object)
Centers object vertically.
|
|
clear()
Clears all contexts (background, main, top) of an instance
|
|
clearContext(context)
Clears specified context of canvas element
|
|
clone(callback)
Clones canvas instance
|
|
Returns number representation of an instance complexity
|
|
containsPoint(e, target)
Applies one implementation of 'point inside polygon' algorithm
|
|
Deactivates all objects by calling their setActive(false)
|
|
Deactivates all objects and dispatches appropriate events
|
|
dispose()
Clears a canvas element and removes all event handlers.
|
|
findTarget(e, skipGroup)
Method that determines what object we are clicking on
|
|
fxCenterObjectH(object, callbacks)
Centers object horizontally with animation.
|
|
fxCenterObjectV(object, callbacks)
Centers object vertically with animation.
|
|
fxRemove(object, callback)
Same as `fabric.Element#remove` but animated
|
|
fxStraightenObject(object)
Same as `fabric.Element#straightenObject`, but animated
|
|
Returns currently active group
|
|
Returns currently active object
|
|
Returns coordinates of a center of canvas.
|
|
Returns topmost canvas context
|
|
Returns <canvas> element corresponding to this instance
|
|
Returns canvas height
|
|
Returns an array of objects this instance has
|
|
getPointer(e)
Returns pointer coordinates relative to canvas.
|
|
getWidth()
Returns canvas width
|
|
insertAt(object, index)
Inserts an object to canvas at specified index and renders canvas.
|
|
isEmpty()
Returns true if canvas contains no objects
|
|
item(index)
Returns object at specified index
|
|
loadFromDatalessJSON(json, callback)
Populates canvas with data from the specified dataless JSON
JSON format must conform to the one of `fabric.Element#toDatalessJSON`
|
|
loadFromJSON(json, callback)
Populates canvas with data from the specified JSON
JSON format must conform to the one of `fabric.Element#toJSON`
|
|
loadImageFromURL(url, callback)
Loads an image from URL
|
|
loadSVGFromURL(url, callback)
Takes url corresponding to an SVG document, and parses it to a set of objects
|
|
onBeforeScaleRotate(target)
Callback; invoked right before object is about to be scaled/rotated
|
|
onFpsUpdate(fps)
Callback; invoked on every redraw of canvas and is being passed a number indicating current fps
|
|
remove(object)
Removes an object from canvas and returns it
|
|
Removes currently active group
|
|
Removes currently active object
|
|
renderAll(allOnTop)
Renders both the top canvas and the secondary container canvas.
|
|
Method to render only the top canvas.
|
|
sendBackwards(object)
Moves an object one level down in stack of drawn objects
|
|
sendToBack(object)
Moves an object to the bottom of the stack of drawn objects
|
|
setActiveGroup(group)
Sets active group to a speicified one
|
|
setActiveObject(object)
Sets given object as active
|
|
setDimensions(dimensions)
Sets dimensions (width, height) of this canvas instance
|
|
setHeight(height)
Sets height of this canvas instance
|
|
setOverlayImage(url, callback)
Sets overlay image for this canvas
|
|
setWidth(width)
Sets width of this canvas instance
|
|
straightenObject(object)
Straightens object, then rerenders canvas
|
|
<static> |
fabric.Element.supports(methodName)
Provides a way to check support of some of the canvas methods
(either those of HTMLCanvasElement itself, or rendering context)
|
Returs dataless JSON representation of canvas
|
|
Returns dataless object representation of canvas
|
|
toDataURL(format)
Exports canvas element to a dataurl image.
|
|
toDataURLWithMultiplier(format, multiplier)
Exports canvas element to a dataurl image (allowing to change image size via multiplier).
|
|
<static> |
fabric.Element.toGrayscale(canvasEl)
Takes <canvas> element and transforms its data in such way that it becomes grayscale
|
toJSON()
Returs JSON representation of canvas
|
|
toObject()
Returns object representation of canvas
|
|
toString()
Returns a string representation of an instance
|
Class Detail
fabric.Element(el, options)
- Parameters:
- {HTMLElement | String} el
- <canvas> element to initialize instance on
- {Object} options Optional
- Options object
Field Detail
<static>
fabric.Element.ATTRIBUTE_NAMES
Defined in: line.class.js.
- See:
- http://www.w3.org/TR/SVG/shapes.html#LineElement
{String}
backgroundColor
<constant>
{Number}
CANVAS_HEIGHT
<constant>
{Number}
CANVAS_WIDTH
<static>
{String}
fabric.Element.EMPTY_JSON
{String}
freeDrawingColor
{Number}
freeDrawingLineWidth
{Boolean}
includeDefaultValues
{String}
selectionBorderColor
{String}
selectionColor
{Number}
selectionLineWidth
{Boolean}
shouldCacheImages
Method Detail
{fabric.Element}
add()
Adds objects to canvas, then renders canvas;
Objects should be instances of (or inherit from) fabric.Object
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
bringForward(object)
Moves an object one level up in stack of drawn objects
- Parameters:
- object
- {fabric.Object} Object to send
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
bringToFront(object)
Moves an object to the top of the stack of drawn objects
- Parameters:
- object
- {fabric.Object} Object to send
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
calcOffset()
Calculates canvas element offset relative to the document
This method is also attached as "resize" event handler of window
- Returns:
- {fabric.Element} instance
{fabric.Element}
centerObjectH(object)
Centers object horizontally.
- Parameters:
- {fabric.Object} object
- Object to center
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
centerObjectV(object)
Centers object vertically.
- Parameters:
- {fabric.Object} object
- Object to center
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
clear()
Clears all contexts (background, main, top) of an instance
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
clearContext(context)
Clears specified context of canvas element
- Parameters:
- context
- {Object} ctx context to clear
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
clone(callback)
Clones canvas instance
- Parameters:
- {Object} callback Optional
- Expects `onBeforeClone` and `onAfterClone` functions
- Returns:
- {fabric.Element} Clone of this instance
{Number}
complexity()
Returns number representation of an instance complexity
- Returns:
- {Number} complexity
{Boolean}
containsPoint(e, target)
Applies one implementation of 'point inside polygon' algorithm
- Parameters:
- e
- { Event } event object
- target
- { fabric.Object } object to test against
- Returns:
- {Boolean} true if point contains within area of given object
{fabric.Element}
deactivateAll()
Deactivates all objects by calling their setActive(false)
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
deactivateAllWithDispatch()
Deactivates all objects and dispatches appropriate events
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
dispose()
Clears a canvas element and removes all event handlers.
- Returns:
- {fabric.Element} thisArg
findTarget(e, skipGroup)
Method that determines what object we are clicking on
- Parameters:
- {Event} e
- mouse event
- {Boolean} skipGroup
- when true, group is skipped and only objects are traversed through
{fabric.Element}
fxCenterObjectH(object, callbacks)
Centers object horizontally with animation.
- Parameters:
- {fabric.Object} object
- Object to center
- {Object} callbacks Optional
- Callbacks object with optional "onComplete" and/or "onChange" properties
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
fxCenterObjectV(object, callbacks)
Centers object vertically with animation.
- Parameters:
- {fabric.Object} object
- Object to center
- {Object} callbacks Optional
- Callbacks object with optional "onComplete" and/or "onChange" properties
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
fxRemove(object, callback)
Same as `fabric.Element#remove` but animated
- Parameters:
- {fabric.Object} object
- Object to remove
- {Function} callback
- Callback, invoked on effect completion
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
fxStraightenObject(object)
Same as `fabric.Element#straightenObject`, but animated
- Parameters:
- {fabric.Object} object
- Object to straighten
- Returns:
- {fabric.Element} thisArg
{fabric.Group}
getActiveGroup()
Returns currently active group
- Returns:
- {fabric.Group} Current group
{fabric.Object}
getActiveObject()
Returns currently active object
- Returns:
- {fabric.Object} active object
{Object}
getCenter()
Returns coordinates of a center of canvas.
Returned value is an object with top and left properties
- Returns:
- {Object} object with "top" and "left" number values
{CanvasRenderingContext2D}
getContext()
Returns topmost canvas context
- Returns:
- {CanvasRenderingContext2D}
{HTMLCanvasElement}
getElement()
Returns <canvas> element corresponding to this instance
- Returns:
- {HTMLCanvasElement}
{Number}
getHeight()
Returns canvas height
- Returns:
- {Number}
{Array}
getObjects()
Returns an array of objects this instance has
- Returns:
- {Array}
{Object}
getPointer(e)
Returns pointer coordinates relative to canvas.
- Parameters:
- e
- Returns:
- {Object} object with "x" and "y" number values
{Number}
getWidth()
Returns canvas width
- Returns:
- {Number}
{fabric.Element}
insertAt(object, index)
Inserts an object to canvas at specified index and renders canvas.
An object should be an instance of (or inherit from) fabric.Object
- Parameters:
- object
- {Object} Object to insert
- index
- {Number} index to insert object at
- Returns:
- {fabric.Element} instance
{Boolean}
isEmpty()
Returns true if canvas contains no objects
- Returns:
- {Boolean} true if canvas is empty
{fabric.Object}
item(index)
Returns object at specified index
- Parameters:
- {Number} index
- Returns:
- {fabric.Object}
{fabric.Element}
loadFromDatalessJSON(json, callback)
Populates canvas with data from the specified dataless JSON
JSON format must conform to the one of `fabric.Element#toDatalessJSON`
- Parameters:
- {String} json
- JSON string
- {Function} callback
- Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized
- Returns:
- {fabric.Element} instance
{fabric.Element}
loadFromJSON(json, callback)
Populates canvas with data from the specified JSON
JSON format must conform to the one of `fabric.Element#toJSON`
- Parameters:
- {String} json
- JSON string
- {Function} callback
- Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized
- Returns:
- {fabric.Element} instance
loadImageFromURL(url, callback)
Loads an image from URL
- Parameters:
- url
- {String} url of image to load
- callback
- {Function} calback, invoked when image is loaded
loadSVGFromURL(url, callback)
Takes url corresponding to an SVG document, and parses it to a set of objects
onBeforeScaleRotate(target)
Callback; invoked right before object is about to be scaled/rotated
- Parameters:
- {fabric.Object} target
- Object that's about to be scaled/rotated
onFpsUpdate(fps)
Callback; invoked on every redraw of canvas and is being passed a number indicating current fps
- Parameters:
- {Number} fps
{Object}
remove(object)
Removes an object from canvas and returns it
- Parameters:
- object
- {Object} Object to remove
- Returns:
- {Object} removed object
{fabric.Element}
removeActiveGroup()
Removes currently active group
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
removeActiveObject()
Removes currently active object
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
renderAll(allOnTop)
Renders both the top canvas and the secondary container canvas.
- Parameters:
- allOnTop
- {Boolean} optional Whether we want to force all images to be rendered on the top canvas
- Returns:
- {fabric.Element} instance
{fabric.Element}
renderTop()
Method to render only the top canvas.
Also used to render the group selection box.
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
sendBackwards(object)
Moves an object one level down in stack of drawn objects
- Parameters:
- object
- {fabric.Object} Object to send
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
sendToBack(object)
Moves an object to the bottom of the stack of drawn objects
- Parameters:
- object
- {fabric.Object} Object to send to back
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
setActiveGroup(group)
Sets active group to a speicified one
- Parameters:
- {fabric.Group} group
- Group to set as a current one
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
setActiveObject(object)
Sets given object as active
- Parameters:
- object
- {fabric.Object} Object to set as an active one
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
setDimensions(dimensions)
Sets dimensions (width, height) of this canvas instance
- Parameters:
- {Object} dimensions
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
setHeight(height)
Sets height of this canvas instance
- Parameters:
- {Number} height
- value to set height to
- Returns:
- {fabric.Element} instance
{fabric.Element}
setOverlayImage(url, callback)
Sets overlay image for this canvas
- Parameters:
- {String} url
- url of an image to set background to
- {Function} callback
- callback to invoke when image is loaded and set as an overlay one
- Returns:
- {fabric.Element} thisArg
{fabric.Element}
setWidth(width)
Sets width of this canvas instance
- Parameters:
- {Number} width
- value to set width to
- Returns:
- {fabric.Element} instance
{fabric.Element}
straightenObject(object)
Straightens object, then rerenders canvas
- Parameters:
- {fabric.Object} object
- Object to straighten
- Returns:
- {fabric.Element} thisArg
<static>
{Boolean | null}
fabric.Element.supports(methodName)
Provides a way to check support of some of the canvas methods
(either those of HTMLCanvasElement itself, or rendering context)
- Parameters:
- methodName
- {String} Method to check support for; Could be one of "getImageData" or "toDataURL"
- Returns:
- {Boolean | null} `true` if method is supported (or at least exists), `null` if canvas element or context can not be initialized
{String}
toDatalessJSON()
Returs dataless JSON representation of canvas
- Returns:
- {String} json string
{Object}
toDatalessObject()
Returns dataless object representation of canvas
- Returns:
- {Object}
{String}
toDataURL(format)
Exports canvas element to a dataurl image.
- Parameters:
- {String} format
- the format of the output image. Either "jpeg" or "png".
- Returns:
- {String}
{String}
toDataURLWithMultiplier(format, multiplier)
Exports canvas element to a dataurl image (allowing to change image size via multiplier).
- Parameters:
- {String} format
- (png|jpeg)
- {Number} multiplier
- Returns:
- {String}
<static>
fabric.Element.toGrayscale(canvasEl)
Takes <canvas> element and transforms its data in such way that it becomes grayscale
- Parameters:
- {HTMLCanvasElement} canvasEl
{String}
toJSON()
Returs JSON representation of canvas
- Returns:
- {String} json string
{Object}
toObject()
Returns object representation of canvas
- Returns:
- {Object}
{String}
toString()
Returns a string representation of an instance
- Returns:
- {String} string representation of an instance