5

このサイトの他の場所で提供されているCanvasコードを使用して、不透明な部分が不規則な形状である、いくつかの重なり合う透明なpngがある画面を作成しました。カーソルの下の色を取得できます。それは素晴らしいことです。しかし、私の形はすべて同じ色であり、特定の形のIDも取得する方法が必要なので、どれがクリックされたかがわかります。国に到達するために重複するpngで作成されたマップを想像し、どの国がクリックされたかを検出したいとします。私の知る限り、ID検出は長方形の領域にのみ適用されます。助言がありますか？

$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert(hex);
});

このコードは色を取得して表示します（findPosとrgbToHexは、わかりやすくするために省略された別個の関数です）。IDが必要です！ヘルプ！

4

1 に答える 1

4

透明度があっても、画像はすべて長方形です。次に、長方形の交点によってクリックされたポイントにある画像がわかります。画像の配列と、ポイントの交点の幅と高さを含むx、yポイントを確認してください。次に、クリックされた可能性のある画像の配列を考え出します。リストに1つしかない場合は、これで完了です。

画像には、あなたが書いたのとは逆の順序の暗黙のZオーダーがあります。つまり、画像は、その画像と重なる次の画像によって上書きされます。これを使用して、クリックされたポイントに複数の順序がある場合に、ヒットテストのためにそれらを試す順序を知ることができます。唯一の秘訣は、画像のピクセルが透明かどうかを検出することです。

1つの画像でクリックされたピクセルポイントの透明度を検出するために、2番目の非表示のキャンバス要素を保持することができます。それをクリアしてから、同じ位置にターゲット画像を書き込み、同じコードを使用して、2番目のキャンバス内のクリックされたピクセルが透明色であるかどうかを確認します。そうである場合は、不透明なピクセルがクリックされた画像が得られるまで、Zオーダーの次の画像でこのプロセスを繰り返します。

小さいながらも重要な最適化は、最初にクリックされた色をチェックすることです。透明な色の場合は、不透明なポイントでクリックされた画像がないことがすでにわかります。

于 2012-10-11T02:08:25.883 に答える