ngvas

An Angular2 / Angular4 Module for HTML Canvas

The ngvas library allows you to control the <canvas> element from within Angular 2. Or is it 4 now?

Look in the /demo directory for a working example.

Experiment with ngvas in a Plunker.

Example Angular Module:

import { NgvasModule, tweens, hitAreas } from "ngvas";

@NgModule({
  imports:      [ BrowserModule, NgvasModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

Example HTML with Ngvas components:

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

Components

• <ngvas>: NgvasComponent - The parent component. Think of it as the <canvas> tag.
• <ngvas-arc>: NgvasArcComponent - CanvasRenderingContext2D.arc()
• <ngvas-bezier>: NgvasBezierCurveComponent - CanvasRenderingContext2D.bezierCurveTo()
• <ngvas-circle>: NgvasCircleComponent - CanvasRenderingContext2D.arc()
• <ngvas-image>: NgvasImageComponent - CanvasRenderingContext2D.drawImage()
• <ngvas-line>: NgvasLineComponent - CanvasRenderingContext2D.lineTo()
• <ngvas-polygon>: NgvasPolygonComponent
• <ngvas-quadratic>: NgvasQuadraticCurveComponent - CanvasRenderingContext2D.quadraticCurveTo()
• <ngvas-rectangle>: NgvasRectangleComponent - CanvasRenderingContext2D.fillRect()
• <ngvas-text>: NgvasTextComponent - CanvasRenderingContext2D.fillText()

<ngvas>: NgvasComponent Input Bindings

<ngvas>: NgvasComponent Event Bindings

<ngvas-*>: NgvasBaseComponent Input Bindings

These input bindings are available on all <ngvas-*> components.

<ngvas-*>: NgvasBaseComponent Event Bindings

These event bindings are available on all <ngvas-*> components. Note: a hit area is required for mouse events to work.

<ngvas-arc>: NgvasArcComponent Input Bindings

Draws a portion of a circle. connectToCenter to make a pie-chart shape.

Example:

<ngvas-arc fill="#ff0000" [x]="250" [y]="250" [radius]="50" [angle]="270" origin="center" [connectToCenter]="true"></ngvas-arc>

<ngvas-bezier>: NgvasBezierCurveComponent Input Bindings

Draws one or more connected bezier curves.

<ngvas-bezier [stroke]="{ width: 4 }" [x]="50" [y]="50" [curves]="[[ [100, 100], [150, 450], [400, 300], [400, 400] ]]"></ngvas-bezier>

<ngvas-circle>: NgvasCircleComponent Input Bindings

Draws a circle. Basically, an arc with a 360 degree angle.

<ngvas-circle fill="#ff0000" [x]="250" [y]="250" [radius]="50" origin="center"></ngvas-circle>

<ngvas-image>: NgvasImageComponent Input Bindings

Draws an image from the

<ngvas-image fill="rgba(0,0,0,0)" [x]="10" [y]="10" [width]="100" [height]="100" src="../test/bird.jpg"></ngvas-image>

Note: As a temporary fix, <ngvas-image> must set fill to make it visible.

<ngvas-line>: NgvasLineComponent Input Bindings

Draws one or more connected lines.

<ngvas-line [stroke]="{ width: 4 }" [lines]="[ [[100, 100], [200, 200]], [[200, 200], [300, 100]] ]"></ngvas-line>

<ngvas-polygon>: NgvasPolygonComponent Input Bindings

Draws a shape with any combination of lines, bezier curves and quadratic curves.

<ngvas-polygon fill="#ff0000" [x]="50" [y]="50" [sides]="sidesArray"></ngvas-polygon>

<ngvas-quadratic>: NgvasQuadraticCurveComponent Input Bindings

Draws one or more connected quadratic curves.

<ngvas-quadratic [stroke]="{ width: 4 }" [x]="50" [y]="50" [curves]="[[ [100, 100], [150, 450], [400, 400] ]]"></ngvas-quadratic>

<ngvas-text>: NgvasTextComponent Input Bindings

Draws text.

<ngvas-text fill="#0000ff" [textStyle]="{ font: '48px Arial' }" [x]="50" [y]="250" text="This is text."></ngvas-text>

Tweening Inputs and Functions

You can set almost any value of a component to tween from its current value to a target value over a specified period of time with specific easing.

import { tweens } from "ngvas";

type TweenFunc = (time: number, startValue: number, changeValue: number, duration: number) => number;

type TweenInput <S, T> = T | [ T, number, TweenFunc | undefined, ((s: S) => void) | undefined ];

// Set the amount of pixels to move, the tween duration in MS, and the easing function to use.
const translateTween = [ [250, 250], 1000, tweens.easings.easeInOutSine ];

Example HTML:

<ngvas-circle fill="#ff0000" [x]="50" [y]="50" [radius]="50" [translate]="translateTween" origin="center"></ngvas-circle>

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

Hit Area Functions

One function to calculate if the mouse coordinates are on a shape is available. It is pixel accurate and non-optimized. Use it judiciously until more effecient hit area functions become available.

import { hitAreas } from "ngvas";

import PixelHitArea = hitAreas.PixelHitArea;

Types

Import interfaces:

import * as types from "ngvas";

// Point = [ x, y ]
type Point = [number, number];

// Line = [ startPoint, endPoint ]
type Line = [Point, Point];

// QuadraticCurve = [ startPoint, controlPoint, endPoint ]
type QuadraticCurve = [Point, Point, Point];

// BexierCurve = [ startPoint, controlPoint0, controlPoint1, endPoint ]
type BezierCurve = [Point, Point, Point, Point];

// Example: Point | [ Point, durationInMS, TweenFunc]
type TweenInput <S extends BaseStyle, T> = T | [ T, number, TweenFunc | undefined, ((s: S) => void) | undefined ]

type ComposeOverlay = "source-over" | "source-in" | "source-out" | "source-atop" |
            "destination-over" | "destination-in" | "destination-out" | "destination-atop" |
            "lighter" | "copy" | "xor" | "multiply" | "screen" | "overlay" | "darken" |
            "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" |
            "exclusion" | "hue" | "saturation" | "color" | "luminosity";

// ColorStyle: 0xff9966, "#ff9966", "#ff9966ff", "rgb(255,200,150)", "rgba(255,200,150,0.5)
type ColorStyle = number | string | CanvasGradient | CanvasPattern;
type LineJoin = "miter" | "bevel" | "round";
type LineCap = "butt" | "round" | "square";
type TextAlign = "left" | "right" | "center" | "start" | "end";
type TextBaseline = "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";

TODOs for 1.0

• Improve docs.
• Unit tests with >90% coverage.
• Improve originToCenter for 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.