今回はCanvasを利用したペイントツールを作った。
Wacomペンタブレットの筆圧感知にも対応した。
筆圧感知のためにはここから使用環境にあわせたプラグインをインストールする必要がある。
lislis Painter 1.04

Show me
/ Download zip
機能について
Tools (ツール)
Brush (ブラシ)
ペン先が平坦なブラシツール
太さを1くらいにしてペンタブレットで描くと、鉛筆っぽいタッチになる。
Air Brush (エアブラシ)
輪郭がぼやけたブラシツール
※現状では色を塗り重ねると、グラデーションに段々が出たり、ブラシの縁が微妙に黒ずんで、まるでクリームを盛りつけたようになることがある。
Syringe (スポイト)
クリックすると表示されている画像から色を取得する。
alt+clickでも同様の動作。
Eraser (消しゴム)
透明色で塗るブラシ。
Brushと同じくペン先は平坦
Fill Rect (矩形塗りつぶし)
矩形領域を選択色で塗りつぶす。
Clear Rect (矩形消去)
矩形領域を透明色で塗りつぶす。
Paint Fill (領域塗りつぶし:バケツツール)
クリックした場所と同じ色の閉領域を塗りつぶす。
Paint Fillダイアログでいくつかの設定が可能。
- Paint By:
塗りつぶし時の参照レイヤを設定する。
- Integrated Layer: (デフォルト)
全てのレイヤを重ねた状態の(見たままの)画像を参照してペイントする。
- Current Layer:
現在の描画先レイヤを参照してペイントする。
- Current Layer 1 or 2...:
指定した番号のレイヤを参照してペイントする。
-
Antialias:
アンチエイリアスをかける。デフォルトでONになっている。
Brushツールで描いた線はアンチエイリアスがかかっているので、これをONにしないと塗りに隙間があいてしまう。
細い線は塗りに削られて消えてしまうので、細い線で描いた領域を塗る場合は、レイヤ1に線を描いてレイヤ2でPaint Fillすると良好な結果を得られる。
-
Threshold:
同色範囲のしきい値。
Brushで塗りつぶした領域は色が均等でないため、全体を塗りつぶすにはこの値を10程度まで上げる必要がある。
Layers (レイヤ)
描画先のレイヤを選択する。
眼のアイコンでレイヤーの可視/不可視切り替え。
Edit (編集)
Undo (元に戻す)
直前の描画をキャンセルして元に戻す。
ctrl+zでも同様の動作。
※Operaではデフォルトで、ctrl+zを押すと直前に閉じたタブを開き直す機能が同時に働いてしまう。
Clear All (全消去)
全てのレイヤを消去する。
Undoで元に戻すことはできないので注意。
Post Image (画像投稿)
描いた絵をギャラリーページに投稿する。
投稿後は強制的にギャラリーページに移動する。
Color (色選択)
RGBもしくはHSLで描画色を選択する。
Aは描画色の透明度を指定する。
Brush (ブラシサイズ)
ブラシサイズの指定
四角い領域をクリックするとブラシサイズを変更できる。
1,2,4,8...と書かれたボタンをクリックすることでもサイズを選択できる。
このブラシサイズはBrush, Air Brush, Eraserに適応される。
互換性
Chrome 4.1: ○
FireFox 3.6.3: ○
Opera 10.51: ○
IE 8.0: ×
IEでは全く動作しない。ExplorerCanvasがサポートしていないImageDataやtoDataURLを使うことを最初から予定していたので、現行のIEへの対応はあきらめている。
Chrome、FireFox、Operaではいずれも正常に動作する。
ただ、ブラウザによって動作の重さや画質に違いがある。Operaでは特に消しゴムツールが重い。
今回のまとめ
欲しい機能はまだまだ一杯あるが、まずは自分が絵を描くのに最低限必要な機能だけ実装した。
追加したい機能としては、、レイヤー関係の統合・追加/削除、範囲選択(マスク)、直線描画など。
色選択はカラーホイールでも選択できるようにしたい。
エアブラシの画質が汚いのはCanvasのビット深度が8ビットなので致し方ない。
RGBAをそれぞれ実数で保持する仮想キャンバスに描画して、それをCanvasのImageDataに描画する形にすれば画質は改善されるだろう。
でも今のところそこまでやるつもりはなく、うまく誤魔化す方法を思案中。
あとはサーバ側のプログラム。
描いた絵をサーバにPOSTして保存するのは簡単なので、掲示板やSNSと組み合わせれば、ちょっとしたWebサービスが出来る。
本ソフトウェアはjQueryを使用しています。
追記:
Syringeはレイヤー上の色を取る仕様だったが、非常にわかりにくいので、実際に目に見えている色を取得するように変更した。
追記:
ツールにPaint Fill(Flood Fill)を追加
追記:
UIの一部をテキストからアイコンに変更。
色選択でHSLとRGBをタブで切り替えられるようにした。
レイヤの可視/不可視アイコン追加。
追記:
投稿機能と投稿画像ギャラリーを試験的設置。
クライアント側ではCanvas.toDataURL()でPNG形式のDataURLを取得し、jQuery.post()でサーバーに送信している。
サーバ側では、POSTされたデータがPNGのDataURLであることを確認して、DBに記録している。