All Components
Components

Components / React / Drawing

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

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.

import { 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);
}


import React from 'react';
import ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import { drawScene } from './draw-scene';

class App extends React.Component {
    surface;
    componentDidMount() {
        drawScene(this.createSurface());
    }
    createSurface = () => {
        const element = ReactDOM.findDOMNode(this);

        this.surface = Surface.create(element);

        return this.surface;
    }
    render() {
        return (<div id="surface" />);
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-drawing

  2. Once installed, import the necessary types:

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

Dependencies

The Drawing package has no external dependencies.

Functionality and Features

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

In this article