All Components

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: 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 { Component, ElementRef, ViewChild } from '@angular/core';
import { AfterViewInit, OnDestroy } from '@angular/core';
import { Surface } from '@progress/kendo-drawing';

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

@Component({
  selector: 'my-app',
  template: `
      <div #surface></div>
  `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('surface')
  private surfaceElement: ElementRef;
  private surface: Surface;

  public ngAfterViewInit(): void {
    drawScene(this.createSurface());
  }

  public ngOnDestroy() {
    this.surface.destroy();
  }

  private createSurface(): Surface {
    // Obtain a reference to the native DOM element of the wrapper
    const element = this.surfaceElement.nativeElement;

    // Create a drawing surface
    this.surface = Surface.create(element);

    return this.surface;
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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 Export component.

In this article