获取X和Y像素坐标，当遍历HTML5画布getImageData

我遍历从canvas一些图像数据拉着，像这样：获取X和Y像素坐标，当遍历HTML5画布getImageData

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height); 
var data = imageData.data; 

for (var i = data.length; i >= 0; i -= 4) { 
    if (data[i + 3] > 0) { 
     data[i] = this.colour.R; 
     data[i + 1] = this.colour.G; 
     data[i + 2] = this.colour.B; 
    } 
}

如何计算当前的X和Y像素坐标，我在？

来源

2012-12-01 jcvandan

简单的算术序列：

将线性位置除以宽度。这是你的Y坐标。将Y坐标乘以宽度，然后从线性位置中减去该值。结果是X坐标。

另请注意，由于它是RGBA，所以必须将线性位置除以4。

来源

2012-12-01 15:17:15

多德 - 感谢的是，我一直在敲打我的头撞墙了几个小时与此，现在排序 – jcvandan

你能提供一个例子吗？我不认为我完全理解这个顺序。下面的答案是否正确？我正在努力获得像素的X和Y坐标。任何帮助将非常感激。 – Awin

我想我只需要知道“线性位置”的含义。这是数据数组中的位置吗？或者是索引的像素位置/ 4？ – Awin

这应该工作

var x = (Math.floor(i/4) % 4); 
var y = Math.floor(Math.floor(i/this.el.width)/4);

来源

2012-12-01 15:40:12 lostsource

不工作..测试 – user889030

修正和测试的代码版本：

var x = (i/4) % this.el.width; 
var y = Math.floor((i/4)/this.el.width);

来源

2013-12-07 19:58:24 user11153

工程..测试 – user889030

获取X和Y像素坐标，当遍历HTML5画布getImageData

回答

相关问题