Basic Shapes
The Drawing library provides a set of built-in basic shapes for constructing scenes.
Getting Started
The following example demonstrates the complete implementation for rendering a static scene. In terms of the Drawing API, this scene consists of a path
(the border), text
, and image
.
Constructing the Sample Scene
To replicate the static scene from the previous example and add an enclosing group for positioning:
- Import the types
- Draw the path
- Draw the image
- Draw the text
- Draw the gradient
- Group the shapes
- Create the surface
- Render the scene
Importing the Types
The main entry point rest of the types are exported in the main @progress/kendo-drawing
module. The sample project uses the Path
, Image
, and Group
elements. The geometry
namespace contains geometric primitives and helpers, such as Point
, Rect
, and Size
.
The following example demonstrates how to use the classes from the two namespaces.
import { geometry, Image, Surface, Path, Text, Group } from '@progress/kendo-drawing';
const { Rect, Point, Size, transform } = geometry;
Drawing the Path
To draw straight lines, curves, or a combination of both, use the Path
element.
Set the stroke (line) color and width to match the picture. The constructor accepts the
ShapeOptions
object that controls the appearance of the shape.const path = new Path({ stroke: { color: "#9999b6", width: 2 } });
Set the initial position of the line by using the
moveTo
command. To draw the three sides, use thelineTo
command. The lastclose
command closes the path and draws a straight line to the initial position.path.moveTo(0, 0) .lineTo(150, 0).lineTo(150, 65).lineTo(0, 65) .close();
Alternatively, you can also use the static
fromRect
method because the figure from the example is a rectangle.const borderRect = new Rect( new Point(0, 0), new Size(150, 65) ); const path = Path.fromRect(borderRect, { stroke: { color: "#9999b6", width: 2 } });
Drawing the Image
To draw an image, use the Image
element which draws a bitmap image from a given URL.
Define the position and size of the image as a
Rect
element.const imageRect = new Rect( new Point(5, 5), new Size(50, 50) );
(Optional) Shorten the previous code statement.
Each method that expects
Point
andSize
also accepts[x, y]
and[width, height]
arrays.const imageRect = new geom.Rect([5, 5], [50, 50]);
Create the image.
const image = new Image('../assets/diego.jpg', imageRect);
Drawing the Text
To draw the text, use the Text
element which draws a single line of text. Appearance options, such as the font, are set through options
. The Point
configuration defines the position of the top-left corner.
const text = new Text(
'Diego Roel',
new Point(60, 25),
{ font: 'bold 15px Arial' }
);
Drawing the Gradient
To add a gradient color to the background, use the Gradient
and LinearGradient
classes.
Grouping the Shapes
It is convenient to treat a group of shapes as a single entity. To set the position of all elements at once, use the group
constructor.
Create a
Group
element and append the rest of the elements as children.const group = new Group(); group.append(path, image, text);
Set the transformation which applies to all group children—to effectively make the coordinates of the element relative, translate their parent group.
group.transform( transform().translate(50, 50) );
Creating the Surface
To create the surface, use the Surface.create
method which chooses an implementation that matches the capabilities of the browser. The default output is an SVG with a fallback to Canvas.
The following example demonstrates how to apply Surface.create
. The surface is created in the AppComponent.
// Obtain a reference to the native DOM element of the wrapper
const element = this.surfaceElement.nativeElement;
// Create a drawing surface
this.surface = Surface.create(element);
Rendering the Scene
To render the scene, use the draw
method of the surface which appends shapes to the scene graph.
surface.draw(group);