All Components
Components

Components / Drawing

Basic Shapes

You can construct scenes by using a set of built-in basic shapes.

In terms of the Drawing API, this scene consists of a path (the violet border), text, and image.

The following example demonstrates the full code required to render the static scene.

import { Image, Surface, Path, Text, Group } from '@progress/kendo-drawing';
import { Rect, Point, Size, transform } from '@progress/kendo-drawing/geometry';

export function drawScene(surface: Surface) {
  // Create the square border by drawing a straight path
  const path = new Path({
    stroke: {
      color: "#9999b6",
      width: 2
    }
  });

  // The path is constructed by using a chain of commands
  path.moveTo(0, 0)
  .lineTo(150, 0).lineTo(150, 65).lineTo(0, 65)
  .close();

  // This rectangle defines the image position and size
  const imageRect = new Rect(
    new Point(5, 5),
    new Size(50, 50)
  );

  // Create the image
  const imageUrl = `http://www.telerik.com/kendo-angular-ui/components/drawing/images/diego.jpg`;
  const image = new Image(imageUrl, imageRect);

  // Create the text
  const text = new Text(
    "Diego Roel",
    new Point(60, 25),
    { font: "bold 15px Arial" }
  );

  // Place all the shapes in a group
  const group = new Group();
  group.append(path, image, text);

  // Translate the group
  group.transform(
    transform().translate(50, 50)
  );

  // 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);

Walkthrough

This section demonstrates how to replicate the static scene from above and add an enclosing group for positioning.

Importing Types

The @progress/kendo-drawing/geometry module contains geometric primitives and helpers, such as Point, Rect, and Size.

The rest of the types are exported in the main @progress/kendo-drawing module. This demo uses the Path, Image, and Group elements.

The following example demonstrates how to import the two namespaces.

import { Image, Surface, Path, Text, Group } from '@progress/kendo-drawing';
import { Rect, Point, Size, transform } from '@progress/kendo-drawing/geometry';

Drawing the Path

To draw straight lines, curves, or a combination of both, use the Path element.

  1. Set the stroke (line) color and width to match the picture, as demonstrated in the following example. The constructor accepts the ShapeOptions object that controls the appearance of the shape.

    const path = new Path({
   stroke: {
       color: "#9999b6",
       width: 2
   }
});

  2. Set the initial position of the line by using a moveTo command. To draw the three sides, use the lineTo commands. The last close command closes the path and draws a straight line to the initial position.

    path.moveTo(0, 0)
   .lineTo(150, 0).lineTo(150, 65).lineTo(0, 65)
   .close();

    Because the figure in this demo is a rectangle, you can also use the alternative fromRect static method.

    const borderRect = new Rect(
   new Point(0, 0),
   new Size(150, 65)
);
const path = Path.fromRect(borderRect, {
   stroke: {
       color: "#9999b6",
       width: 2
   }
});

Drawing the Image

To draw the image, use the Image element. It draws a bitmap image from a given URL. The position and size of the image are defined as a Rect element.

const imageRect = new Rect(
    new Point(5, 5),
    new Size(50, 50)
);

You can shorten the statement from above to the code shown in the following example.

const imageRect = new geom.Rect([5, 5], [50, 50]);

Each method that expects Point and Size also accepts [x, y] and [width, height] arrays.

To create the image, use the code from the following example.

const image = new Image('../images/diego.jpg', imageRect);

Drawing the Text

To draw the text, use the Text element. It draws a single line of text. Appearance options, such as font, are set through options. The Point configuration defines the position of the top-left corner.

const text = new Text(
    'Diego Roel',
    new Point(60, 25),
    { font: 'bold 15px Arial' }
);

Drawing the Gradient

To add a gradient color to the background, use the Gradient and LinearGradient classes.

import { Image, Surface, Path, Text, Group, LinearGradient, GradientStop, Rect } from '@progress/kendo-drawing';
import { Rect as RectGeometry, Point, Size, transform } from '@progress/kendo-drawing/geometry';

export function drawScene(surface: Surface) {
    const gradient = new LinearGradient({
        name: "LG1",
        stops: [
          new GradientStop(0, "gray", 0),
          new GradientStop(0.5, "orange", 0.8)
        ]
    });

  // This rectangle demonstrates how to use the gradient as a fill.
  const rect = new RectGeometry(
    new Point(100, 100),
    new Size(50, 50)
  );

  const drawingRect = new Rect(rect, {
    stroke: {
      color: "#9999b6",
      width: 2
    },
    fill: gradient
  });

  // Place all the shapes in a group.
  const group = new Group();
  group.append(drawingRect);

  // Translate the group.
  group.transform(
    transform().translate(50, 50)
  );

  // 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, {width: 300, height: 300});

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

Grouping the Shapes

It is convenient to treat a group of shapes as a single entity. To set the position of all elements at once, use the group constructor.

To group the shapes, create a Group element and append the rest of the elements as children, as demonstrated in the following example.

const group = new Group();
group.append(path, image, text);

The transformation applies to all group children, which is a simple translate in this case—you effectively make the coordinates of the element relative by translating their parent group.

group.transform(
    transform().translate(50, 50)
);

Creating the Surface

To create the surface, use the Surface.create method. It chooses an implementation that matches the capabilities of the browser. The default output is an SVG with a fallback to Canvas.

The following example demonstrates how to apply this method. The surface is created in the AppComponent.

// 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);

Rendering the Scene

To render the scene, use the draw method of the surface. It appends shapes to the scene graph, as demonstrated in the following example.

surface.draw(group);
In this article