npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@arch-inc/fabricjs-psbrush

v0.0.20

Published

A lightweight pressure-sensitive brush implementation for Fabric.js

Downloads

508

Readme

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

  • 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 で確認できます。

なお、 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 / 利用例


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