首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >画布getImageData返回太多像素

画布getImageData返回太多像素
EN

Stack Overflow用户
提问于 2013-10-24 14:16:55
回答 1查看 699关注 0票数 0

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

我有一个间隔,在每秒钟内调用函数来进行检查。它的工作方式应该是,我取一个扇区,宽20 as,和画布一样高。

这个函数应该运行得很平稳,但是由于某种原因,getImageData函数返回到许多像素。我的扇区总是宽20 it,高度相同,所以每次都应该返回相同数量的像素。当然,由于getImageData返回的数字越来越高,所以我的循环变得越来越慢。

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

代码语言:javascript
复制
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);
                }
            }
        }
    },
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-24 15:07:32

如果不看X/toX是如何设置的,这是不确定的,但看起来您没有给getImageData适当的参数。

context.getImageData具有以下参数:

  • 从x坐标开始提取,
  • 从y坐标开始提取,
  • 宽度:提取这么多像素宽的块,
  • 高度:提取这么多像素高的块

加法:基于附加信息

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

代码语言:javascript
复制
var data=getImageData(0,0, 20, canvas.height).data;

你的第二个电话是:

代码语言:javascript
复制
// Note: the width arguement remains at 20, not increase to 40

var data=getImageData(20,0, 20, canvas.height).data;
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19568494

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档