趣味で作っているお絵描きツール

今屋 雄太 @y_imaya

ブログに書こうか、Twitterで軽く紹介くらいにしようか迷ってる。まだ実用には遠いから Twitter がいいんだろうけど、使い方簡単に説明しないとナンダコレで終わってしまいそうな気もする

今屋 雄太 @y_imaya

まだ実用にはほど遠いですが、趣味で作っているお絵描きツール張っておきますね。 http://t.co/A3gjdp4LFO ブラウザで筆圧を感知してなんとなくきれいな曲線を描画できます。

今屋 雄太 @y_imaya

初見だとたぶん使い方わからないと思うので説明すると、まず最初に右の方の "Add Layer" で "VectorLayer" を選んでレイヤーの追加をしてください。その後は左側の空白に好きにお絵かきしてください。

今屋 雄太 @y_imaya

好きにお絵描きしたあと、キーボードのある環境では Alt を押すか、ツールバーの "編集" を選択すると、描画した線を構成する点の移動ができます。太さの変更や点の削除などもできます。マウスのある環境では、点の上でホイールを回しても太さが変えられます。

今屋 雄太 @y_imaya

描いたのを保存したい場合は "Save", "Load" でそれぞれ Google Drive への保存と読み込みができます（要認証）　保存形式は PNG の独自拡張形式ですが、開発中の暫定実装なのでこれは将来的に変更するかもしれません。

今屋 雄太 @y_imaya

（ながい）

今屋 雄太 @y_imaya

筆圧の取得は以下の環境に対応してます。 Windows PC では Wacom のペンタブ(要ドライバのインストール)、Android (筆圧対応端末)では Chrome, Firefox など、Win8 タブレットでは IE10 (PointerEvents) など。

今屋 雄太 @y_imaya

お勧めは Surface Pro + IE10 です。この環境ではペンの座標が細かく取得できるので、かなり滑らかな描画ができます。（一方 Win8 の Chrome などでは Touch ではなく MouseEvent になってしまうので筆圧が取れないという…）

今屋 雄太 @y_imaya

また、Pointer Events ではタッチとペンを区別することができるので、"Ignore Touch (Pointer Events)" を有効にしておくと、手を画面においたままペンで書く事ができます。

今屋 雄太 @y_imaya

バグとか未実装な部分はまだまだたくさんあって、特にラスターレイヤーかなりバグってます。（将来的には塗りつぶしなども実装するため必須なんですが…）現在はベクターレイヤーかSVGレイヤーを使うと良いです。

今屋 雄太 @y_imaya

どこで苦労したのかぱっと見だとわかんないようなショボさですが、一応言っておくとベジェ曲線を太さを変えながら描画するアルゴリズムの実装がメインです。

今屋 雄太 @y_imaya

（ブログでやればよかった）