paper.js で筆圧描画とSVGデータ生成


wacomプラグインを使うとjavascriptで筆圧などを取得できるってのを、昨日知りました。ちょうどpaper.jsで筆圧が使えないのを残念に思ってたところだったので、早速組み合わせてみました。微妙な書き味などは、これからチューニングが必要ですが、とりあえず。
あとSVGデータ生成機能も、まだ完全ではないのですがつけてみました。generate svg をクリックするとテキストエリアが出てくるので、コピーしてファイルを作ってください。


paper.jsで筆圧描画とSVGデータ生成サンプル
※ 私の環境のInternet Exprolerでは今のところ使えてません。ごめんなさい


…描けるでしょうか?
webtabletプラグインは、最近のドライバを入れると同時に入るらしいです。らしい、っていうのは、私も最初うまく動かず、ドライバを入れ直したりしてるうちに動いたという感じなのです。wacomのデモページでも動かない場合は、導入方法を工夫してみてください。


javascriptで筆圧を使える件は、調べたらもう1年近く前から話題になっているんですね。Web関係は進化についていけないので近寄らないようにしていたのですが、こんなことが簡単にできるとなったら、これを活用しない手はないです。今後は自分の興味の範囲で取り組んでみたいです。


SVGデータ生成機能については、テキストとグラデーションは未対応です。他にも細かい属性でフォローできてない部分があります。paper.jsのメーリングリストを見たら、SVG生成機能は今後の計画にはあるようなので、それが実装されれば一番よいのですが。それにしても、IllustratorInkscapeでもちゃんと開けるデータを作ろうとすると、色々大変でした。このへんはまた別の機会に。現状、Illustratorでは、symbolのサイズがおかしくなるのが未解決です。