0

PNG 画像やその他の形状のヒット テストのパフォーマンスを向上させたいと考えています。この手法を使用すると、チェック時のパフォーマンスの問題がないため (セットアップではありません)、それらがどのような形状であるかはあまり気にしません。

ヒット テストのためだけに、画面上のすべての画像をセカンダリ キャンバスに収集するつもりです。描画された各画像に対して、その特定の画像に添付される新しい色を作成します。次に、それらすべてをキャンバスに描画します。各画像は異なる塗りつぶし色になります。

ピクセル (x, y) をクリックすると、色 (r, g, b) が取得されます。すべての色が画像にマッピングされているため、画像をクリックしてもエラーは発生しません (そのクリックでヒットしたものを探すのに無駄はありません)。

ここに画像の説明を入力

256*256*256=16 777 216 アイテムに制限されることはわかっていますが、それらはすべての色なので、今のところ問題になるとは思いません...

したがって、私が本当に必要としているのは、これらの塗りつぶしの色を、各画像の可視ピクセルのみに基づくセカンダリ キャンバスに配置する方法を知ることです。

アップデート

ここに画像の説明を入力 右に見られるように、それはヒット テスト マップです。したがって、黒い影 (c) をクリックすると、他の計算を行わずに青いボックスをクリックしたことがすぐにわかります。

改善の 1 つは、アルファ データをキャッシュすることです。また、各イメージ インスタンスに同じアルファ データを再利用します (スケーリングと回転に注意する必要があります...)。

ありがとう

4

1 に答える 1

1

キャンバス画像の不透明なピクセルをカラーマスクする方法は次のとおりです。

必ず「PutYourImageHere.png」を独自の画像URLに置き換えてください。

<!doctype html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid blue;}
</style>

<script>
    $(function(){

        var img=new Image();
        img.onload=function(){

          var red=255;
          var blue=0;
          var green=0;

          var canvasCopy=document.getElementById("canvasCopy");
          var ctxCopy=canvasCopy.getContext("2d");

          var c=document.getElementById("canvas");
          var ctx=c.getContext("2d");
          ctx.drawImage(this,0,0);

          var imgData=ctx.getImageData(0,0,c.width,c.height);

          for (var i=0;i<imgData.data.length;i+=4)
            {
                if(imgData.data[i+3]>0){
                    imgData.data[i]=red;
                    imgData.data[i+1]=green;
                    imgData.data[i+2]=blue;
                    imgData.data[i+3]=255;
                }
            }
          ctxCopy.putImageData(imgData,0,0);
        }
        img.src = "PutYourImageHere.png";

    }); // end $(function(){});
</script>

</head>

<body>

    <canvas id="canvas" width="300" height="300"></canvas>
    <canvas id="canvasCopy" width="300" height="300"></canvas>

</body>
</html>
于 2013-02-14T02:26:10.143 に答える