Path

Represents a path consisting of linear or cubic Bézier curve segments (see example).

options OptionsStore

The configuration of this element.

segments Segment[]

A collection of the path segments.

Constructors

Path (options?: ShapeOptions)

Creates a new Path with the specified options.

Parameters

options? ShapeOptions

The configuration options.

Methods

arc

Draws an arc segment with the specified parameters. Angles increase in a clockwise direction with 0 (zero) pointing "right". Negative values or values greater than 360 are normalized.

Parameters

startAngle number

The start angle of the arc in decimal degrees.

endAngle number

The end angle of the arc in decimal degrees.

rx number

The X radius of the arc.

ry number

The Y radius of the arc.

anticlockwise? boolean

A flag indicating if the arc should be drawn in a clockwise or anticlockwise direction. By default, it is drawn clockwise.

Returns

Path - The current instance to allow chaining.

arcTo

Draws an arc segment to the specified point. The parameters are based on the SVG Arc syntax.

Parameters

end number

The end point of the arc.

rx number

The x radius of the arc.

ry number

The y radius of the arc.

largeArc boolean

A flag indicating if the arc should be greater or less than 180 degrees.

sweep boolean

A flag indicating if the arc should begin moving at negative or positive angles.

Returns

Path - The current instance to allow chaining.

bbox

Returns the bounding box of the element with applied transformations.

Returns

Rect - The bounding box of the element with transformations applied.

clip

Gets the clipping path for this element.

Returns

Path - The clipping path for this element.

clip

Sets the clipping path for this element. The Path instance will be monitored for changes. Can be replaced by calling the clip method.

The following example demonstrates how to set a clipping path on a Circle.

import { Circle, Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform, Circle: GeomCircle } = geometry;

export function drawScene(surface: Surface) {
  // Create the circle geometry and shape
  const geometry = new GeomCircle([100, 100], 80);
  const circle = new Circle(geometry, {
    stroke: { color: "red", width: 1 }
  });

  // Create a clipping path
  const clipPath = new Path();
  clipPath.moveTo(0, 0).lineTo(100, 100).lineTo(100, 0).close();

  // Clip the circle
  circle.clip(clipPath);

  // Render the group on the surface
  surface.draw(circle);
}

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

The following example demonstrates how to clear a clipping path.

import { Circle, Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform, Circle: GeomCircle } = geometry;

export function drawScene(surface: Surface) {
  // Create the circle geometry and shape
  const geometry = new GeomCircle([100, 100], 80);
  const circle = new Circle(geometry, {
    stroke: { color: "red", width: 1 }
  });

  // Create a clipping path
  const clipPath = new Path();
  clipPath.moveTo(0, 0).lineTo(100, 100).lineTo(100, 0).close();

  // Clip the circle
  circle.clip(clipPath);

  // Render the group on the surface
  surface.draw(circle);

  setTimeout(() => {
    circle.clip(null);
  }, 2000);
}

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

Parameters

clip Path

The element clipping path.

clippedBBox

Returns the bounding box of the element with clipping and transformations applied. This is the rectangle that will fit around the actual rendered element.

Returns

Rect - The bounding box of the element with clipping and transformations applied.

close

Closes the path by linking the current end point with the start point.

Returns

Path - The current instance to allow chaining.

containsPoint

Returns true if the shape contains the specified point.

Parameters

point Point

The point that should be checked.

Returns

boolean value indicating if the shape contains the point.

curveTo

Draws a cubic Bézier curve (with two control points). A quadratic Bézier curve (with one control point) can be plotted by making the control point equal.

Parameters

controlOut Point | number[]

The first control point for the curve.

controlIn Point | number[]

The second control point for the curve.

endPoint Point | number[]

The curve end point.

Returns

Path - The current instance to allow chaining.

fill

Sets the fill of the Shape (see the basic usage example).

Parameters

color string

The fill color to set.

opacity? number

The fill opacity to set.

Returns

Path - The current instance to allow chaining.

lineTo

Draws a straight line to the specified absolute coordinates.

Parameters

x number

The end X coordinate of the line.

y number

The end Y coordinate of the line.

Returns

Path - The current instance to allow chaining.

lineTo

Draws a straight line to the specified absolute coordinates.

Parameters

point Point

The end point of the line.

Returns

Path - The current instance to allow chaining.

moveTo

Clears all existing segments and moves the starting point to the specified absolute coordinates.

Parameters

x number

The starting X coordinate.

y number

The starting Y coordinate.

Returns

Path - The current instance to allow chaining.

moveTo

Clears all existing segments and moves the starting point to the specified absolute coordinates.

Parameters

point Point

The end point of the line.

Returns

Path - The current instance to allow chaining.

opacity

Gets the element opacity.

Returns

number The current element opacity.

opacity

Sets the opacity of the element.

import { Surface, Path } from '@progress/kendo-drawing';

export function drawScene(surface: Surface) {
  // Draw a path
  const path = new Path({
    stroke: {
      color: 'red',
      width: 10
    }
  });
  path.moveTo(25, 75).lineTo(75, 25);

  // Set its opacity to 50%
  path.opacity(0.5);

  // Render the group on the surface
  surface.draw(path);
}

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

Parameters

opacity number

The element opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).

stroke

Sets the stroke of the Shape.

Parameters

color string

The stroke color to set.

width? number

The stroke width to set.

opacity? number

The stroke opacity to set.

Returns

Path - The current instance to allow chaining.

transform

Gets the transformation of the element.

Returns

Transformation - The current transformation on the element.

transform

Sets the transformation of the element.

import { Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

export function drawScene(surface: Surface) {
  // Draw a path
  const path = new Path({
    stroke: {
      color: 'red',
      width: 10
    }
  });
  path.moveTo(25, 50).lineTo(75, 50);

  // Rotate the path
  path.transform(transform().rotate(-45, [50, 50]));

  // Render the group on the surface
  surface.draw(path);
}

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

Parameters

transform Transformation

The transformation to apply to the element.

visible

Gets the visibility of the element.

Returns

boolean true if the element is visible. Otherwise, returns false.

visible

Sets the visibility of the element.

import { Surface, Path, geometry } from '@progress/kendo-drawing';
const { transform } = geometry;

export function drawScene(surface: Surface) {
  // Draw a path
  const path = new Path({
    stroke: {
      color: 'red',
      width: 10
    }
  });
  path.moveTo(25, 50).lineTo(75, 50);

  // Toggle the visibility of the path
  setInterval(() => {
    path.visible(!path.visible());
  }, 500);

  // Render the group on the surface
  surface.draw(path);
}

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

Parameters

visible boolean

A flag which indicates if the element will be visible.

fromArc

Creates a curve from the given arc.

Parameters

arc Arc

The source arc to trace.

options? ShapeOptions

The configuration options for the path.

Returns

Path - The newly constructed path.

fromPoints

Creates a straight path from the given points.

Parameters

points Point[] | number[]

An array of Point objects or [x, y] arrays.

options? ShapeOptions

The configuration options for the path.

Returns

Path - The newly constructed path.

fromRect

Creates a straight path from the given rectangle.

Parameters

rect Rect

The source rectangle to trace.

options? ShapeOptions

The configuration options for the path.

Returns

Path - The newly constructed path.

parse

Parses a path encoded in an SVG Path Data format.

Parameters

svgPath string

The path encoded in SVG Path Data format.

options? ShapeOptions

The configuration options for the path.

Returns

Path - The newly constructed path.