Данные изображения в JS

Question

Я хочу знать, правильно ли я понял.

Я зацикливаю свою карту и загружаю спрайты на карту.

Поэтому я решил сохранить информацию о пикселях в массиве, чтобычто, когда я щелкаю мышью, я проверяю, находится ли он в диапазоне пикселей, и получаю связанный с ним идентификатор (по сути, с точностью до пикселя для определения объекта, по которому щелкнули?)

Это мой мыслительный процесс:

Я рисую спрайт:

ctx.drawImage(castle[id], abposx, abposy - (imgheight/2));  
myImageData[sdata[i][j][1]] = 
      ctx.getImageData(abposx, abposy, castle[id].width, castle[id].height);

Затем как-то левой кнопкой мыши, проверьте, является ли мышь x и мышь y inbetween диапазоном массивов и верните значениеmyImageData?

Или я неправильно понял, о чем getImageData?

Answer 1

getImageData дает вам все данные пикселей для изображения. В основном вам нужно использовать getImageData, только если вы делаете какие-либо пиксельные манипуляции с изображением, такие как изменение его оттенка / цвета, или применение фильтра, или вам нужны определенные данные, такие как r / g / b или alpha ценности. Для проверки на идеальное столкновение пикселей вы должны сделать что-то вроде следующего:

    var imageData = ctx.getImageData(x, y, 1, 1);
    if(imageData.data[3] !== 0){
        // you have a collision!
    }

imageData.data[0-3] содержит массив данных, 0-2 - значения цвета r / g / b, а 3 - альфа-значение. Поэтому мы предполагаем, что если альфа равна 0, это должна быть прозрачная часть. Также обратите внимание, что в примере и на скрипке я собираю данные с самого холста, поэтому, если за ним было изображение, которое не было прозрачным, оно считалось бы непрозрачным. Лучший способ сделать это, если у вас много изображений, которые накладываются друг на друга, - это сохранить копию изображения где-то за кадром и сделать перевод координат, чтобы получить положение на изображении. Вот хорошая статья MDN , объясняющая также getImageData.

Демонстрация в реальном времени