The ngvas library allows you to control the <canvas> element from within Angular 2 and Angular 4.
html2canvas angular example, convert html to image angular, angular 7 canvas drawing, angular create canvas dynamically
TODOs for 1.0
- Improve docs.
- Unit tests with >90% coverage.
- Improve
originToCenterfor curves and polygon. - Built-in Constraints.
- Add mouse events: mousedown, mouseup
- Add other hit area types: vector rectangle, circle.
- Optimization.
TODOs for 1.x
- Add drag and drop events.
- Add HammerJS support.
- Grouping components.
- Optimization.
Installation:
$ npm install ngvas –save
Usage
import { NgvasModule, tweens, hitAreas } from "ngvas";
@NgModule({
imports: [ BrowserModule, NgvasModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }
<ngvas [width]="500" [height]="500" (ready)="onNgvasInit()">
<template ngFor let-rect [ngForOf]="rects">
<ngvas-rectangle [fill]="rect.color" [translate]="rect.xy" [width]="rect.w" [height]="rect.h" origin="center"></ngvas-rectangle>
</template>
<ngvas-circle [fill]="'#0000ff'" [x]="100" [y]="100" [radius]="50" origin="center" (click)="onClickHandler($event)" [hitArea]="PixelHitArea"></ngvas-circle>
</ngvas><ngvas>: NgvasComponent Input Bindings
| @Input(“name”) | Data Type | Description |
|---|---|---|
| active | boolean | Sets if animation in the canvas is active or not. |
| width | number | Sets the width of the <canvas> element. |
| height | number | Sets the height of the <canvas> element. |
<ngvas>: NgvasComponent Event Bindings
| @Output(“name”) | Data Type | Description |
|---|---|---|
| ready | NgvasComponent | Fires once when the component is initialized. |
Built-in Tweens
- easeLinear
- easeInSine, easeOutSine, easeInOutSine
- easeInQuint, easeOutQuint, easeInOutQuint
- easeInQuart, easeOutQuart, easeInOutQuart
- easeInQuad, easeOutQuad, easeInOutQuad
- easeInExpo, easeOutExpo, easeInOutExpo
- easeInElastic, easeOutElastic, easeInOutElastic
- easeInCircular, easeOutCircular, easeInOutCircular
- easeInBack, easeOutBack, easeInOutBack
- easeInBounce, easeOutBounce, easeInOutBounce
- easeInCubic, easeOutCubic, easeInOutCubic
angular 4 module for html canvas, ngvas Plugin/Github
See Demo And Download
Official Website(patrimart): Click Here
This superior jQuery/javascript plugin is developed by patrimart. For extra advanced usage, please go to the official website.
