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.

Change Theme

Theme

Loading ...

Constructing the Sample Scene

To replicate the static scene from the previous example and add an enclosing group for positioning:

1. Import the types
2. Draw the path
3. Draw the image
4. Draw the text
5. Draw the gradient
6. Group the shapes
7. Create the surface
8. 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.

ts

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.

1. Set the stroke (line) color and width to match the picture. The constructor accepts the ShapeOptions object that controls the appearance of the shape.

   ts

   const path = new Path({
       stroke: {
           color: "#9999b6",
           width: 2,
       },
   });

2. Set the initial position of the line by using the moveTo command. To draw the three sides, use the lineTo command. The last close command closes the path and draws a straight line to the initial position.

   ts

   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.

   ts

   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.

1. Define the position and size of the image as a Rect element.

   ts

   const imageRect = new Rect(new Point(5, 5), new Size(50, 50));

2. (Optional) Shorten the previous code statement.

   Each method that expects Point and Size also accepts [x, y] and [width, height] arrays.

   ts

   const imageRect = new geom.Rect([5, 5], [50, 50]);

3. Create the image.

   ts

   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.

ts

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.

Change Theme

Theme

Loading ...

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.

1. Create a Group element and append the rest of the elements as children.

   ts

   const group = new Group();
   group.append(path, image, text);

2. Set the transformation which applies to all group children—to effectively make the coordinates of the element relative, translate their parent group.

   ts

   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.

ts

// 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.

ts

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.

ts

surface.bind("click", (args: SurfaceEvent) => {
    console.log("Click event", args);
});

The following example demonstrates how to attach a click event to the surface and change the color of the clicked element.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Drawing Library