GraphicsJS Layers

• Overview
• Creating and Managing
• Transformation
• Clipping and Bounds
• zIndex

Overview

Layer is an object used to group elements in GraphicsJS. Elements must be grouped if you want to apply similar changes to them, transformation and alike. You can change layers in suspended mode, increasing performance and improving user experience.

Layers are transparent, by default they have no bounds (which can be changed using clip() method) and you can create as many layers as necessary, including nested layers (using addChild() method).

Some basic samples of working with layers can be found in the Basics: Layers article.

Creating and Managing

Layers can be created using:

• stage.layer() method to create stage bound layer.
• anychart.graphics.layer() method to create an unbound layer.

To remove a layer use:

• remove() method.

To add new elements to a layer use:

• addChild() or addChildAt() methods in case of appending unbound elements,
• or use layer.rect(), layer.circle(), layer.path(), and others to create elements directly in a layer.

Do not forget you can suspend and resume rendering while changing layers or elements within layers.

Transformation

Using layers makes it easier to operate with groups of elements. It's possible to transform them as a whole instead of working with each shape, path and element separately. See Transformation article.

Clipping and Bounds

By default each layer has no bounds and spans across the parent, you can change bounds of a layer using clip() method, clipping can be of any custom shape.

zIndex

You can swap layers using swapChildren() or swapChildrenAt() methods of a parent, or by changing zIndex using zIndex() method.