ng2-konva

ng2-konva is a JavaScript library for drawing complex canvas graphics using Angular.

It provides declarative and reactive bindings to the Konva Framework.

All ng2-konva components correspond to Konva components of the same name with the prefix 'ko-'. All the parameters available for Konva objects can be passed as config to the corresponding ng2-konva components.

Core shapes are: ko-stage, ko-layer, ko-rect, ko-circle, ko-ellipse, ko-line, ko-image, ko-text, ko-text-path, ko-star, ko-label, SVG Path, ko-regular-polygon. Also you can create custom shape.

To get more info about Konva you can read Konva Overview.

Documentation

http://rafaelescala.com/ng2-konva/

Installation

To install this library, run:

$ npm install ng2-konva --save

ng2-konva components are all standalone. There are two components you will need to import: CoreShapeComponent and StageComponent

import { Component } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { CircleConfig } from 'konva/lib/shapes/Circle';
import {
  CoreShapeComponent,
  NgKonvaEventObject,
  StageComponent,
} from 'ng2-konva';

@Component({
  selector: 'app-circle-example',
  template: `
    <br />
    <section>
      <ko-stage [config]="configStage">
        <ko-layer>
          <ko-circle
            [config]="configCircle"
            (click)="handleClick($event)"
          ></ko-circle>
        </ko-layer>
      </ko-stage>
    </section>
  `,
  standalone: true,
  imports: [StageComponent, CoreShapeComponent],
})
export class CircleExampleComponent {
  public configStage: Partial<StageConfig> = {
    width: 200,
    height: 500,
  };
  public configCircle: CircleConfig = {
    x: 100,
    y: 100,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
  };

  public handleClick(event: NgKonvaEventObject<MouseEvent>): void {
    console.log('Hello Circle', event);
  }
}

Demo

You can find more examples in the demo project located in projects/demo.

Related repositories

• react-konva - React + Konva
• vue-konva - Vue + Konva

License

MIT © Rafael Escala