{"id":13580895,"url":"https://github.com/konvajs/ng2-konva","last_synced_at":"2025-06-10T23:02:02.826Z","repository":{"id":26895552,"uuid":"110448771","full_name":"konvajs/ng2-konva","owner":"konvajs","description":"Angular \u0026 Canvas - JavaScript library for drawing complex canvas graphics using Angular.","archived":false,"fork":false,"pushed_at":"2024-10-11T05:04:26.000Z","size":947,"stargazers_count":127,"open_issues_count":28,"forks_count":34,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-06-01T03:40:24.632Z","etag":null,"topics":["angular","angular2","canvas","canvas-animation","konva","konvajs","ng2","shape"],"latest_commit_sha":null,"homepage":"http://rafaelescala.com/ng2-konva/","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/konvajs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-11-12T16:28:14.000Z","updated_at":"2025-05-22T11:11:17.000Z","dependencies_parsed_at":"2023-11-27T16:02:31.826Z","dependency_job_id":"b0971b42-44e3-4ec0-a5fc-e443fc1f1210","html_url":"https://github.com/konvajs/ng2-konva","commit_stats":{"total_commits":64,"total_committers":4,"mean_commits":16.0,"dds":0.484375,"last_synced_commit":"ba2bf612f4d5f08fa4cba815e0bdae7999d6710a"},"previous_names":["rafaesc/ng2-konva"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Fng2-konva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Fng2-konva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Fng2-konva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Fng2-konva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konvajs","download_url":"https://codeload.github.com/konvajs/ng2-konva/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konvajs%2Fng2-konva/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258770623,"owners_count":22754977,"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","canvas","canvas-animation","konva","konvajs","ng2","shape"],"created_at":"2024-08-01T15:01:56.042Z","updated_at":"2025-06-10T23:02:02.674Z","avatar_url":"https://github.com/konvajs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ng2-konva\n\u003cspan class=\"badge-npmdownloads\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng2-konva\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/ng2-konva.svg\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ng2-konva\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/ng2-konva.svg\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003c/span\u003e\n\n![Ng2Konva Logo](n2-konva.png)\n\n**ng2-konva** is a JavaScript library for drawing complex canvas graphics using Angular.\n\nIt provides declarative and reactive bindings to the [Konva Framework](http://konvajs.github.io/).\n\nAll `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.\n\nCore 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.\nAlso you can create custom shape.\n\nTo get more info about `Konva` you can read [Konva Overview](http://konvajs.github.io/docs/overview.html).\n\n## Documentation\n\n[http://rafaelescala.com/ng2-konva/](http://rafaelescala.com/ng2-konva/)\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ng2-konva --save\n```\n\n`ng2-konva` components are all standalone. There are two components you will need to import: `CoreShapeComponent` and `StageComponent`\n\n```typescript\nimport { Component } from '@angular/core';\nimport { StageConfig } from 'konva/lib/Stage';\nimport { CircleConfig } from 'konva/lib/shapes/Circle';\nimport {\n  CoreShapeComponent,\n  NgKonvaEventObject,\n  StageComponent,\n} from 'ng2-konva';\n\n@Component({\n  selector: 'app-circle-example',\n  template: `\n    \u003cbr /\u003e\n    \u003csection\u003e\n      \u003cko-stage [config]=\"configStage\"\u003e\n        \u003cko-layer\u003e\n          \u003cko-circle\n            [config]=\"configCircle\"\n            (click)=\"handleClick($event)\"\n          \u003e\u003c/ko-circle\u003e\n        \u003c/ko-layer\u003e\n      \u003c/ko-stage\u003e\n    \u003c/section\u003e\n  `,\n  standalone: true,\n  imports: [StageComponent, CoreShapeComponent],\n})\nexport class CircleExampleComponent {\n  public configStage: Partial\u003cStageConfig\u003e = {\n    width: 200,\n    height: 500,\n  };\n  public configCircle: CircleConfig = {\n    x: 100,\n    y: 100,\n    radius: 70,\n    fill: 'red',\n    stroke: 'black',\n    strokeWidth: 4,\n  };\n\n  public handleClick(event: NgKonvaEventObject\u003cMouseEvent\u003e): void {\n    console.log('Hello Circle', event);\n  }\n}\n```\n\n## Demo\nYou can find more examples in the demo project located in `projects/demo`.\n\n## Related repositories\n\n* [react-konva](https://github.com/lavrton/react-konva) - React + Konva\n* [vue-konva](http://rafaelescala.com/vue-konva-doc/) - Vue + Konva\n\n\n## License\n\nMIT © [Rafael Escala](mailto:rafaesc92@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonvajs%2Fng2-konva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonvajs%2Fng2-konva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonvajs%2Fng2-konva/lists"}