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;
}