arch-inc/fabricjs-psbrush

fabricjs-psbrush

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 用の軽量な感圧ブラシの実装です。

npm package: https://www.npmjs.com/package/@arch-inc/fabricjs-psbrush
API document: https://arch-inc.github.io/fabricjs-psbrush/api/globals.html
Demo site: https://arch-inc.github.io/fabricjs-psbrush/

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);
  canvas.freeDrawingBrush = brush;

  // Set some options...
  brush.width = 10;
  brush.color = "#000";
  brush.disableTouch = true; // disable touch and only use mouse and pen devices
  brush.pressureManager.fallback = 0.3; // fallback value for mouse and touch events
</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 で確認できます。

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

Credits / 開発者

Jun Kato, core algorithm developer
Kenta Hara, developer
See the full list of contributors here

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 でも活動しています。

Pressure support for styluses? #4885

Library in action / 利用例

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