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.
-
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 } });
-
Set the initial position of the line by using a
moveTo
command. To draw the three sides, use thelineTo
commands. The lastclose
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
andSize
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);