https://github.com/konvajs/ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
https://github.com/konvajs/ng2-konva

angular angular2 canvas canvas-animation konva konvajs ng2 shape

Last synced: 4 days ago
JSON representation

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.

• Host: GitHub
• URL: https://github.com/konvajs/ng2-konva
• Owner: konvajs
• Created: 2017-11-12T16:28:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-20T15:20:53.000Z (6 months ago)
• Last Synced: 2024-05-23T07:01:31.236Z (6 months ago)
• Topics: angular, angular2, canvas, canvas-animation, konva, konvajs, ng2, shape
• Language: TypeScript
• Homepage: http://rafaelescala.com/ng2-konva/
• Size: 561 KB
• Stars: 109
• Watchers: 8
• Forks: 29
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ng2-konva



  

    

  

  

    

  

  

![Ng2Konva Logo](n2-konva.png)

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

It provides declarative and reactive bindings to the [Konva Framework](http://konvajs.github.io/).

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](http://konvajs.github.io/docs/overview.html).

## Documentation

[http://rafaelescala.com/ng2-konva/](http://rafaelescala.com/ng2-konva/)

## Installation

To install this library, run:

```bash

$ npm install ng2-konva --save

```

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

```typescript

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: `

    


    

      

        

          

        

      

    

  `,

  standalone: true,

  imports: [StageComponent, CoreShapeComponent],

})

export class CircleExampleComponent {

  public configStage: Partial = {

    width: 200,

    height: 500,

  };

  public configCircle: CircleConfig = {

    x: 100,

    y: 100,

    radius: 70,

    fill: 'red',

    stroke: 'black',

    strokeWidth: 4,

  };

  public handleClick(event: NgKonvaEventObject): void {

    console.log('Hello Circle', event);

  }

}

```

## Demo

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

## Related repositories

* [react-konva](https://github.com/lavrton/react-konva) - React + Konva

* [vue-konva](http://rafaelescala.com/vue-konva-doc/) - Vue + Konva

## License

MIT © [Rafael Escala](mailto:[email protected])