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
-
Download and install the package:
npm install --save @progress/kendo-drawing
-
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
- 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.