Group

new Konva.Group(config)

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

Parameters

Name	Type	Description
config	Object
isolated (optional)	Boolean	composite children as one live image
x (optional)	Number
y (optional)	Number
width (optional)	Number
height (optional)	Number
visible (optional)	Boolean
listening (optional)	Boolean	whether or not the node is listening for events
id (optional)	String	unique id
name (optional)	String	non-unique name
opacity (optional)	Number	determines node opacity. Can be any number between 0 and 1
scale (optional)	Object	set scale
scaleX (optional)	Number	set scale x
scaleY (optional)	Number	set scale y
rotation (optional)	Number	rotation in degrees
offset (optional)	Object	offset from center point and rotation point
offsetX (optional)	Number	set offset x
offsetY (optional)	Number	set offset y
draggable (optional)	Boolean	makes 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)	Number	set clip x
clipY (optional)	Number	set clip y
clipWidth (optional)	Number	set clip width
clipHeight (optional)	Number	set clip height
clipFunc (optional)	function	set clip func

Inherited from: Konva.Container

Own Methods

isolated(isolated)

Get or set group isolation. Default is false. An isolated group draws its children into a transparent canvas on each scene draw. The group opacity and globalCompositeOperation apply once to the completed image. Child blend modes and erasing affect only the content inside that canvas. Explicit cache() calls keep their snapshot behavior. clearCache() resumes live drawing. Hit testing keeps its normal behavior, including hits on erased content. For video or canvas sources, schedule draws when the source changes. Buffers use conservative content bounds at the destination pixel ratio. Moving the buffer origin changes native edge coverage. A few edge pixels can differ substantially; isolation does not promise pixel-identical antialiasing. Like cache(), isolation requires custom drawing (sceneFunc, charRenderFunc) to provide accurate bounds, including any pixels it paints outside its size: selfRectFunc or a getSelfRect() override. Text is bounded by its lines plus one font size, so a glyph with many stacked marks can be clipped. node-canvas shadows can change with bitmap origin. Siblings reuse a buffer; unused or oversized buffers are freed after each layer draw.

Parameters:

• isolated (Boolean)

Returns: Boolean

Example:

const group = new Konva.Group({ isolated: true, opacity: 0.5 });
group.add(shape1, shape2);
group.isolated(false);

Inherited Methods

Konva.Group 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.Container

• getChildren(filterFunc)
• hasChildren()
• removeChildren()
• destroyChildren()
• add(children)
• find(selector)
• findOne(selector)
• isAncestorOf(node)
• getAllIntersections(pos)
• clip(clip)
• clipX(x)
• clipY(y)
• clipWidth(width)
• clipHeight(height)
• clipFunc(function)

From Konva.Node

• clearCache()
• cache(config)
• isCached()
• getClientRect(config)
• on(evtStr, handler)
• off(evtStr)
• remove()
• destroy()
• getAttr(attr)
• getAncestors()
• getAttrs()
• setAttrs(config)
• isListening()
• isVisible()
• show()
• hide()
• getAbsoluteZIndex()
• getDepth()
• getRelativePointerPosition()
• getAbsolutePosition(top)
• move(change)
• rotate(theta)
• moveToTop()
• moveUp()
• moveDown()
• moveToBottom()
• getAbsoluteOpacity()
• moveTo(newContainer)
• toObject()
• toJSON()
• getParent()
• findAncestors(selector, includeSelf, stopNode)
• findAncestor(selector, includeSelf, stopNode)
• getLayer()
• getStage()
• fire(eventType, evt, bubble)
• getAbsoluteTransform()
• getAbsoluteScale()
• getAbsoluteRotation()
• getTransform()
• clone(obj)
• toCanvas(config)
• toDataURL(config)
• toImage(config)
• toBlob(config)
• getClassName()
• getType()
• addName(name)
• hasName(name)
• removeName(name)
• setAttr(attr, val)
• draw()
• startDrag()
• stopDrag()
• isDragging()
• isClientRectOnScreen(margin)
• zIndex(index)
• absolutePosition(pos)
• position(pos)
• x(x)
• y(y)
• globalCompositeOperation(type)
• opacity(opacity)
• name(name)
• id(id)
• rotation(rotation)
• scale(scale)
• scaleX(x)
• scaleY(y)
• skew(skew)
• skewX(x)
• skewY(y)
• offsetX(x)
• offsetY(y)
• dragDistance(distance)
• width(width)
• height(height)
• listening(listening)
• preventDefault(preventDefault)
• filters(filters)
• visible(visible)
• transformsEnabled(enabled)
• size(size)
• dragBoundFunc(dragBoundFunc)
• draggable(draggable)
• to(params)
• blurRadius(radius)
• brightness(brightness)
• contrast(contrast)
• embossStrength(level)
• embossWhiteLevel(embossWhiteLevel)
• embossDirection(embossDirection)
• embossBlend(embossBlend)
• enhance(amount)
• hue(hue)
• saturation(saturation)
• luminance(value)
• value(value)
• kaleidoscopePower(power)
• kaleidoscopeAngle(degrees)
• noise(noise)
• pixelSize(pixelSize)
• levels(level)
• red(red)
• green(green)
• blue(blue)
• alpha(alpha)
• threshold(threshold)