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.tsconst 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.tspath.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.tsconst 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.tsconst 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.tsconst imageRect = new geom.Rect([5, 5], [50, 50]);
-
Create the image.
tsconst 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.tsconst 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.
tsgroup.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);
Attaching Events to Surface Elements
To attach events to the Surface
, use the bind
method which accepts the event name and a handler function.
surface.bind('click', (args: SurfaceEvent) => {
console.log('Click event', args);
});