Skip to content

Fabric.js用の感圧ブラシ実装 / A lightweight pressure-sensitive brush implementation for Fabric.js

License

Notifications You must be signed in to change notification settings

luandevpro/fabricjs-psbrush

 
 

Repository files navigation

fabricjs-psbrush

build FOSSA Status npm version

fabricjs-psbrush is a lightweight pressure-sensitive brush implementation for Fabric.js v3.x and v4.x.

fabricjs-psbrush は Fabric.js v3.x および v4.x 用の軽量な感圧ブラシの実装です。

Usage / 使い方

<canvas id="main" width="720" height="480"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@arch-inc/fabricjs-psbrush@latest/dist/index.js"></script>
<script>

  // Create a Fabric.js canvas
  let canvas = new fabric.Canvas(document.getElementById("main"), {
    isDrawingMode: true,
    enablePointerEvents: true
  });

  // Initialize a brush
  let brush = new fabric.PSBrush(canvas);
  brush.width = 10;
  brush.color = "#000";
  canvas.freeDrawingBrush = brush;

</script>

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., PSBrush.d.ts)

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

npm i @arch-inc/fabricjs-psbrush
import { PSBrush } from "@arch-inc/fabricjs-psbrush"

API Documentation / APIドキュメント

All of the exported classes and interfaces are listed in TypeDoc.

For instance, PSBrush can be constructed by new PSBrush(canvas) and its instance has various properties including color, opacity, width, simplifyTolerance, pressureCoeff etc. Use of these properties can be observed in Griffith Sketch, a web-based lightweight tool for sketching ideas.

Please note that PSBrush and PSStroke classes are listed as variables and their fields are defined separately as PSBrushIface and PSStrokeIface. This is because Fabric.js requires all relevant classes to be defined through its fabric.util.createClass helper function.

このモジュールが export しているすべてのクラスとインタフェースは TypeDoc で閲覧できます。

例えば PSBrush クラスは new PSBrush(canvas) でインスタンス化でき、 さまざまなプロパティcolor, opacity, width, simplifyTolerance, pressureCoeff など)を持っています。これらのプロパティの実際の利用例は、アイデアスケッチ作成用のWebサービス Griffith Sketch で確認できます。

なお、 PSBrushPSStroke は実際にはクラスですが変数 (Variables) としてリストアップされ、メンバー変数は PSBrushIfacePSStrokeIface という別のインタフェースで定義されています。これは Fabric.js 本体がクラス定義を fabric.util.createClass というヘルパー関数で行うように実装されているためです。

Credits / 開発者

Dependencies / 依存パッケージ

Except for the dependency for Fabric.js, this library contains a TypeScript port of Simplify.js, a high-performance JS polyline simplification library.

Fabric.js の他にパス単純化のためのライブラリ Simplify.js をTypeScriptで書き直して利用しています。

Staying in touch / 開発者に連絡

We have developed this extension in collaboration with the core developers of Fabric.js and relevant information can be found in their issue tracker.

Twitter @ArchResearchJp で連絡がつきます。 Fabric.js 本家の issue でも活動しています。

Library in action / 利用例

  • Demo site: GitHub Pages accompanied with this library
  • Griffith Sketch: a web-based lightweight tool for sketching ideas.

Copyright (c) 2020-2021 Arch Inc. (Jun Kato, Kenta Hara)

About

Fabric.js用の感圧ブラシ実装 / A lightweight pressure-sensitive brush implementation for Fabric.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 97.1%
  • JavaScript 2.9%