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