{"id":15024715,"url":"https://github.com/patrimart/ngvas","last_synced_at":"2025-04-12T06:31:01.098Z","repository":{"id":65458366,"uuid":"84917476","full_name":"patrimart/ngvas","owner":"patrimart","description":"An Angular2/Angular4 library for HTML Canvas.","archived":false,"fork":false,"pushed_at":"2018-11-29T09:56:04.000Z","size":244,"stargazers_count":28,"open_issues_count":8,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-21T20:06:01.266Z","etag":null,"topics":["angular","angular2","angular4","canvas","ngvas"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrimart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-14T07:13:19.000Z","updated_at":"2024-02-01T14:00:03.000Z","dependencies_parsed_at":"2023-01-24T13:15:34.403Z","dependency_job_id":null,"html_url":"https://github.com/patrimart/ngvas","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrimart%2Fngvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrimart%2Fngvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrimart%2Fngvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrimart%2Fngvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrimart","download_url":"https://codeload.github.com/patrimart/ngvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248529378,"owners_count":21119498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","canvas","ngvas"],"created_at":"2024-09-24T20:00:47.058Z","updated_at":"2025-04-12T06:31:01.071Z","avatar_url":"https://github.com/patrimart.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngvas\n## An Angular2 / Angular4 Module for HTML Canvas\n\n\nThe **ngvas** library allows you to control the `\u003ccanvas\u003e` element from within Angular 2. Or is it 4 now?\n\nLook in the `/demo` directory for a working example.\n\nExperiment with **ngvas** in a [Plunker](https://plnkr.co/edit/Kc57baYFUnSY8MfDznZs?p=preview).\n\n---\n\nExample Angular Module:\n\n```js\nimport { NgvasModule, tweens, hitAreas } from \"ngvas\";\n\n@NgModule({\n  imports:      [ BrowserModule, NgvasModule ],\n  declarations: [ AppComponent ],\n  bootstrap:    [ AppComponent ]\n})\nclass AppModule { }\n```\n\nExample HTML with Ngvas components:\n\n```html\n\u003cngvas [width]=\"500\" [height]=\"500\" (ready)=\"onNgvasInit()\"\u003e\n    \u003ctemplate ngFor let-rect [ngForOf]=\"rects\"\u003e\n        \u003cngvas-rectangle [fill]=\"rect.color\" [translate]=\"rect.xy\" [width]=\"rect.w\" [height]=\"rect.h\" origin=\"center\"\u003e\u003c/ngvas-rectangle\u003e\n    \u003c/template\u003e\n    \u003cngvas-circle [fill]=\"'#0000ff'\" [x]=\"100\" [y]=\"100\" [radius]=\"50\" origin=\"center\" (click)=\"onClickHandler($event)\" [hitArea]=\"PixelHitArea\"\u003e\u003c/ngvas-circle\u003e\n\u003c/ngvas\u003e\n```\n\n---\n\n### Components\n\n- `\u003cngvas\u003e`: NgvasComponent - The parent component. Think of it as the `\u003ccanvas\u003e` tag.\n- `\u003cngvas-arc\u003e`: NgvasArcComponent - [CanvasRenderingContext2D.arc()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)\n- `\u003cngvas-bezier\u003e`: NgvasBezierCurveComponent - [CanvasRenderingContext2D.bezierCurveTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo)\n- `\u003cngvas-circle\u003e`: NgvasCircleComponent - [CanvasRenderingContext2D.arc()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc)\n- `\u003cngvas-image\u003e`: NgvasImageComponent - [CanvasRenderingContext2D.drawImage()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)\n- `\u003cngvas-line\u003e`: NgvasLineComponent - [CanvasRenderingContext2D.lineTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo)\n- `\u003cngvas-polygon\u003e`: NgvasPolygonComponent\n- `\u003cngvas-quadratic\u003e`: NgvasQuadraticCurveComponent - [CanvasRenderingContext2D.quadraticCurveTo()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo)\n- `\u003cngvas-rectangle\u003e`: NgvasRectangleComponent - [CanvasRenderingContext2D.fillRect()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect)\n- `\u003cngvas-text\u003e`: NgvasTextComponent - [CanvasRenderingContext2D.fillText()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText)\n\n\n#### `\u003cngvas\u003e`: NgvasComponent Input Bindings\n\n| @Input(\"name\")  | Data Type  | Description                                        |\n| --------------- | ---------- | -------------------------------------------------- |\n| active          | `boolean`  | Sets if animation in the canvas is active or not.  |\n| width           | `number`   | Sets the width of the `\u003ccanvas\u003e` element.          |\n| height          | `number`   | Sets the height of the `\u003ccanvas\u003e` element.         |\n\n\n#### `\u003cngvas\u003e`: NgvasComponent Event Bindings\n\n| @Output(\"name\")  | Data Type         | Description                                     |\n| ---------------- | ----------------- | ----------------------------------------------- |\n| ready            | `NgvasComponent`  | Fires once when the component is initialized.   |\n\n---\n\n#### `\u003cngvas-*\u003e`: NgvasBaseComponent Input Bindings\n\nThese input bindings are available on all `\u003cngvas-*\u003e` components.\n\n| @Input(\"name\")  | Data Type    | Description                                                   |\n| --------------- | ------------ | ------------------------------------------------------------- |\n| name            | `string`     | The name of the component. Not used at this point.            |\n| active          | `boolean`    | Sets if the animation is active on the component.             |\n| visible         | `boolean`    | Sets if the component is visible on the canvas.               |\n| x               | `number`     | Sets the x coordinate of the shape.                           |\n| y               | `number`     | Sets the y coordinate of the shape.                           |\n| origin          | `[number, number] | \"center\"` | Sets the x and y origin of the shape. `\"center\"` will lock the origin to the shape's center.  |\n| width           | `number`     | Sets the width of the shape. Not applicable for many shapes.  |\n| height          | `number`     | Sets the height of the shape. Not applicable for many shapes. |\n| rotation        | `number`     | Sets the rotation of the shape in degrees.                    |\n| scaleX          | `number`     | Sets the x scale of the shape.                                |\n| scaleY          | `number`     | Sets the y scale of the shape in degrees.                     |\n| skewX           | `number`     | Sets the x skew of the shape in degrees.                      |\n| skewY           | `number`     | Sets the y skew of the shape.                                 |\n| scale           | `TweenInput\u003cS, [number, number]\u003e`     | Scale multiplier.                                   |\n| size            | `TweenInput\u003cS, [number, number]\u003e`     | Sets the width and height of the shape.             |\n| skew            | `TweenInput\u003cS, [number, number]\u003e`     | Sets the X and Y skew of the shape.                 |\n| rotate          | `TweenInput\u003cS, number\u003e`               | Rotates the shape by the specified degrees.         |\n| translate       | `TweenInput\u003cS, [number, number]\u003e`     | Moves the shape the specified X and Y coordinates.  |\n| animate         | `((shape: S) =\u003e boolean) | undefined` | This function is invoked on every frame request.    |\n| constrain       | `ConstraintFunction[] | undefined`    | This function is invoked on event frame request.    |\n| hitArea         | `typeof PixelHitArea`                 | A function to calculate if the current mouse coordinates are within a shape.  |\n| opacity         | `number`  | Sets the overall opacity of the shape. It's proabably easier to use a fill or stroke `ColorStyle` with opacity. |\n| compose         | `{ alpha?: number, overlay?: ComposeOverlay }`  | Sets how the shape is overlayed on the canvas. [CanvasRenderingContext2D.globalCompositeOperation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) |\n| fill            | `TweenInput\u003cS, ColorStyle\u003e`  | Sets the fill color, gradient or pattern of the shape. [CanvasRenderingContext2D.fillStyle](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) |\n| stroke          | `TweenInput\u003cS, { width:number, style:ColorStyle, join?:LineJoin, cap?:LineCap, dashOffset?:number, miterLimit?:number }\u003e`  | Sets the stroke settings of the shape.  |\n| shadow          | `TweenInput\u003cS, { blur:number, color:string, offsetX:number, offsetY:number }\u003e`  | Sets the shadow settings of the shape.  |\n\n\n#### `\u003cngvas-*\u003e`: NgvasBaseComponent Event Bindings\n\nThese event bindings are available on all `\u003cngvas-*\u003e` components. **Note: a hit area is required for mouse events to work.**\n\n| @Output(\"name\")  | Data Type                | Description                                                     |\n| ---------------- | ------------------------ | --------------------------------------------------------------- |\n| click            | `MouseEvent`             | Emits a MouseEvent if the shape is clicked.                     |\n| dblclick         | `MouseEvent`             | Emits a MouseEvent if the shape is double-clicked.              |\n| wheel            | `WheelEvent`             | Emits a WheelEvent if the scroll wheel is used over the shape.  |\n| mouseenter       | `MouseEvent`             | Emits a MouseEvent if the mouse pointer enters the shape.       |\n| mouseleave       | `MouseEvent`             | Emits a MouseEvent if the mouse pointer leaves the shape.       |\n| shape            | `BaseShape \u0026 BaseStyle`  | On init, emits the underlying class of the shape.               |\n\n---\n\n#### `\u003cngvas-arc\u003e`: NgvasArcComponent Input Bindings\n\nDraws a portion of a circle. `connectToCenter` to make a pie-chart shape.\n\n| @Input(\"name\")  | Data Type                       | Description                                                        |\n| --------------- | ------------------------------- | ------------------------------------------------------------------ |\n| angle           | `TweenInput\u003cArcShape, number\u003e`  | The ending angle of the arc in degrees.                            |\n| radius          | `TweenInput\u003cArcShape, number\u003e`  | The radius of the arc.                                             |\n| connectToCenter | `boolean`                       | If `true`, connects the arc to the center point like a pie slice.  |\n\nExample:\n\n```html\n\u003cngvas-arc fill=\"#ff0000\" [x]=\"250\" [y]=\"250\" [radius]=\"50\" [angle]=\"270\" origin=\"center\" [connectToCenter]=\"true\"\u003e\u003c/ngvas-arc\u003e\n```\n\n---\n\n#### `\u003cngvas-bezier\u003e`: NgvasBezierCurveComponent Input Bindings\n\nDraws one or more connected bezier curves.\n\n| @Input(\"name\")  | Data Type       | Description                          |\n| --------------- | --------------- | ------------------------------------ |\n| curves          | `BezierCurve[]` | An array of connected bezier curves. |\n\n```html\n\u003cngvas-bezier [stroke]=\"{ width: 4 }\" [x]=\"50\" [y]=\"50\" [curves]=\"[[ [100, 100], [150, 450], [400, 300], [400, 400] ]]\"\u003e\u003c/ngvas-bezier\u003e\n```\n\n---\n\n#### `\u003cngvas-circle\u003e`: NgvasCircleComponent Input Bindings\n\nDraws a circle. Basically, an arc with a 360 degree angle.\n\n| @Input(\"name\")  | Data Type                          | Description                |\n| --------------- | ---------------------------------- | -------------------------- |\n| radius          | `TweenInput\u003cCircleShape, number\u003e`  | The radius of the circle.  |\n\n```html\n\u003cngvas-circle fill=\"#ff0000\" [x]=\"250\" [y]=\"250\" [radius]=\"50\" origin=\"center\"\u003e\u003c/ngvas-circle\u003e\n```\n\n---\n\n#### `\u003cngvas-image\u003e`: NgvasImageComponent Input Bindings\n\nDraws an image from the\n\n| @Input(\"name\")  | Data Type  | Description                 |\n| --------------- | ---------- | --------------------------- |\n| src             | `string`   | The URL path to the image.  |\n\n```html\n\u003cngvas-image fill=\"rgba(0,0,0,0)\" [x]=\"10\" [y]=\"10\" [width]=\"100\" [height]=\"100\" src=\"../test/bird.jpg\"\u003e\u003c/ngvas-image\u003e\n```\n\nNote: As a temporary fix, `\u003cngvas-image\u003e` must set `fill` to make it visible.\n\n\n---\n\n#### `\u003cngvas-line\u003e`: NgvasLineComponent Input Bindings\n\nDraws one or more connected lines.\n\n| @Input(\"name\")  | Data Type   | Description                   |\n| --------------- | ----------- | ----------------------------- |\n| lines           | `Line[]`    | An array of connected lines.  |\n\n```html\n\u003cngvas-line [stroke]=\"{ width: 4 }\" [lines]=\"[ [[100, 100], [200, 200]], [[200, 200], [300, 100]] ]\"\u003e\u003c/ngvas-line\u003e\n```\n\n---\n\n#### `\u003cngvas-polygon\u003e`: NgvasPolygonComponent Input Bindings\n\nDraws a shape with any combination of lines, bezier curves and quadratic curves.\n\n| @Input(\"name\")  | Data Type                                     | Description                                 |\n| --------------- | --------------------------------------------- | ------------------------------------------- |\n| sides           | `Array\u003cLine | BezierCurve | QuadraticCurve\u003e`  | An array of a variety of lines and curves.  |\n\n```html\n\u003cngvas-polygon fill=\"#ff0000\" [x]=\"50\" [y]=\"50\" [sides]=\"sidesArray\"\u003e\u003c/ngvas-polygon\u003e\n```\n\n---\n\n#### `\u003cngvas-quadratic\u003e`: NgvasQuadraticCurveComponent Input Bindings\n\nDraws one or more connected quadratic curves.\n\n| @Input(\"name\")  | Data Type           | Description                              |\n| --------------- | ------------------- | ---------------------------------------- |\n| curves          | `QuadraticCurve[]`  | An array of connected quadratic curves.  |\n\n```html\n\u003cngvas-quadratic [stroke]=\"{ width: 4 }\" [x]=\"50\" [y]=\"50\" [curves]=\"[[ [100, 100], [150, 450], [400, 400] ]]\"\u003e\u003c/ngvas-quadratic\u003e\n```\n\n---\n\n#### `\u003cngvas-text\u003e`: NgvasTextComponent Input Bindings\n\nDraws text.\n\n| @Input(\"name\")  | Data Type                                                         | Description                       |\n| --------------- | ----------------------------------------------------------------- | --------------------------------- |\n| text            | `string`                                                          | The text to display.              |\n| textStyle       | `{ font?: string, align?: TextAlign, baseline?: TextBaseline }`   | The style of the displayed text.  |\n\n```html\n\u003cngvas-text fill=\"#0000ff\" [textStyle]=\"{ font: '48px Arial' }\" [x]=\"50\" [y]=\"250\" text=\"This is text.\"\u003e\u003c/ngvas-text\u003e\n```\n\n---\n\n### Tweening Inputs and Functions\n\nYou can set almost any value of a component to tween from its current value to a target value over a specified\nperiod of time with specific easing.\n\n```js\nimport { tweens } from \"ngvas\";\n\ntype TweenFunc = (time: number, startValue: number, changeValue: number, duration: number) =\u003e number;\n\ntype TweenInput \u003cS, T\u003e = T | [ T, number, TweenFunc | undefined, ((s: S) =\u003e void) | undefined ];\n\n// Set the amount of pixels to move, the tween duration in MS, and the easing function to use.\nconst translateTween = [ [250, 250], 1000, tweens.easings.easeInOutSine ];\n```\n\nExample HTML:\n\n```html\n\u003cngvas-circle fill=\"#ff0000\" [x]=\"50\" [y]=\"50\" [radius]=\"50\" [translate]=\"translateTween\" origin=\"center\"\u003e\u003c/ngvas-circle\u003e\n```\n\n\n#### Built-in Tweens\n\n- easeLinear\n- easeInSine, easeOutSine, easeInOutSine\n- easeInQuint, easeOutQuint, easeInOutQuint\n- easeInQuart, easeOutQuart, easeInOutQuart\n- easeInQuad, easeOutQuad, easeInOutQuad\n- easeInExpo, easeOutExpo, easeInOutExpo\n- easeInElastic, easeOutElastic, easeInOutElastic\n- easeInCircular, easeOutCircular, easeInOutCircular\n- easeInBack, easeOutBack, easeInOutBack\n- easeInBounce, easeOutBounce, easeInOutBounce\n- easeInCubic, easeOutCubic, easeInOutCubic\n\n---\n\n### Hit Area Functions\n\nOne function to calculate if the mouse coordinates are on a shape is available. It is pixel accurate and non-optimized.\nUse it judiciously until more effecient hit area functions become available.\n\n```js\nimport { hitAreas } from \"ngvas\";\n\nimport PixelHitArea = hitAreas.PixelHitArea;\n```\n\n---\n\n### Types\n\nImport interfaces:\n```js\nimport * as types from \"ngvas\";\n```\n\n```js\n// Point = [ x, y ]\ntype Point = [number, number];\n\n// Line = [ startPoint, endPoint ]\ntype Line = [Point, Point];\n\n// QuadraticCurve = [ startPoint, controlPoint, endPoint ]\ntype QuadraticCurve = [Point, Point, Point];\n\n// BexierCurve = [ startPoint, controlPoint0, controlPoint1, endPoint ]\ntype BezierCurve = [Point, Point, Point, Point];\n\n// Example: Point | [ Point, durationInMS, TweenFunc]\ntype TweenInput \u003cS extends BaseStyle, T\u003e = T | [ T, number, TweenFunc | undefined, ((s: S) =\u003e void) | undefined ]\n\ntype ComposeOverlay = \"source-over\" | \"source-in\" | \"source-out\" | \"source-atop\" |\n            \"destination-over\" | \"destination-in\" | \"destination-out\" | \"destination-atop\" |\n            \"lighter\" | \"copy\" | \"xor\" | \"multiply\" | \"screen\" | \"overlay\" | \"darken\" |\n            \"lighten\" | \"color-dodge\" | \"color-burn\" | \"hard-light\" | \"soft-light\" | \"difference\" |\n            \"exclusion\" | \"hue\" | \"saturation\" | \"color\" | \"luminosity\";\n\n// ColorStyle: 0xff9966, \"#ff9966\", \"#ff9966ff\", \"rgb(255,200,150)\", \"rgba(255,200,150,0.5)\ntype ColorStyle = number | string | CanvasGradient | CanvasPattern;\ntype LineJoin = \"miter\" | \"bevel\" | \"round\";\ntype LineCap = \"butt\" | \"round\" | \"square\";\ntype TextAlign = \"left\" | \"right\" | \"center\" | \"start\" | \"end\";\ntype TextBaseline = \"top\" | \"hanging\" | \"middle\" | \"alphabetic\" | \"ideographic\" | \"bottom\";\n```\n\n---\n\n## TODOs for 1.0\n\n- Improve docs.\n- Unit tests with \u003e90% coverage.\n- Improve `originToCenter` for curves and polygon.\n- Built-in Constraints.\n- Add mouse events: mousedown, mouseup\n- Add other hit area types: vector rectangle, circle.\n- Optimization.\n\n\n## TODOs for 1.x\n\n- Add drag and drop events.\n- Add HammerJS support.\n- Grouping components.\n- Optimization.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrimart%2Fngvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrimart%2Fngvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrimart%2Fngvas/lists"}