Обнаружение радиального пикселя

Я не хочу проверять столкновение с радиальными элементами.

Проблема в том, что в настоящее время я проверяю только пиксели в виде прямоугольника, потому что другие изображения являются родными с HTML-элементами.

Я использую холст только для рисования граничного фона, чтобы проверить альфа-прозрачность.

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, чтобы проверить коллизию с альфа-прозрачностью от boundary.png?

Моя идея состоит в том, чтобы изменить массив данных пикселей отсюда:

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

javascript collision-detection radial getimagedata
person Adrian Preuss    schedule 14.10.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел ответ логическим мышлением:

Во-первых, мы создаем временный контекст для рисования и рисуем в этой новой области два элемента:

  • красный прямоугольник
  • прозрачная дуга/окружность с составным назначением

Полученное Uint8ClampedArray будет сравнено с исходным Uint8ClampedArray. Если область КРАСНАЯ, мы скрываем пиксели с нулевыми-записями:

this.rectangleToRadial = function rectangleToRadial(source, width, height) {
    var test        = document.createElement('canvas');
    var context     = test.getContext('2d');

    // Create an transparent circle and a red removeable area
    context.beginPath();
    context.fillStyle = 'rgba(255, 0, 0, 1)';
    context.fillRect(0, 0, width, height);
    context.globalCompositeOperation = 'destination-out';
    context.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);
    context.fillStyle = 'rgba(0, 0, 0, 1)';
    context.fill();

    // get the data
    var destination = context.getImageData(0, 0, width, height);
    var size        = destination.data.length;

    // check the pixels
    for(var index = 0; index < size; index += 4) {
        var RED     = destination.data[index];
        var GREEN   = destination.data[index + 1];
        var BLUE    = destination.data[index + 2];
        var ALPHA   = destination.data[index + 3];

        /*
            if the >>red removeable area<< is given, null the pixel from the source
        */
        if(RED == 255 && GREEN == 0 && BLUE == 0) {
            // Remove this from source
            source.data[index]      = null;
            source.data[index + 1]  = null;
            source.data[index + 2]  = null;
            source.data[index + 3]  = null;
        }
    }

    // Return the source `Uint8ClampedArray`
    return source;
};

Это было легко, когда мы пытаемся думать :)

    var image   = _context.getImageData(_position.x - (height / 2), _position.y - (width / 2), width, height);
    var pixels  = this.rectangleToRadial(image, width, height);
person Adrian Preuss    schedule 14.10.2017