Skip to main content

Container

new Konva.Container(config)

Container constructor.  Containers are used to contain nodes or other containers

Parameters​

NameTypeDescription
configObject
x (optional)Number
y (optional)Number
width (optional)Number
height (optional)Number
visible (optional)Boolean
listening (optional)Booleanwhether or not the node is listening for events
id (optional)Stringunique id
name (optional)Stringnon-unique name
opacity (optional)Numberdetermines node opacity. Can be any number between 0 and 1
scale (optional)Objectset scale
scaleX (optional)Numberset scale x
scaleY (optional)Numberset scale y
rotation (optional)Numberrotation in degrees
offset (optional)Objectoffset from center point and rotation point
offsetX (optional)Numberset offset x
offsetY (optional)Numberset offset y
draggable (optional)Booleanmakes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance (optional)Number
dragBoundFunc (optional)function* @param {Object} [config.clip] set clip
clipX (optional)Numberset clip x
clipY (optional)Numberset clip y
clipWidth (optional)Numberset clip width
clipHeight (optional)Numberset clip height
clipFunc (optional)functionset clip func

Inherited from: Konva.Node

Own Methods​

getChildren(filterFunc)​

returns an array of direct descendant nodes

Parameters:

  • filterFunc (function) (optional): filter function

Returns: Array

Example:

// get all children
var children = layer.getChildren();

// get only circles
var circles = layer.getChildren(function(node){
   return node.getClassName() === 'Circle';
});

hasChildren()​

determine if node has children

Returns: Boolean

removeChildren()​

remove all children. Children will be still in memory. If you want to completely destroy all children please use "destroyChildren" method instead

destroyChildren()​

destroy all children nodes.

add(children)​

add a child and children into container

Parameters:

  • children (Konva.Node)

Returns: Container

Example:

layer.add(rect);
layer.add(shape1, shape2, shape3);
// empty arrays are accepted, though each individual child must be defined
layer.add(...shapes);

find(selector)​

return an array of nodes that match the selector. You can provide a string with '#' for id selections and '.' for name selections. Or a function that will return true/false when a node is passed through. See example below. With strings you can also select by type or class name. Pass multiple selectors separated by a comma.

Parameters:

  • selector (String|function)

Returns: Array

Example:

Passing a string as a selector
// select node with id foo
var node = stage.find('#foo');

// select nodes with name bar inside layer
var nodes = layer.find('.bar');

// select all groups inside layer
var nodes = layer.find('Group');

// select all rectangles inside layer
var nodes = layer.find('Rect');

// select node with an id of foo or a name of bar inside layer
var nodes = layer.find('#foo, .bar');

Passing a function as a selector

// get all groups with a function
var groups = stage.find(node => {
 return node.getType() === 'Group';
});

// get only Nodes with partial opacity
var alphaNodes = layer.find(node => {
 return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
});

findOne(selector)​

return a first node from find method

Parameters:

  • selector (String|function)

Returns: Konva.Node|Undefined

Example:

// select node with id foo
var node = stage.findOne('#foo');

// select node with name bar inside layer
var nodes = layer.findOne('.bar');

// select the first node to return true in a function
var node = stage.findOne(node => {
 return node.getType() === 'Shape'
})

isAncestorOf(node)​

determine if node is an ancestor of descendant

Parameters:

  • node (Konva.Node)

getAllIntersections(pos)​

get all shapes that intersect a point. Note: because this method must clear a temporary canvas and redraw every shape inside the container, it should only be used for special situations because it performs very poorly. Please use the Konva.Stage#getIntersection method if at all possible because it performs much better nodes with listening set to false will not be detected

Parameters:

  • pos (Object)
  • pos.x (Number)
  • pos.y (Number)

Returns: Array array of shapes

clip(clip)​

get/set clip

Parameters:

  • clip (Object)
  • clip.x (Number)
  • clip.y (Number)
  • clip.width (Number)
  • clip.height (Number)

Returns: Object

Example:

// get clip
var clip = container.clip();

// set clip
container.clip({
  x: 20,
  y: 20,
  width: 20,
  height: 20
});

clipX(x)​

get/set clip x

Parameters:

  • x (Number)

Returns: Number

Example:

// get clip x
var clipX = container.clipX();

// set clip x
container.clipX(10);

clipY(y)​

get/set clip y

Parameters:

  • y (Number)

Returns: Number

Example:

// get clip y
var clipY = container.clipY();

// set clip y
container.clipY(10);

clipWidth(width)​

get/set clip width

Parameters:

  • width (Number)

Returns: Number

Example:

// get clip width
var clipWidth = container.clipWidth();

// set clip width
container.clipWidth(100);

clipHeight(height)​

get/set clip height

Parameters:

  • height (Number)

Returns: Number

Example:

// get clip height
var clipHeight = container.clipHeight();

// set clip height
container.clipHeight(100);

clipFunc(function)​

get/set clip function

Parameters:

  • function (function)

Returns: function

Example:

// get clip function
var clipFunction = container.clipFunc();

// set clip function
container.clipFunc(function(ctx) {
  ctx.rect(0, 0, 100, 100);
});

container.clipFunc(function(ctx) {
  // optionally return a clip Path2D and clip-rule or just the clip-rule
  return [new Path2D('M0 0v50h50Z'), 'evenodd']
});

Inherited Methods​

Konva.Container also has all methods of its parent classes. Each link below opens the full documentation of the method on the class that defines it.

From Konva.Node​