All Components

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 has no dependency on Angular 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: 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 { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

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

export class AppModule { }

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 } from '@progress/drawing';
    import { Point } from '@progress/drawing/geometry';

Dependencies

The Drawing package has no external dependencies.

In this article