{"id":19806596,"url":"https://github.com/arch-inc/fabricjs-layer","last_synced_at":"2025-05-01T07:30:55.097Z","repository":{"id":45048534,"uuid":"306405347","full_name":"arch-inc/fabricjs-layer","owner":"arch-inc","description":"Fabric.js用のシンプルなレイヤー実装 / A simple layer implementation on top of Fabric.js","archived":false,"fork":false,"pushed_at":"2022-01-12T16:31:24.000Z","size":2866,"stargazers_count":24,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T10:52:10.926Z","etag":null,"topics":["fabric","fabricjs","fabricjs-psbrush"],"latest_commit_sha":null,"homepage":"https://arch-inc.github.io/fabricjs-layer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arch-inc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-22T17:03:32.000Z","updated_at":"2025-03-28T04:20:35.000Z","dependencies_parsed_at":"2022-08-25T13:50:59.195Z","dependency_job_id":null,"html_url":"https://github.com/arch-inc/fabricjs-layer","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arch-inc%2Ffabricjs-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arch-inc%2Ffabricjs-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arch-inc%2Ffabricjs-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arch-inc%2Ffabricjs-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arch-inc","download_url":"https://codeload.github.com/arch-inc/fabricjs-layer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251840149,"owners_count":21652289,"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":["fabric","fabricjs","fabricjs-psbrush"],"created_at":"2024-11-12T09:07:57.983Z","updated_at":"2025-05-01T07:30:54.776Z","avatar_url":"https://github.com/arch-inc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### fabricjs-layer\r\n\r\n[![build](https://github.com/arch-inc/fabricjs-layer/workflows/npm-publish-gpr/badge.svg)](https://github.com/arch-inc/fabricjs-layer/actions?query=workflow%3Anpm-publish-gpr)\r\n[![npm version](https://img.shields.io/npm/v/@arch-inc/fabricjs-layer)](https://www.npmjs.com/package/@arch-inc/fabricjs-layer)\r\n\r\n**fabricjs-layer** is a simple layer implementation for Fabric.js v3.x and v4.x.\r\n\r\n**fabricjs-layer** は Fabric.js v3.x および v4.x 用のシンプルなレイヤー実装です。\r\n\r\n- npm package: https://www.npmjs.com/package/@arch-inc/fabricjs-layer\r\n- API document: https://arch-inc.github.io/fabricjs-layer/api/globals.html\r\n- Demo site: https://arch-inc.github.io/fabricjs-layer/\r\n\r\n### Usage / 使い方\r\n\r\n```html\r\n\u003ccanvas id=\"main\" width=\"720\" height=\"480\"\u003e\u003c/canvas\u003e\r\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/sortedindex@latest/dist/index.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@arch-inc/fabricjs-layer@latest/dist/index.js\"\u003e\u003c/script\u003e\r\n\u003cscript\u003e\r\n  // Create a Fabric.js canvas\r\n  let canvas = new fabric.Canvas(document.getElementById(\"main\"), {\r\n    isDrawingMode: true\r\n  });\r\n\r\n  // Create layer manager\r\n  let manager = new fabricLayer.LayerManager(canvas);\r\n\r\n  // Add layers\r\n  for (let i = 0; i++; i \u003c 5) {\r\n    manager.addLayer();\r\n  }\r\n\r\n  // Set active layer\r\n  manager.activeLayer = manager.getLayer(3);\r\n\r\n  // Remove layer\r\n  manager.removeLayer(manager.getLayer(2));\r\n\r\n  // Move layer\r\n  manager.moveLayer(manager.activeLayerIndex, manager.activeLayerIndex + 1);\r\n\r\n  // Dispose layer manager\r\n  manager.dispose();\r\n\u003c/script\u003e\r\n```\r\n\r\nIf you use `Webpack` or other similar solutions, simply install the npm package and start using it.\r\n\r\nTypeScript definitions are available by default. (e.g., [Layer.d.ts](https://cdn.jsdelivr.net/npm/@arch-inc/fabricjs-layer@latest/dist/Layer.d.ts))\r\n\r\n`Webpack` 等を使っている場合は `npm install` でインストールできます。TypeScript の型定義がついてきます。\r\n\r\n```sh\r\nnpm i @arch-inc/fabricjs-layer\r\n```\r\n\r\n```javascript\r\nimport { LayerGroup } from \"@arch-inc/fabricjs-layer\";\r\n```\r\n\r\n### API Documentation / API ドキュメント\r\n\r\nAll of the exported classes and interfaces are listed in [TypeDoc](https://arch-inc.github.io/fabricjs-layer/api/globals.html).\r\n\r\nこのモジュールが export しているすべてのクラスとインタフェースは [TypeDoc](https://arch-inc.github.io/fabricjs-layer/api/globals.html) で閲覧できます。\r\n\r\n### Credits / 開発者\r\n\r\n- [Jun Kato](https://junkato.jp), developer\r\n\r\n### Staying in touch / 開発者に連絡\r\n\r\n- Twitter: [@ArchResearchJp](https://twitter.com/ArchResearchJp)\r\n- Website: https://research.archinc.jp/en (日本語: https://research.archinc.jp)\r\n\r\n### Library in action / 利用例\r\n\r\n- [Demo site](https://arch-inc.github.io/fabricjs-layer/): GitHub Pages accompanied with this library\r\n\r\n---\r\n\r\nCopyright (c) 2020-2022 Arch Inc. (Jun Kato)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farch-inc%2Ffabricjs-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farch-inc%2Ffabricjs-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farch-inc%2Ffabricjs-layer/lists"}