HTML Canvas Tracing

Question

HTML5/Canvasで画像をトレースし、あらかじめ定義されたパスから逸脱した場合に警告するために何かを構築しようとしています。

私はキャンバスに外部画像を読み込む方法を理解していて、その上にマウスオーバー/マウスオーバーイベントが描画されるようにしましたが、頭を上げるのに問題があるのは2つを比較することです。

画像はすべて白い輪郭上に黒色で表示されます。そのため、getPixelスタイルのイベントでは、マウスがどこに描画されているのかがわかります。

私はマウスの位置でそれを行うことができますが、それは、すべての画像の輪郭線のパスを定義する必要になります（したがって、理想的に下にある画像を解析することにより、それをやりたいと思っ、かなりの数があります）。..

私はFlashで可能であると言われましたが、できるだけ避けて、非フラッシュプラットフォーム（つまりipad）との互換性を維持して、ページを実行するための主要なターゲットにすることができるようにしたいと考えています。

洞察力や援助をいただければ幸いです。

Answer 1

私はすでにこれを解決する最も単純なアプローチに触れたと思います。

キャンバス上に白黒の画像がある場合、mousemoveイベントハンドラを要素に付けて、カーソルの位置を追跡できます。ユーザーがleft-mouseを停止している場合、それらが現在事前定義されたパスをトレースしているかどうかを判別する必要があります。ユーザーには迷惑をかけないように、ピクセルの小さなウィンドウをサンプリングすることで問題のこの部分にアプローチします。 9x9 pixelsの周りの何かは、おそらく良いサイズでしょう。ウィンドウのサイズを両方のディメンションでoddにして、両方向で対称サンプリングを行うようにしてください。

カーソルの位置を使用して、キャンバスにgetImageData()を呼び出します。関数の呼び出しは次のようになります：getImageData(center_x - Math.floor(window_size/2), center_y - Math.floor(window_size/2), window_size, window_size)これで、カーソルの真中にピクセルのサンプルウィンドウが表示されます。そこから、非白色のピクセルがウィンドウ内にあるかどうかを簡単に確認することができます。または、パス上でユーザーを宣言するために、より厳密で非特定の数の非白色ピクセルが必要な場合もあります。

この作業をうまく行うための鍵は、ユーザーがパスから最も細かいビットを逸脱したときに、ユーザーが否定的なフィードバックを受け取らないようにすることです（そうでない限り）。その時点で、ユーザーは迷惑と不満を感じる危険があります。

最終的に2つのアプローチのうちの1つになります。アプリケーションの実際のベクトルパスをロードして、ユーザーのカーソルを比較します（つまり、point-in-pathのチェックを行う）、または画像からピクセルデータをサンプリングします。 point-in-pathチェックの完全な精度が必要ない場合は、ピクセルサンプリングがうまく動作するはずです。

---

編集：私はちょうどあなたの質問を再読み込みしてgetPixel()をご参照に基づいて、あなたはこのためのWebGLを使用している場合があります、ということに気づきました。 WebGLのアプローチは、あなたがもちろん異なる機能を使用することを除いて同じです。しかし、WebGLを必要とする必要はないと考えていますが、2Dコンテキストは十分な柔軟性を持たなければなりません（アプリケーションがそれよりも複雑でない限り）。