GraphicsJS Path
Overview
Path is sequence of segments of different type, it can be opened or closed. To define the how to fill the shape created by a path the EVEN-ODD rule is used. Path always starts with moveTo() command.
GraphicsJS has one the most powerful line drawing features among SVG/VML based graphics libraries that provide only Bezier curves out of the box. GraphicsJS is great at working with mathematical functions. As a result, GraphicsJS allows you to draw not only Bezier curves out of the box, but literally anything; for example, you can draw some arc very quickly, whereas other graphics libraries will make you arrange it through numerous different curves. There are also basic shapes available.
Creating
Do not invoke class constructor directly. Use stage.path(), layer.path() or anychart.graphics.path() instead:
Methods
| Method | Description |
|---|---|
| moveTo() | Moves path cursor position to a specified coordinate. |
| close() | Adds a command that closes the path by connecting the last point with the first straight line. |
| clear() | Resets all path operations. |
| getCurrentPoint() | Returns the last coordinates added to the path. |
| arcTo() | Adds a command to the path that draws an arc of an ellipse. |
| arcToAsCurves() | This method is similar to anychart.graphics.vector.Path#arcTo, but in this case the arc is approximated by Bezier curves. |
| arcToByEndPoint() | Adds a command to the path that draws an arc of an ellipse. |
| circularArc() | Adds a command to the path that draws a circular arc. |
| curveTo() | Adds specified points to the path, drawing sequentially a cubic Bezier curve from the current point to the next. |
| lineTo() | Adds specified points to the current path, drawing sequentially a straight line through the specified coordinates. |
| quadraticCurveTo() | Adds specified points to the path, drawing sequentially a quadratic Bezier curve from the current point to the next. |
Here is a sample code that shows how to create a closed shape using a path, and fill it with a hatch fill:
stage = anychart.graphics.create("container");
var linePath = stage.path();
// starting point
linePath.moveTo(200, 100);
// Add commands to the path
linePath.arcToByEndPoint(300, 100, 250, 50, true, true);
linePath.lineTo(250, 50);
// make the path a closed shape
linePath.close();
// fill with a pattern fill
linePath.fill(stage.hatchFill("backwardDiagonal", "#2196F3 0.9", 1));
Here is a sample code that shows how to create an open line using a path, and make its stroke dashed:
stage = anychart.graphics.create("container");
var linePath = stage.path();
// starting point
linePath.moveTo(200, 100);
// Add commands to the path
linePath.arcToByEndPoint(300, 100, 250, 50, true, true);
linePath.lineTo(250, 50);
linePath.arcToByEndPoint(180, 50, 10, 10, true, true);
// dash stroke and color a path
linePath.stroke({color: "#2196F3"}, 2, "10 12", "round", "round");