canvasのお絵描きツールに塗りつぶし機能をつけてみる


塗りつぶし機能を作ってみようと思ったけど、いろいろ苦戦。再帰を使えば簡単にできると思ったのですが、小さい範囲ならともかく、ちょっと大きくなるとブラウザに怒られました。

というわけで、JavaScriptに以下のようなコードを記述。

上記関数を呼び出す時には下記のような記述。

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

なんだか汚いコードですみません。似たような記述が二箇所にあったりしてますしね・・・。
ようは、ピクセルごとに色を取得して、選択したピクセルが塗りつぶす色と違うようであればそのピクセルを塗りつぶし、さらにその点の上下左右の点を見て先ほど選択したピクセルの元の色と同じであれば塗りつぶすということを繰り返しています。
あまりいいやり方とはいえないかも。多分、下記のようなアルゴリズムを使ったほうが効率的かもしれません。
塗りつぶしアルゴリズム(scanline seed fill algorithm) – jsdo.it – Share JavaScript, HTML5 and CSS
ペイント・ルーチン (2)アルゴリズムの高速化
ただ、自分には何をやってるのか全く分からなかったので、もっと分かりやすい方法で実装しています。その分、ちょっと遅いとは思います・・・。

線にアンチエイリアスがかかって塗りつぶしが思いもよらない結果になる時があるようです。てっきり、アンチエイリアスはアルファ値で調節してるだけだと思ったので、アルファ値を考慮しない(というより0かそうでないかしか見ていない)アルゴリズムにしたのだけれども、そういうわけではないよう。どうして、lineToの機能にアンチエイリアスをかけないようにする指定がないのだろうか・・・。
ctx.translate(0.5,0.5);としたらいいとどこかに書いてあったのだけれども、あまり関係なさそうだった。

コメントを残す

メールアドレスが公開されることはありません。