- Notifications
You must be signed in to change notification settings - Fork12
patrimart/ngvas
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Thengvas 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 withngvas in aPlunker.
Example Angular Module:
import{NgvasModule,tweens,hitAreas}from"ngvas";@NgModule({imports:[BrowserModule,NgvasModule],declarations:[AppComponent],bootstrap:[AppComponent]})classAppModule{}
Example HTML with Ngvas components:
<ngvas[width]="500"[height]="500"(ready)="onNgvasInit()"><templatengForlet-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 - 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()
| @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. |
| @Output("name") | Data Type | Description |
|---|---|---|
| ready | NgvasComponent | Fires once when the component is initialized. |
These input bindings are available on all<ngvas-*> components.
| @Input("name") | Data Type | Description |
|---|---|---|
| name | string | The name of the component. Not used at this point. |
| active | boolean | Sets if the animation is active on the component. |
| visible | boolean | Sets if the component is visible on the canvas. |
| x | number | Sets the x coordinate of the shape. |
| y | number | Sets the y coordinate of the shape. |
| origin | `[number, number] | "center"` |
| width | number | Sets the width of the shape. Not applicable for many shapes. |
| height | number | Sets the height of the shape. Not applicable for many shapes. |
| rotation | number | Sets the rotation of the shape in degrees. |
| scaleX | number | Sets the x scale of the shape. |
| scaleY | number | Sets the y scale of the shape in degrees. |
| skewX | number | Sets the x skew of the shape in degrees. |
| skewY | number | Sets the y skew of the shape. |
| scale | TweenInput<S, [number, number]> | Scale multiplier. |
| size | TweenInput<S, [number, number]> | Sets the width and height of the shape. |
| skew | TweenInput<S, [number, number]> | Sets the X and Y skew of the shape. |
| rotate | TweenInput<S, number> | Rotates the shape by the specified degrees. |
| translate | TweenInput<S, [number, number]> | Moves the shape the specified X and Y coordinates. |
| animate | `((shape: S) => boolean) | undefined` |
| constrain | `ConstraintFunction[] | undefined` |
| hitArea | typeof PixelHitArea | A function to calculate if the current mouse coordinates are within a shape. |
| opacity | number | Sets the overall opacity of the shape. It's proabably easier to use a fill or strokeColorStyle with opacity. |
| compose | { alpha?: number, overlay?: ComposeOverlay } | Sets how the shape is overlayed on the canvas.CanvasRenderingContext2D.globalCompositeOperation |
| fill | TweenInput<S, ColorStyle> | Sets the fill color, gradient or pattern of the shape.CanvasRenderingContext2D.fillStyle |
| stroke | TweenInput<S, { width:number, style:ColorStyle, join?:LineJoin, cap?:LineCap, dashOffset?:number, miterLimit?:number }> | Sets the stroke settings of the shape. |
| shadow | TweenInput<S, { blur:number, color:string, offsetX:number, offsetY:number }> | Sets the shadow settings of the shape. |
These event bindings are available on all<ngvas-*> components.Note: a hit area is required for mouse events to work.
| @Output("name") | Data Type | Description |
|---|---|---|
| click | MouseEvent | Emits a MouseEvent if the shape is clicked. |
| dblclick | MouseEvent | Emits a MouseEvent if the shape is double-clicked. |
| wheel | WheelEvent | Emits a WheelEvent if the scroll wheel is used over the shape. |
| mouseenter | MouseEvent | Emits a MouseEvent if the mouse pointer enters the shape. |
| mouseleave | MouseEvent | Emits a MouseEvent if the mouse pointer leaves the shape. |
| shape | BaseShape & BaseStyle | On init, emits the underlying class of the shape. |
Draws a portion of a circle.connectToCenter to make a pie-chart shape.
| @Input("name") | Data Type | Description |
|---|---|---|
| angle | TweenInput<ArcShape, number> | The ending angle of the arc in degrees. |
| radius | TweenInput<ArcShape, number> | The radius of the arc. |
| connectToCenter | boolean | Iftrue, connects the arc to the center point like a pie slice. |
Example:
<ngvas-arcfill="#ff0000"[x]="250"[y]="250"[radius]="50"[angle]="270"origin="center"[connectToCenter]="true"></ngvas-arc>
Draws one or more connected bezier curves.
| @Input("name") | Data Type | Description |
|---|---|---|
| curves | BezierCurve[] | An array of connected bezier curves. |
<ngvas-bezier[stroke]="{ width: 4 }"[x]="50"[y]="50"[curves]="[[ [100, 100], [150, 450], [400, 300], [400, 400] ]]"></ngvas-bezier>
Draws a circle. Basically, an arc with a 360 degree angle.
| @Input("name") | Data Type | Description |
|---|---|---|
| radius | TweenInput<CircleShape, number> | The radius of the circle. |
<ngvas-circlefill="#ff0000"[x]="250"[y]="250"[radius]="50"origin="center"></ngvas-circle>
Draws an image from the
| @Input("name") | Data Type | Description |
|---|---|---|
| src | string | The URL path to the image. |
<ngvas-imagefill="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 setfill to make it visible.
Draws one or more connected lines.
| @Input("name") | Data Type | Description |
|---|---|---|
| lines | Line[] | An array of connected lines. |
<ngvas-line[stroke]="{ width: 4 }"[lines]="[ [[100, 100], [200, 200]], [[200, 200], [300, 100]] ]"></ngvas-line>
Draws a shape with any combination of lines, bezier curves and quadratic curves.
| @Input("name") | Data Type | Description |
|---|---|---|
| sides | `Array<Line | BezierCurve |
<ngvas-polygonfill="#ff0000"[x]="50"[y]="50"[sides]="sidesArray"></ngvas-polygon>
Draws one or more connected quadratic curves.
| @Input("name") | Data Type | Description |
|---|---|---|
| curves | QuadraticCurve[] | An array of connected quadratic curves. |
<ngvas-quadratic[stroke]="{ width: 4 }"[x]="50"[y]="50"[curves]="[[ [100, 100], [150, 450], [400, 400] ]]"></ngvas-quadratic>
Draws text.
| @Input("name") | Data Type | Description |
|---|---|---|
| text | string | The text to display. |
| textStyle | { font?: string, align?: TextAlign, baseline?: TextBaseline } | The style of the displayed text. |
<ngvas-textfill="#0000ff"[textStyle]="{ font: '48px Arial' }"[x]="50"[y]="250"text="This is text."></ngvas-text>
You can set almost any value of a component to tween from its current value to a target value over a specifiedperiod of time with specific easing.
import{tweens}from"ngvas";typeTweenFunc=(time:number,startValue:number,changeValue:number,duration:number)=>number;typeTweenInput<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.consttranslateTween=[[250,250],1000,tweens.easings.easeInOutSine];
Example HTML:
<ngvas-circlefill="#ff0000"[x]="50"[y]="50"[radius]="50"[translate]="translateTween"origin="center"></ngvas-circle>
- 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
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";importPixelHitArea=hitAreas.PixelHitArea;
Import interfaces:
import*astypesfrom"ngvas";
// Point = [ x, y ]typePoint=[number,number];// Line = [ startPoint, endPoint ]typeLine=[Point,Point];// QuadraticCurve = [ startPoint, controlPoint, endPoint ]typeQuadraticCurve=[Point,Point,Point];// BexierCurve = [ startPoint, controlPoint0, controlPoint1, endPoint ]typeBezierCurve=[Point,Point,Point,Point];// Example: Point | [ Point, durationInMS, TweenFunc]typeTweenInput<SextendsBaseStyle,T>=T|[T,number,TweenFunc|undefined,((s:S)=>void)|undefined]typeComposeOverlay="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)typeColorStyle=number|string|CanvasGradient|CanvasPattern;typeLineJoin="miter"|"bevel"|"round";typeLineCap="butt"|"round"|"square";typeTextAlign="left"|"right"|"center"|"start"|"end";typeTextBaseline="top"|"hanging"|"middle"|"alphabetic"|"ideographic"|"bottom";
- 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.
- Add drag and drop events.
- Add HammerJS support.
- Grouping components.
- Optimization.
About
An Angular2/Angular4 library for HTML Canvas.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.