はじめに

JavaScript でアプリケーションを作っていると、筆圧を取得したくなることがよくあると思います。
ここでは JavaScript でタッチやペンによる筆圧の取得の仕方について簡単にまとめます。

Wacom ペンタブレットによる筆圧の取得

Wacom のペンタブレットではブラウザにプラグインをインストールすることにより筆圧の取得が可能になります。
最近はタブレットの最新版ドライバをインストールすると一緒にプラグインもインストールされるようです。

タブレットプラグインのバージョンによる API 変更

Wacom のタブレットプラグインでは元々ペンを扱う単体のものでしたが、バージョン 2 からはタッチと統合されたため API が変更されました。
基本的には統合であるため、プラグインのオブジェクトに .penAPI を付けるか付けないかの違いしかありません。

筆圧の取得

まず、以下のように Wacom タブレットプラグインをドキュメント上に設置します。

<object type="application/x-wacomtabletplugin"></object>

タブレットプラグインでは、後述する Touch Events や Pointer Events の様にイベントに筆圧がついてくるわけではないので、イベントのハンドリング自体は Mouse Events で行い、そこで筆圧を取得するのが良いと思います。

// プラグインの object 要素を取得
var plugin = document.querySelector('object[type="application/x-wacomtabletplugin"]');
var pressure;

// Pen API からペンの筆圧を取得する (pointerType:1 = ペン, 2 = マウス, 3 = 消しゴム)
if (plugin && plugin.penAPI && plugin.penAPI.isWacom && plugin.penAPI.pointerType === 1) {
  pressure =  plugin.penAPI.pressure;
}

筆圧以外の情報やタッチについても取得したい場合は Wacom の WebPluguinReleaseNote を参照。

Touch イベントによる筆圧の取得

モバイル環境 (Android) ではスタイラスと筆圧に対応した端末もいくつかあります。
Chrome や Firefox では Touch オブジェクトに筆圧のプロパティがあります。
現在 Chrome ではプレフィックス付きの webkitForce, Firefox では単に force となっています。

touchstart, touchend, touchmove などのイベントをハンドリングし、その中で TouchEvent オブジェクトの上記プロパティを参照すると良いでしょう。

このプロパティのサポート状況は以下のようになっています。

webkitForceforce
Android Chrome 17+O-
Android Browser(4.1)--
Firefox 6+-O
iOS Safari(6.0)--

Pointer Events (IE10) による筆圧の取得

IE10 では Pointer Events というTouch Events とは別のイベントでタッチやペンの入力を扱う事が出来ます。
ブラウザが Pointer Events に対応しているかどうかは navigator.msPointerEnable によって判断することができます。
MSPointerDown, MSPointerUp, MSPointerMove などのイベントをハンドリングし、その中でイベントの pressure プロパティを参照することで筆圧を取得します。
また、入力がマウスなのか、ペンなのか、それともタッチなのか判別することもできます。
なお、筆圧が取得可能なのはペンのみで、タッチでは pressure は 0 に固定されるようです。

var pressure;

// PointerEvent からペンの筆圧を取得する
if (window.navigator.msPointerEnable && pointerEvent.pointerType === MSPointerEvent.MSPOINTER_TYPE_PEN) {
  pressure = pointerEvent.pressure;
}

まとめ

それぞれの環境で利用可能な筆圧の取得方法をまとめると以下のようになります。

環境Wacom Tablet PluginTouch EventsPointer Events
Windows(PC), MacOSO--
Windows Tablet + IE10--O
Android Chrome-O-
Android Firefox-O-

ただし、現在 WebKit で Pointer Events の実装が勧められているみたいなので、今後は Android でも Pointer Events で取得できるようになるかもしれません。

なお、筆圧はどの方法でも 0 から1 の範囲になります。