GraphicJS Basics
Overview
As you may have learned from GraphicsJS Overview, GraphicJS is a JavaScript graphics library which includes an intuitive graphics API, Virtual DOM, and SVG/VML renderers.
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
If you have already used AnyChart html5 charting solution or explored samples in AnyChart Documentation articles or AnyChart PlayGround, you might have noticed the code like this:
// set stage
var stage = anychart.graphics.create('container');
or like this:
table.getCell(14,1).content().textWrap(anychart.graphics.vector.Text.TextWrap.NO_WRAP);
These lines mean that the usage of anychart.graphics takes place in this or that sample. What is this anychart.graphics once again?
anychart.graphics is the JavaScript drawing library AnyChart 7+ is build upon, and it is integrated in AnyChart, the library does everything in terms of rendering and display. All charts are based on this library. It is not necessary to know how it works to use AnyChart charts, but if you want to use options like drawing custom markers, create complicated dashboards or pattern fills, you should deal with some methods and techniques from GraphicsJS.
Basics
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);
There are a lot of shapes and predefined paths in GraphicsJS: see Shapes and Paths articles for more.
Path
Building the path
To draw a custom complicated shapes use the path() method. Don't forget to check Shapes article, GraphicsJS has several built-in primitives, like star() or cross().
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 a several drawing methods, like arcTo() or curveTo(), learn more about learn more about them in Paths article or GraphicsJS Path Class API.
Coloring
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);
Visit the Fill or the Stroke Guide to learn more about coloring.
Layers
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:
There are far much more settings to fix with the text elements. You can find all of them in Text and Fonts article and in GraphicsJS Text Class API.