gpt4 book ai didi

javascript - canvas getImageData 返回太多像素

转载 作者:行者123 更新时间:2023-12-02 18:12:51 24 4
gpt4 key购买 nike

我正在创建一个移动网络应用程序游戏,让用户可以在屏幕上滑动来清除它。我正在尝试编写一个智能函数来检测几乎整个 Canvas 何时是透明的。

我有一个间隔,每秒调用下面的函数来进行检查。它应该工作的方式是我取一 block 20 像素宽、与 Canvas 一样高的 Canvas 部分。

该函数应该运行得相当流畅,但由于某种原因,getImageData 函数返回了许多像素。我的扇区始终是 20 像素宽并且具有相同的高度,因此每次都应该返回相同数量的像素。当然,由于 getImageData 返回的数字越来越大,我的循环变得越来越慢。

有谁知道这是什么原因造成的吗?我是否误解了 getImageData 函数的工作方式?

isCanvasTransparent: function (fromX, toX, currentIteration) {

if(currentIteration < this.clearedIterations) { // If a sector is already clear, we dont need to check it again
this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1);
return;
} else {
var data = this.context.getImageData(fromX, 0, toX, parseInt(this.canvas.style.width)).data;
var counter = 0;
var i = 0;

// For some reason, the length increases, but the diff between fromX and toX is always 20
console.log(data.length);

for(i=0;i<(data.length);i+=4) {
if(data[i+3]!==0){
counter++;
// I stop iterating, since there are too many non transparent pixels
if(counter > 10) {
break;
}
}
}

// I accept that 10 pixels in each sector is not transparent
if((counter < 10) && !this.alerted) {
this.clearedIterations++; // Here we increase clearedIterations, since this sector is clear

// There are no more iterations, so we are done
if(currentIteration === this.maxIterations) {
// this is the interval that calls isCanvasTransparent(0, 20, 0)
// in the first place. The interval is called each second. But as soon the whole view
// is transparent, we clear it, so that isCanvasTransparent is no longer called
clearInterval(this.checkCanvasTimeout);
this.alerted = true;
TouchHelpers.removeTouchEvents();
this.levelCompleted();
return;
} else {
// this sector is clear, but we need to check the next one, since we are not at the end
this.isCanvasTransparent(fromX + 20, toX + 20, currentIteration + 1);
}
}
}
},

最佳答案

如果没有看到您如何设置 fromX/toX,则不确定,但看起来您没有为 getImageData 提供正确的参数。

context.getImageData 具有以下参数:

  • x:要提取的起始x坐标,
  • y:要提取的起始 y 坐标,
  • 宽度:提取一个这么多像素宽的 block ,
  • 高度:提取这么多像素高的 block

[添加:基于附加信息]

如果您想要相同大小的像素数据 block ,您的第一个调用是

var data=getImageData(0,0, 20, canvas.height).data;

你的第二个电话是:

// Note: the width arguement remains at 20, not increase to 40

var data=getImageData(20,0, 20, canvas.height).data;

关于javascript - canvas getImageData 返回太多像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19568494/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com