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

前回のものに、カラーピッカーと線幅スライダーと、アンドゥ・リドゥ機能をつけてみました。


paper.jsで筆圧描画とSVGデータ生成サンプル(2)
※ 私の環境のInternet Exprolerでは相変わらず使えてません。


カラーピッカーはこちらのもの。これで使っているライブラリ script.aculo.us のサンプルにスライダーがあったので、線幅調整用に使用。同じく使っている prototype.js の機能(クラスの継承)をアンドゥ・リドゥに使用しました。


アンドゥ・リドゥは修飾キーなしの z、shift-z で機能し、描画だけを対象としています。色や線幅の変更は取り消しできません。仕組みとしては、アンドゥは最後に描いた線を見えなく(visible=false)しているだけ。リドゥは再び見えるようにしているだけ、というとりあえずの実装です。アンドゥ後に描画すると、リドゥはリセットされます。(見えない状態になっている線が消去される。)


この仕様だと、リドゥ可能な状態でSVGの書き出しをすると、visible==false な線も書き出されてしまうので、visible==false のItemは書き出さないように、書き出しスクリプトを変更しました。書き出すかどうかについては、スクリプト内に設定値があります。


あとはレイヤーがあれば、イラスト描きツールとして実用になりそう。
レイヤー機能は paper.js に元々あるので、インターフェイスが作れれば、これもそれほど手間をかけずに実現できそうです。