こんな画像があって、
こんなふうになぞったときに、
ちゃんとなぞれてるかどうか判定する定石とかあるの？ という話が先日、社内で出まして。
定石があるかどうかわからないけど、こんな風にやったら多少ずれたりはみ出たりしてもロバストに判定できそうじゃないですか、というのを試しに実装したので記事にしておきます。定石などあれば通りすがりのエロい人がきっと教えてくれるはず。
概要
- 手本となる画像となぞった画像（なぞった部分だけ）の差分を取る
- それをぼかす
- ぼかした画像に閾値以上のピクセルが残ってるかどうかを調べる
差分を取る
差分を取る画像は、上の最初の画像と次の画像です。
なお、画像の黒い部分はすべて透明になっているものとします。
差分は次のようになります。（HTML Canvas の globalCompositeOperation を xor にして作成）
ぼかす
ガウスぼかしを使いました。
結果
例えば、アルファ値が178以上のピクセルだけ残すとすると、真っ黒になるのでちゃんとなぞれていると判定できます。
こんな風にはみ出しすぎると、
結果はこうなります。
実際に動くやつ
ソースコード