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 add as config in the prop as Observable for 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.
http://rafaelescala.com/ng2-konva/
To install this library, run:
$ npm install konva ng2-konva --saveand then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import KonvaModule
import { KonvaModule } from 'ng2-konva';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
KonvaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Once KonvaModule is imported, you can use its components in your Angular application:
import { of } from 'rxjs/Observable';
@Component({
selector: 'app',
template: `
<ko-stage [config]="configStage">
<ko-layer>
<ko-circle [config]="configCircle" (click)="handleClick($event)"></ko-circle>
</ko-layer>
</ko-stage>`
})
class AppComponent implements OnInit {
public configStage: Observable<any> = of({
width: 200,
height: 200
});
public configCircle: Observable<any> = of({
x: 100,
y: 100,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
public handleClick(component) {
console.log('Hello Circle', component);
}
}- react-konva - React + Konva
- vue-konva - Vue + Konva
MIT © Rafael Escala