All Components
Components

Components / React / Drawing

Drawing Overview

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

The library is designed to serve as a foundation and extension point for the Kendo UI data visualization components. It offers a simple object model for building and manipulating visual scenes. The scenes can be rendered as SVG and PDF documents, Canvas elements, and PNG images.

The Drawing package is platform-agnostic and can be used in any type of application.

Basic Usage

The following example demonstrates the Drawing library in action.

import { Surface, Path, Text, Group } from '@progress/kendo-drawing';
import { transform } from '@progress/kendo-drawing/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 } from '@progress/drawing';
import { Point } from '@progress/drawing/geometry';

Dependencies

The Drawing package has no external dependencies.

In this article