@progress/kendo-drawing

Kendo UI Drawing API

This repository contains the source code and documentation of the Kendo UI Drawing package.

It is a cross-browser vector graphics library. It offers a simple object model for building and manipulating visual scenes.

Basic Usage

You build a scene by creating drawing elements such as curves, images, and text. Scene elements are live and respond to changes of their appearance and geometry.

A drawing surface is used to render scenes on and off screen. Surfaces encapsulate specific browser technologies such as SVG or Canvas.

To draw a visual scene, add a HTML element to the page that will serve as the surface container:

    <div id="container" style="position: relative; width: 600px; height: 400px;"></div>

create the drawing shapes that build the scene:

    import { geometry as geom } from '@progress/kendo-drawing';
    import { drawing as draw } from '@progress/kendo-drawing';

    const geometry = new geom.Circle([100, 100], 100);
    const circle = new draw.Circle(geometry);

create the surface and draw the shapes:

    const surface = draw.Surface.create(document.getElementById("container"));

    surface.draw(circle);

Installation

The Drawing API is published as a scoped NPM package in the NPMJS Telerik account.

Install it using NPM.

npm install --save '@telerik/kendo-drawing';

Once installed, import the drawing and geometry elements that you require.

// ES2015 module syntax
import { Circle, Surface } from '@telerik/kendo-drawing/drawing';
//or
import { Point, Circle as GeometryCircle } from '@telerik/kendo-drawing/geometry';

// CommonJS format
var drawing = require('@telerik/kendo-drawing').drawing;
//or
var geometry = require('@telerik/kendo-drawing').geometry;

To install the npm package, it is recommended that you use Node.js 5.0.0 or later versions.

Browser Support

• Google Chrome
• Firefox
• Safari (OS X)
• Safari (iOS)
• Chrome (Android)
• IE(9+)/Edge