Group

Group

new Group(config);

Group constructor. Groups are used to contain shapes or other groups.

• config: Object or Null, if config is an object, it can contain the following attributes:

Name	Type	Description
zIndex	Number	z-index for group, used to adjust the drawing order.
visible	Boolean	visible or hidden
className	String	mark of the object, specified by users

Example:

const group = new F2.G.Group();

Methods

getChildren()

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

isDestroyed()

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

isVisible()

/**
 * Wether the current group object is visible.
 * @return {Boolean}
 */
isVisible()

isGroup()

/**
 * If true, the current object is a group object.
 * @return {Boolean}
 */
isGroup()

addShape(type, config)

/**
 * Create a shape and add it to group
 * @param {String} type Type of shape to create and add
 * @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 group
 * @param {Array||Group||Shape} Items can be a shape instance, a group instance, a shape array or a group array
 * @return {Group}
 */
add(items)

contain(item)

/**
 * Wether current grop 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 {Group}
 */
sort()

getBBox()

/**
 * Get the minimum bounding box of the current group
 * @return {Object}
 */
getBBox()

The bounding box returned has the following structure:

{
  minX: 39.17999267578125, 
  minY: 52.131654999999995,
  maxX: 211,
  maxY: 116.58097999999998,
  width: 171.82000732421875,
  height: 64.44932499999999
}

getParent()

/**
 * Get the parent element
 * @return {Group || Canvas} The parent element of the current object, may be a group object or canvas object
 */
getParent()

show()

/**
 * Display the group
 */
show()

hide()

/**
 * Hide the group
 */
hide()

get(name)

/**
 * Get the attribute from group 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)

getMatrix()

/**
  * Get the current matrix
  * @return {Array}
  */
getMatrix() 

setMatrix(m)

/**
 * Set matrix
 * @param {Array} m Matrix array
 */
setMatrix(m)

transform(actions)

Perform matrix transformation on the current object.

transform(actions) // actions is an array containing the set of operations

The operations supported in actions are 't' (translate), 's' (scale), 'r' (rotate), operations can be combined in any combination order. For example:

[
  [ 't', x, y ], // t for translate, x for offset on x-axis direction, y for offset in y-axis direction
  [ 's', sx, sy ], // s for scale, sx for scale on x-axis direction, sy for scale on y-axis direction
  [ 'r', radian] // r for rotate，radian for the radians of the rotation
]

translate(x, y)

/**
 * Translate the current element
 * @param  {Number} x Offset in x-axis direction
 * @param  {Number} y Offset in y-axis direction
 */
translate(x, y)

rotate(radians)

/**
 * Rotate the current element
 * @param  {Number} radian The radians of the rotation
 */
rotate(radian)

scale(sx, sy)

/**
 * Perform scale operation on current object
 * @param  {Number} sx The scale on x-axis direction
 * @param  {Number} sy The scale on y-axis direction
 */
scale(sx, sy)

setTransform(actions)

Do translating, rotating and scaling operations after resetting the matrix.

setTransform(actions) // actions is an array containing operations

The actions parameter is same as the parameter in transform(actions).

clear()

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

remove(destroy)

/**
 * Remove item itself from its parent
 * @param  {Boolean} destroy true means to destroy iteself after removing, false means just remove but not destroy.
 * @return {null}
 */
remove(destroy)

destroy()

Destroy the element itself, if it has a parent, remove it from parent.