Drawing Overview

The Drawing package provides a cross-browser library for interactive vector graphics.

The Drawing library:

• Serves as a base for the Kendo UI data visualization components—for example, the Charts.
• Offers a low-level API—a simple object model for building and manipulating visual scenes which can be rendered as SVG and PDF documents, Canvas elements, and PNG images.
• Is platform-agnostic—can be used in any type of application.

Basic Usage

The following example demonstrates the Drawing library in action.

Copy Codeimport { Surface, Path, Text, Group, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

export function drawScene(surface) {
    // Create a path and draw a straight line
    const path = new Path({
        stroke: {
            color: `#9999b6`,
            width: 2
        }
    });

    path.moveTo(0, 50).lineTo(200, 50).close();

    // Create the text
    const text = new Text(`Hello World!`, [20, 25], {
        font: `bold 15px Arial`
    });

    // Place all the shapes in a group
    const group = new Group();
    group.append(path, text);

    // Rotate the group
    group.transform(
        transform().rotate(-20, [150, 25])
    );

    // Render the group on the surface
    surface.draw(group);
}

Installation

1. Download and install the package:

   Copy Codenpm install --save @progress/kendo-drawing

2. Once installed, import the necessary types:

   Copy Codeimport { Text, geometry } from '@progress/drawing';
   const { Point } = geometry;

Dependencies

The Drawing package has no external dependencies.

Functionality and Features

• Drawing basic shapes
• Drawing DOM elements
• Exporting content to PDF
• Exporting drawings to images
• Exporting drawings to SVG
• Displaying tooltips for shapes

To export images in PDF, use the PDF Processing component.

Suggested Links

• API Reference of the Drawing Library
• Limitations and Browser Support of the Drawing Library and the PDF Export Component