0

我想对 png 图像和其他形状进行良好的性能命中测试。我真的不在乎它们是什么形状，因为使用这种技术在检查（而不是设置）时不会出现性能问题。

我打算将屏幕上的所有图像收集在辅助画布中，仅用于命中测试。对于绘制的每个图像，我将创建一个附加到该特定图像的新颜色。然后我将它们全部绘制在画布中，每个图像将具有不同的填充颜色。

当我点击一个像素（x，y）时，它会得到颜色（r，g，b）。每种颜色都映射到一个图像，因此我可以毫无错误地点击该图像（我不会浪费在查找该点击所击中的内容上）。

在此处输入图像描述

我知道它将被限制为 256*256*256=16 777 216 件，因为这些都是颜色，但我认为现在这不是问题......

所以我真正需要的是知道如何将这些填充颜色放在仅基于每个图像的可见像素的辅助画布上。

更新

在此处输入图像描述 正如您在右侧看到的那样，它是命中测试地图。因此，如果我点击黑色阴影 (c)，我会立即知道我点击了蓝色框，无需任何其他计算。

一项改进是缓存 alpha 数据。还为每个图像实例重用相同的 alpha 数据（我们必须注意缩放和旋转......）。

谢谢

4

1 回答 1

1

下面介绍如何对画布图像的不透明像素进行颜色遮罩。

确保将“PutYourImageHere.png”替换为您自己的图片网址。

<!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 回答