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

arch-inc/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);
  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 で確認できます。

なお、 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-2022 Arch Inc. (Jun Kato, Kenta Hara)