2
我不想检查径向元素的碰撞。检测径向像素
问题是,目前我只检查像素为矩形,因为其他图像本身就是HTML元素。
我只使用画布绘制边界背景来检查alpha透明度。
this.checkCollision = function checkCollision() {
var width = 34;
var height = 32;
var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height);
var pixels = image.data;
var size = image.data.length;
// HERE I WANT TO CHECK A RADIAL AREA
for(var index = 0; index < size; index += 4) {
var RED = image.data[index];
var GREEN = image.data[index + 1];
var BLUE = image.data[index + 2];
var ALPHA = image.data[index + 3];
if(_debug) {
document.querySelector('#debug').innerHTML = JSON.stringify({
POSITION: _position,
INDEX: index,
COLOR: {
R: RED,
G: GREEN,
B: BLUE,
A: ALPHA
}
}, 0, 1);
}
if(ALPHA !== 0) {
return true;
}
}
_context.putImageData(image, 0, 0);
return false;
};
预览
这里是一个工作小提琴:
https://jsfiddle.net/2bLfd6xp/
我怎么能在getImageData
选择径向像素范围检查与碰撞来自的alpha透明度?
我的想法是从这里修改的像素数据阵列:
var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height);
,并删除无形edges
。但是,从基于矩形的像素阵列计算径向区域以去除这些不需要的像素的最佳做法是什么?
对于样本:
var image = _context.getImageData(_position.x - (height/2), _position.y - (width/2), width, height);
var radial_area = selectRadialArea(image, radius);
function selectRadialArea(pixelArray, radius) {
/*
Modify `pixelArray` with given `radius`...
All pixels outside the `radius` filled with `null`...
*/
return theNewArray;
}