https://github.com/arch-inc/fabricjs-layer

Fabric.js用のシンプルなレイヤー実装 / A simple layer implementation on top of Fabric.js
https://github.com/arch-inc/fabricjs-layer

fabric fabricjs fabricjs-psbrush

Last synced: 2 months ago
JSON representation

Fabric.js用のシンプルなレイヤー実装 / A simple layer implementation on top of Fabric.js

• Host: GitHub
• URL: https://github.com/arch-inc/fabricjs-layer
• Owner: arch-inc
• License: other
• Created: 2020-10-22T17:03:32.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-12T16:31:24.000Z (about 3 years ago)
• Last Synced: 2024-10-31T23:45:42.339Z (3 months ago)
• Topics: fabric, fabricjs, fabricjs-psbrush
• Language: TypeScript
• Homepage: https://arch-inc.github.io/fabricjs-layer/
• Size: 2.73 MB
• Stars: 22
• Watchers: 5
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### fabricjs-layer

[![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)

[![npm version](https://img.shields.io/npm/v/@arch-inc/fabricjs-layer)](https://www.npmjs.com/package/@arch-inc/fabricjs-layer)

**fabricjs-layer** is a simple layer implementation for Fabric.js v3.x and v4.x.

**fabricjs-layer** は Fabric.js v3.x および v4.x 用のシンプルなレイヤー実装です。

- npm package: https://www.npmjs.com/package/@arch-inc/fabricjs-layer

- API document: https://arch-inc.github.io/fabricjs-layer/api/globals.html

- Demo site: https://arch-inc.github.io/fabricjs-layer/

### Usage / 使い方

```html

  // Create a Fabric.js canvas

  let canvas = new fabric.Canvas(document.getElementById("main"), {

    isDrawingMode: true

  });

  // Create layer manager

  let manager = new fabricLayer.LayerManager(canvas);

  // Add layers

  for (let i = 0; i++; i < 5) {

    manager.addLayer();

  }

  // Set active layer

  manager.activeLayer = manager.getLayer(3);

  // Remove layer

  manager.removeLayer(manager.getLayer(2));

  // Move layer

  manager.moveLayer(manager.activeLayerIndex, manager.activeLayerIndex + 1);

  // Dispose layer manager

  manager.dispose();

```

If you use `Webpack` or other similar solutions, simply install the npm package and start using it.

TypeScript definitions are available by default. (e.g., [Layer.d.ts](https://cdn.jsdelivr.net/npm/@arch-inc/fabricjs-layer@latest/dist/Layer.d.ts))

`Webpack` 等を使っている場合は `npm install` でインストールできます。TypeScript の型定義がついてきます。

```sh

npm i @arch-inc/fabricjs-layer

```

```javascript

import { LayerGroup } from "@arch-inc/fabricjs-layer";

```

### API Documentation / API ドキュメント

All of the exported classes and interfaces are listed in [TypeDoc](https://arch-inc.github.io/fabricjs-layer/api/globals.html).

このモジュールが export しているすべてのクラスとインタフェースは [TypeDoc](https://arch-inc.github.io/fabricjs-layer/api/globals.html) で閲覧できます。

### Credits / 開発者

- [Jun Kato](https://junkato.jp), developer

### Staying in touch / 開発者に連絡

- Twitter: [@ArchResearchJp](https://twitter.com/ArchResearchJp)

- Website: https://research.archinc.jp/en (日本語: https://research.archinc.jp)

### Library in action / 利用例

- [Demo site](https://arch-inc.github.io/fabricjs-layer/): GitHub Pages accompanied with this library

---

Copyright (c) 2020-2022 Arch Inc. (Jun Kato)