Canvas

Canvas

new Canvas(config);

Canvas Renderer constructor.

• config : Object, the configuration needed to create a canvas object, it includes the following attributes:

Attribute	Type	Description
el	String/HtmlElement	Container selector or DOM element
context	CanvasRenderingContext2D	The context of the canvas.
width	Number	Optional, width of the canvas. If it is omitted, the actual width of the canvas DOM is used by default.
height	Number	Optional, height of the canvas. If it is omitted, the actual height of the canvas DOM is used by default.
pixelRatio	Number	F2 automatically handles pixel ratio adjustments in order to render crisp drawings on all devices. Unless otherwise specified, the pixel ratio will be defaulted to the actual device pixel ratio: window.devicePixelRatio. You can override the device pixel ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.

Example:

const canvas = new F2.G.Canvas({
  id: 'canvas',
  width: 500,
  height: 500,
  pixelRatio: 1
});

Methods

getChildren()

/**
 * Get the elements contained in the container
 * @return {Array}
 */
getChildren()

isDestroyed()

/**
 * Wether the object is destroyed.
 * @return {Boolean}
 */
isDestroyed()

getWidth()

/**
 * Get width of the canvas
 * @return {Number}
 */
getWidth()

getHeight()

/**
 * Get height of the canvas
 * @return {Number}
 */
getHeight()

changeSize(width, height)

/**
 * Change the size of the canvas
 * @param  {Number} width  
 * @param  {Number} height 
 */
changeSize(width, height)

getPointByClient(clientX, clientY)

/**
 * Convert the coordinate on browser to coordinate on canvas
 * @param  {Number} clientX Coordinate of x-axis on browser
 * @param  {Number} clientY Coordinate of y-axis on browser
 * @return {Object}
 */
getPointByClient(clientX, clientY)

addShape(type, config)

/**
 * Create a shape and add it to canvas
 * @param {String} type Type of shape
 * @param {Object} config  Configuration of the shape
 * @return {Shape}
 */
addShape(type, config = {})

The config parameter passed in is the configuration of the shape, includes:

{
  className: {String}, // class name specified by users
  zIndex: {Number}, // z-index of the shape
  visible: {Boolean}, // wether the shape is visible
  attrs: {Object} // graphic attributes of the shape, different shapes have different attributes, see Shape for more details.
}

addGroup(config)

/**
 * Create and add a group
 * @param {Object||Null} cfg Configuration for group
 * @return {Group}
 */
addGroup(config)

config can be Null or Object, if the config is an object, passed in is the configuration for Group can be:

{
  className: {String}, // user specified class name
  zIndex: {Number}, // hierarchical index of the group
  visible: Boolean // wether the group is visible
}

add(items)

/**
 * Add elements to canvas
 * @param {Array||Group||Shape} Items can be a shape instance, a group instance, a shape array or a group array
 * @return {Canvas}
 */
add(items)

contain(item)

/**
 * Wether current canvas contains the item
 * @param  {Shape||Group} Item can be a shape instance or group instance
 * @return {Boolean}
 */
contain(item)

sort()

/**
 * Sort the elements in the container by their zIndex, in descending order
 * @return {Canvas||Group} The container itself
 */
sort()

get(name)

/**
 * Get the attribute from canvas by attribute name
 * @param {String} name attribute name 
 * @return {*} 
 */
get(name)

set(name, value)

/**
 * Set the attribute value for the corresponding attribute name
 * @param {String} name attribute name 
 * @param {String} value the value setting for the attribute 
 */
set(name, value)

clear()

/**
  * Clear all the elements
  * @return {Canvas|Group} The container itself
  */
clear()

draw()

Draw the canvas.

destroy()

Destroy the canvas object.