- Note to AnyChart Users
- Basic shapes and primitives
- Text and image
In this article we will try to give an overview of GraphicsJS capabilities and go slightly far than GraphicsJS Quick Start article does.
Note to AnyChart Users
// set stage var stage = anychart.graphics.create('container');
or like this:
These lines mean that the usage of anychart.graphics takes place in this or that sample. What is this anychart.graphics once again?
Everything is drawn on a stage. To create the stage use the create() method:
var stage = anychart.graphics.create('container');
This creates a stage with the width and height of the container. To create a new stage of 800px in width and 600px in height add width and height parameters:
var stage = anychart.graphics.create('container', 800, 600);
Note that the stage coordinate system starts in the left top corner.
Basic shapes and primitives
On a stage, you can draw anything using simple shapes, such as rectangles, ellipses, starts and more, lines, Text, and more. Let's draw a simple picture: put a "ball" into the "box" using circle() and rect() methods:
// draw a circle stage.circle(200, 250, 100); // draw a square stage.rect(25, 50, 350, 300);
Building the path
But path() allows you to draw any shape. Let's draw a triangle outside of the circle and a line inside the triangle:
// draw a triangle stage.path().moveTo(25, 350) .lineTo(200, 50) .lineTo(375, 350) .close(); // draw a wand in the middle stage.path().moveTo(200,50) .lineTo(200,350);
As you can see, moveTo() function is used to define the starting point of a drawing. To draw a line to the next point the lineTo() method is used. To define that the particular drawing is finished the close() method is used.
There are several ways of coloring the shapes and lines. To change the color of the stroke set the color as a parameter of stroke(). The same with filling the shapes: use fill() methid to set the color. Let's make the stroke red and fill the shapes with different colors. Note that all shapes are transparent by default being filled, so when color is set we need to define the order of the shapes. For this we use zIndex().
//draw the circle stage.circle(200, 250, 100) .stroke('red') .zIndex(2) .fill(['gold', 'white'],30);
To create anything more complex than a bunch of lines and shapes you should use Layers, for example, if we want to show a pseudo-3D picture with a cube, cylinder and a hexagonal prism and make a realistic pseudo-3D we should not only color and position the figures correctly, but put some lights and shades together too. In terms of logic - working with layers is pretty similar to working with groups and layers in Photoshop or Illustrator.
One 3D figure may contain several shapes created using primitives or paths. Layers allow as to group, control and transform several elements at once. Using layers makes it really easy to operate with groups of elements, when you need to possible to transform, remove or add a plenty of elements - don't draw everything on a stage directly, Layers is the way to go.
Layers are transparent by default, have no bounds and can be created as many times as necessary:
// create several layers in a stage var layer_cube = stage.layer(); // cube layer var layer_cylinder = stage.layer(); // cylinder layer var layer_prism = stage.layer(); // hexagonal prism layer var layer_main_shadow = stage.layer(); // shadow layer
And here is a sample with all these shapes and layers:
Layers can be transformed. For example, in the sample above the translate() method is used to change the layers' position, the rotate() method to rotate and scale(), if we need to scale it in some way.
It's possible to add and remove elements on a layer separately using its names or indexes. Use the addChild() method to add an element to a stage or layer by its name if you have already created it using the AnyChart constructor.
The similar method addChildAt() will allow you to put the new element between the existing layers or behind them by defining not only the name but the index for this element.
The same thing is with removing elements. We use remove() to remove the element. As layers are elements themselves, so they can be put one into another.
In the example above 5 different layers are used to build each figure and its shadows on each layer. Now if any layer is removed, it will look like we've removed a figure.
Let's use the remove() method to remove the cylinder with its shadow.
//remove the cylinder layer layer_cylinder.remove();
The situation would be different if we decided to remove the cube also. In this case we should have used the remove() method to get rid of the big shadow under all objects which is situated on the separate layer.
// remove the cylinder layer layer_cylinder.remove(); // remove the cube and shadows layer_cube.remove(); layer_main_shadow.remove(); layer_5.removeChild(cube_shadow_prism);
Text and image
On a stage you can create any comments, titles or other labels that you need. The difference between charts' text and text on a stage is that the second one is considered as an element, just like any shape in it. The sample below demonstrates the process of creation and adjusting a simple piece of text.
//create the text element var textElement = stage.text(); textElement.x(30); textElement.y(375); textElement.text('The Deathly Hallows'); textElement.fontSize(30); textElement.fontWeight('bold'); textElement.color('red');
That's how the sample will look like with our added text element: