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.

Last updated