Narwhals Playing Mahjong

    @arch-inc/fabricjs-psbrush
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.20 • Public • Published

    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)

    Install

    npm i @arch-inc/fabricjs-psbrush

    DownloadsWeekly Downloads

    166

    Version

    0.0.20

    License

    MIT

    Unpacked Size

    41.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • arcatdmz