Top
You are looking at an outdated 7.5.0 version of this document. Switch to the 7.14.3 version to see the up to date information.

class anychart.graphics.vector.Stage Improve this Doc

This class provide tools for cross-browser display with the single interface for both (SVG and VML). Do not invoke constructor directly. Use anychart.graphics.create.

Note:
anychart.graphics.vector.Stage delegates all work with DOM elements, style and attributes to its renderer. You can get renderer using getRenderer method.
Note: Renderer is a singleton must not contain own fields.

Rendering:
anychart.graphics.vector.Stage has the rootLayer_ private field of Layer type. All layers and elements you add to a stage go there, so rendering and other stuff happens when this layer is rendered.

Methods Overview

Miscellaneous
addChild()Adds element.
addChildAt()Adds element by index.
appendTransformationMatrix()Combines current transformation with another. Combination is done by
circle()Invokes anychart.graphics.vector.Circle constructor.
clip()Clips a stage.
container()Returns DOM element where everything is drawn upon rendering.
createClip()Creates a clip element using single value.
data()Deserializes JSON object - objects are created and rendered to the stage.
domElement()Returns stage root DOM element.
ellipse()Invokes anychart.graphics.vector.Ellipse constructor.
forEachChild()Applies function to all children.
getBounds()Returns bounds.
getChildAt()Returns element by index.
getCoordinate()Returns coordinates of top left corner.
getRotationAngle()Returns rotation angle in degrees.
getSize()Returns size.
getStage()Returns self. We need this method to sync layer and stage api.
getTransformationMatrix()Returns current transformation matrix: [
getX()Returns X of top left corner.
getY()Returns Y of top left corner.
hasChild()Similar to anychart.graphics.vector.Layer#hasChild
hatchFill()Invokes anychart.graphics.vector.HatchFillconstructor, if there is no such hatchfill in defs. If it already exist - returns an instance.
height()If opt_value defined then it will be set as stage height else returns current stage height.
html()Invokes anychart.graphics.vector.Text and applies anychart.graphics.vector.Text#htmlText to parse HTML.
id()Gets stage identifier. If it was not set, than it will be generated.
image()Invokes anychart.graphics.vector.Image constructor.
indexOfChild()Returns index of a child.
isRendering()Indicates if stage is in rendering process.
isSuspended()Returns rendering state (true - suspended, false - instant
layer()Invokes anychart.graphics.vector.Layer constructor.
numChildren()Similar to anychart.graphics.vector.Layer#numChildren
parent()Returns self. We need this method to sync layer and stage api.
path()Invokes anychart.graphics.vector.Path constructor.
pattern()Invokes anychart.graphics.vector.PatternFill constructor.
print()Print stage.
rect()Invokes anychart.graphics.vector.Rect constructor.
remove()Removes everything.
removeChild()Removes element.
removeChildAt()Removes element by index.
removeChildren()Removes all elements.
resize()Stage resize. Anything drawn on stage must fit in it
resume()Removes Suspend state and applies all changes in sync (if any).
resumeAsync()Removes Suspend state and applies all changes in async (if any).
rotate()Rotates root layer.
rotateByAnchor()Rotates root layer around an anchor.
saveAsJPG()Save stage as jpg file.
saveAsPDF()Save stage as pdf file.
saveAsPNG()Save stage as png file.
saveAsSVG()Save stage as svg file.
scale()Scales root layer in parent coordinates system. Scaling center is set in the parent system too.
scaleByAnchor()Scales root layer in parent coordinates system. Scaling center is set
setPosition()Sets top left corner coordinates of root layer (with transformation,
setRotation()Rotates root layer around a point.
setRotationByAnchor()Rotates root layer around an anchor.
setTransformationMatrix()Sets transformation matrix.
suspend()Suspends rendering (changes instant to suspended).
swapChildren()Swaps two children.
swapChildrenAt()Swaps two children.
text()Invokes anychart.graphics.vector.Text constructor.
translate()Moves root layer taking transformation into account.
visible()Returns stage visibility.
width()If opt_value defined then it will be set as stage width else returns current stage width.

Methods Description

addChild

Adds element.
Similar to anychart.graphics.vector.Layer#addChild

Params:

Name Type Description
element anychart.graphics.vector.Element Element.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

addChildAt

Adds element by index.
Similar to anychart.graphics.vector.Layer#addChildAt

Params:

Name Type Description
element anychart.graphics.vector.Element Element.
index number Child index.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

appendTransformationMatrix

Combines current transformation with another. Combination is done by multiplying matrix to the right.
Read more at: anychart.graphics.vector.Element#appendTransformationMatrix.

Params:

Name Type Description
m00 number Scale X.
m10 number Shear Y.
m01 number Shear X.
m11 number Scale Y.
m02 number Translate X.
m12 number Translate Y.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

circle

Invokes anychart.graphics.vector.Circle constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.Circle

Params:

Name Type Description
cx number Center X, in pixels.
cy number Center Y, in pixels.
radius number Radius, in pixels.

Returns:

anychart.graphics.vector.Circle - An instance of class for method chaining.

Try it:

clip

Clips a stage. Works only after render() is invoked.
Read more at: anychart.graphics.vector.Element#clip.

Params:

Name Type Description
value anychart.graphics.math.Rect Clipping rectangle.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining. or anychart.graphics.math.rect clipping rectangle.
Get clip bounds. Works only after render() is invoked.
Read more at: anychart.graphics.vector.Element#clip.

Returns:

anychart.graphics.math.Rect - Clipping rectangle.

container

Returns DOM element where everything is drawn upon rendering.

Returns:

Element - Returns DOM element of graphics container.
Sets DOM element where everything is drawn upon rendering. If method is invoked after rendering and new container is set then upon next draw DOM element will move to the new container.

Params:

Name Type Description
value Element Container DOM element.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

createClip

Creates a clip element using single value.

Params:

Name Type Description
rect Array.<number> | anychart.graphics.math.Rect | Object | null Rect or array or object representing bounds.

Returns:

anychart.graphics.vector.Clip - Clip element.

Try it:

Creates a clip element using several value.

Params:

Name Type Description
left number Left coordinate of bounds.
top number Top coordinate.
width number Width of the rect.
height number Height of the rect.

Returns:

anychart.graphics.vector.Clip - Clip element.

Try it:

data

Returns Stage JSON. Serializes stage and all its object in JSON.

Returns:

Object - JSON data of stage.
Deserialize JSON - objects are created and rendered to the current stage.
Note: All seetings except events and handlers are serialized. JSON object must be conformed with JSON schema (can be found in the project root). No checks are done when we deserialize - JSON schema does this. JSON schema is created in 4-th version of standard JSON schema.

Params:

Name Type Description
value Object JSON data to set for stage.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

domElement

Returns stage root DOM element.

Returns:

Element - Stage root DOM element.

ellipse

Invokes anychart.graphics.vector.Ellipse constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.Ellipse

Params:

Name Type Description
cx number Center X, in pixels.
cy number Center Y, in pixels.
rx number X radius, in pixels.
ry number Y raduis, in pixels.

Returns:

anychart.graphics.vector.Ellipse - An instance of class for method chaining.

Try it:

forEachChild

Applies function to all children. Similar to anychart.graphics.vector.Layer#forEachChild

Params:

Name Type Description
callback function Callback.
this Object This element.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

getBounds

Returns bounds.

Returns:

anychart.graphics.math.Rect - Bounds.

getChildAt

Returns element by index.
Similar to anychart.graphics.vector.Layer#getChildAt

Params:

Name Type Description
index number Child index.

Returns:

anychart.graphics.vector.Element - Element or null.

getCoordinate

Returns coordinates of top left corner.

Returns:

anychart.graphics.math.Coordinate - Coordinates of top left corner.

getRotationAngle

Returns rotation angle in degrees.
Read more at: anychart.graphics.vector.Element#getRotationAngle.

Returns:

number - Rotation angle.

getSize

Returns size.

Returns:

anychart.graphics.math.Size - Size.

getStage

Returns self. We need this method to sync layer and stage api.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

getTransformationMatrix

Returns current transformation matrix: [ {number} m00 Scale X. {number} m10 Shear Y. {number} m01 Shear X. {number} m11 Scale Y. {number} m02 Translate X. {number} m12 Translate Y. ]
Read more at: anychart.graphics.vector.Element#getTransformationMatrix.

Returns:

Array.<number> - Transformation matrix.

getX

Returns X of top left corner.

Returns:

number - X of top left corner.

getY

Returns Y of top left corner.

Returns:

number - Y of top left corner.

hasChild

Params:

Name Type Description
element anychart.graphics.vector.Element Element to check.

Returns:

boolean - Is there such element in stage or not.

hatchFill

Invokes anychart.graphics.vector.HatchFill constructor, if there is no such hatchfill in defs. If it already exist - returns an instance.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.HatchFill

Params:

Name Type Description
type anychart.graphics.vector.HatchFill.HatchFillType Type of hatch fill.
color string Hatch color COMBINED WITH OPACITY.
thickness number Hatch fill thickness.
size number Hatch fill size.

Returns:

anychart.graphics.vector.HatchFill - An instance of class for method chaining.

Try it:

height

If opt_value defined then it will be set as stage height else returns current stage height. Stage height can be defined as pixel or percent value.

Params:

Name Type Description
value string | number Height of stage.

Returns:

number anychart.graphics.vector.Stage - Height of stage.

html

Invokes anychart.graphics.vector.Text and applies anychart.graphics.vector.Text#htmlText method to parse HTML.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

Name Type Description
x number X-coordinate (Left) of left top corner of text bounds.
y number Y-coordinate (Top) of left top corner of text bounds.
text string Text.
style anychart.graphics.vector.TextStyle Text style. Read more at anychart.graphics.vector.Text#style.

Returns:

anychart.graphics.vector.Text - An instance of class for method chaining.

Try it:

id

Gets stage identifier. If it was not set, than it will be generated.

Returns:

string - Returns element identifier.
Sets stage identifier and instantly applies it to DOM.

Params:

Name Type Description
value string Custom identifier.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

image

Invokes anychart.graphics.vector.Image constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

Name Type Description
src string IRI (Internationalized Resource Identifiers) for image source.
x number X coordinate of left-top corner image.
y number Y coordinate of left-top corner image.
width number Width of image bounds.
height number Height of image bounds.

Returns:

anychart.graphics.vector.Image - Image object instance.

Try it:

indexOfChild

Returns index of a child. Similar to anychart.graphics.vector.Layer#indexOfChild

Params:

Name Type Description
element anychart.graphics.vector.Element Element.

Returns:

number - Index or -1.

isRendering

Indicates if stage is in rendering process.

Returns:

boolean - State of rendering process.

isSuspended

Returns rendering state (true - suspended, false - instant

Returns:

boolean - Rendering state.

layer

Invokes anychart.graphics.vector.Layer constructor
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Returns:

anychart.graphics.vector.Layer - An instance of class for method chaining.

Try it:

numChildren

Returns:

number - Number of stage children.

parent

Returns self. We need this method to sync layer and stage api.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

path

Invokes anychart.graphics.vector.Path constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at Path: anychart.graphics.vector.Path

Returns:

anychart.graphics.vector.Path - An instance of class for method chaining.

Try it:

pattern

Invokes anychart.graphics.vector.PatternFill.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.
Read more at: anychart.graphics.vector.PatternFill

Params:

Name Type Description
bounds anychart.graphics.math.Rect Bounds of pattern. Defines size and offset of pattern.

Returns:

anychart.graphics.vector.PatternFill - An instance of class for method chaining.

Try it:

print

Print stage.

Params:

Name Type Description
paperSize anychart.graphics.vector.PaperSize
landscape boolean

rect

Invokes anychart.graphics.vector.Rect constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

Name Type Description
x number X (Left) coordinate of top-left corner.
y number Y (Top) coordinate of top-left corner.
width number Width.
height number Height.

Returns:

anychart.graphics.vector.Rect - An instance of class for method chaining.

Try it:

remove

Removes everything.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

removeChild

Removes element.
Similar to anychart.graphics.vector.Layer#removeChild

Params:

Name Type Description
element anychart.graphics.vector.Element Element.

Returns:

anychart.graphics.vector.Element - Removed element.

removeChildAt

Removes element by index.
Similar to anychart.graphics.vector.Layer#removeChildAt

Params:

Name Type Description
index number Index.

Returns:

anychart.graphics.vector.Element - Removed element.

removeChildren

Removes all elements.
Similar to anychart.graphics.vector.Layer#removeChildren

Returns:

Array.<anychart.graphics.vector.Element> - Array of removed elements.

resize

Stage resize. Anything drawn on stage must fit in it So any part that doesn't fit will be clipped.

Params:

Name Type Description
width number | string Width.
height number | string Height.

resume

Removes Suspend state and applies all changes in sync (if any).
Read more at anychart.graphics.vector.Stage#suspend.

Returns:

anychart.graphics.vector.Stage - Stage.

resumeAsync

Removes Suspend state and applies all changes in async (if any).
Read more at anychart.graphics.vector.Stage#suspend.
Async rendering must be used when you have a lot of data because it gives a better user experience and allows to render other. elements on the page. The only disadvantage is its speed.

Returns:

anychart.graphics.vector.Stage - Stage.

rotate

Rotates root layer.
Read more at: anychart.graphics.vector.Element#rotate.

Params:

Name Type Description
degrees number Rotation angle.
cx number Rotaion X.
cy number Rotaion Y.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

rotateByAnchor

Rotates root layer around an anchor.
Read more at: anychart.graphics.vector.Element#rotateByAnchor.

Params:

Name Type Description
degrees number Rotation angle.
anchor anychart.graphics.vector.Anchor | string Rotation anchor.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

saveAsJPG

Save stage as jpg file.

Params:

Name Type Description
data string
dataType string
productName string

saveAsPDF

Save stage as pdf file.

Params:

Name Type Description
data string
dataType string
productName string

saveAsPNG

Save stage as png file.

Params:

Name Type Description
data string
dataType string
productName string

saveAsSVG

Save stage as svg file.

Params:

Name Type Description
data string
dataType string
productName string

scale

Scales root layer in parent coordinates system. Scaling center is set in the parent system too.
Read more at: anychart.graphics.vector.Element#scale.

Params:

Name Type Description
sx number Scale Х.
sy number Scale Y.
cx number Scale center Х.
cy number Scale center Y.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

scaleByAnchor

Scales root layer in parent coordinates system. Scaling center is set by root layer anchor.
Read more at: anychart.graphics.vector.Element#scaleByAnchor.

Params:

Name Type Description
sx number Scale Х.
sy number Scale Y.
anchor anychart.graphics.vector.Anchor | string Scaling center anchor.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

setPosition

Sets top left corner coordinates of root layer (with transformation, in parent coordinate system).
Read more at: anychart.graphics.vector.Element#setPosition.

Params:

Name Type Description
x number X of top left corner.
y number Y of top left corner.

Returns:

anychart.graphics.vector.Stage - Returns self for chaining.

setRotation

Rotates root layer around a point.
Read more at: anychart.graphics.vector.Element#setRotation.

Params:

Name Type Description
degrees number Rotation angle.
cx number Rotaion Х.
cy number Rotaion Y.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

setRotationByAnchor

Rotates root layer around an anchor.
Read more at: anychart.graphics.vector.Element#setRotationByAnchor.

Params:

Name Type Description
degrees number Rotation angle.
anchor anychart.graphics.vector.Anchor | string Rotation anchor.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

setTransformationMatrix

Sets transformation matrix.
Read more at: anychart.graphics.vector.Element#setTransformationMatrix.

Params:

Name Type Description
m00 number Scale X.
m10 number Shear Y.
m01 number Shear X.
m11 number Scale Y.
m02 number Translate X.
m12 number Translate Y.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

suspend

Suspends rendering (changes instant to suspended).
When Stage is in this state changes do not affect DOM.
To wake Stage up from this state you need to invoke anychart.graphics.vector.Stage#resume or anychart.graphics.vector.Stage#resumeAsync.
Suspended rendering is much faster than instant, when there are a lot of operations with Stage.

Returns:

anychart.graphics.vector.Stage - Stage.

Try it:

swapChildren

Swaps two children. Similar to anychart.graphics.vector.Layer#swapChildren

Params:

Name Type Description
element1 anychart.graphics.vector.Element First child.
element2 anychart.graphics.vector.Element Second child.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

swapChildrenAt

Swaps two children. Similar to anychart.graphics.vector.Layer#swapChildrenAt

Params:

Name Type Description
index1 number First child or id.
index2 number Second child or id.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

text

Invokes anychart.graphics.vector.Text constructor.
Note:
anychart.graphics.vector.Stage doesn't delete objects you create. You must delete them yourself after you finish using them.

Params:

Name Type Description
x number X-coordinate (Left) of left top corner of text bounds.
y number Y-coordinate (Top) of left top corner of text bounds.
text string Text.
style anychart.graphics.vector.TextStyle Text style. Read more at anychart.graphics.vector.Text#style.

Returns:

anychart.graphics.vector.Text - An instance of class for method chaining.

translate

Moves root layer taking transformation into account. Movement happens in root layer coordinates.
Read more at: anychart.graphics.vector.Element#translate.

Params:

Name Type Description
tx number Х offset.
ty number Y offset.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

visible

Returns stage visibility.

Returns:

boolean - Visibility.
Shows or hides stage.

Params:

Name Type Description
isVisible boolean Visibility.

Returns:

anychart.graphics.vector.Stage - Self instance for method chaining.

width

If opt_value defined then it will be set as stage width else returns current stage width. Stage width can be defined as pixel or percent value.

Params:

Name Type Description
value string | number Width of stage.

Returns:

number anychart.graphics.vector.Stage - Width of stage.