Press "Enter" to skip to content

JavaScript Library for Drawing Complex Canvas Graphics Using Angular

ng2-konva is a JavaScript library for drawing complex canvas drawings using Angular. Provides descriptive and interactive links to the Konva framework.

angular canvas drawing example, angular canvas draw image, angular draw shapes, angular canvas component, angular canvas drag and drop

Events

All events return two params, the angular component, and the event

  • click
  • dblclick
  • mouseover
  • tap
  • dbltap
  • touchstart
  • scaleXChange
  • fillChange
  • dragstart
  • dragmove
  • dragend
 

How to make use of it:

Installation:

$ npm install konva ng2-konva --save

1. 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 { }

2. Once you import KonvaModule, you can use its components in your Angular app:

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

drawing complex canvas graphics with angular, ng2-konva Plugin/Github


See Demo And Download

Official Website(konvajs): Click Here

This superior jQuery/javascript plugin is developed by konvajs. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.