JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Методы манипулирования пикселами могут пригодиться для реализации обработки изображений. Пример 21.10 демонстрирует, как создать простейший эффект размытия или «смазывания» быстро движущегося объекта в элементе

<canvas>~

Пример демонстрирует применение методов

getlmageData

и

putlmageData

и показывает, как выполнять итерации по пикселам в объекте

ImageData

и изменять их значения, но без подробного описания. Полная информация о методах

getlmageData

и

putlmageData

приводится в справочной статье

CanvasRenderingContext2D

, а подробное описание объекта

ImageData

– в его собственной справочной статье.

Пример 21.10. Создание эффекта размытия быстродвижущегося объекта с помощью объекта

ImageData

// "Смазать" пикселы прямоугольной области вправо, чтобы воспроизвести эффект быстрого

// движения объекта справа налево. Значение п должно быть равно или больше 2. Нем больше

// значение, тем сильнее эффект смазывания. Координаты и размеры прямоугольной области

// задаются в системе координат по умолчанию,

function smear(c, п, х, у, w, h) {

// Получить объект ImageData, представляющий пикселы области эффекта

var pixels = c.getImageData(x,у,w,h);

// Смазывание выполняется на месте, и потому требуется получить только

// исходный объект ImageData. Некоторые алгоритмы обработки изображений требуют

// использования дополнительного объекта ImageData для сохранения трансформированных

// значений пикселов. Если бы потребовался промежуточный буфер вывода, можно было бы

// создать новый объект ImageData с теми же размерами следующим способом:

// var output_pixels = с.createlmageData(pixels):

// Эти размеры могут отличаться от значений аргументов w и h: на каждый

// CSS-пиксел может приходиться несколько аппаратных пикселов,

var width = pixels.width,

height = pixels.height:

// Это массив байтов, хранящий информацию о пикселах, слева направо и сверху вниз.

// Для каждого пиксела отводится 4 последовательных байта, в порядке R,G,В,А.

var data = pixels.data;

//

Смазать каждый пиксел после первого в каждой строке, заменив его суммой

// 1/n-й доли его собственного значения и m/n-й доли значения предыдущего пиксела

var m = n-1;

for(var row = 0; row < height: row++) { // Для каждой строки

var і = row*width*4 +4; // Индекс второго пиксела в строке

for(var col = 1; col < width; col++, і += 4) { // Для каждого столбца

data[i] = (data[і] + data[i-4]*m)/n; // Красная составляющая

data[i+1] = (data[i+1] + data[i-3]*m)/n; // Зеленая

data[i+2] = (data[i+2] + data[i-2]*m)/n; // Синяя

data[i+3] = (data[i+3] + data[i-1]*m)/n; // Альфа-составляющая

}

}

// Скопировать смазанное изображение обратно в ту же позицию в холсте

с.putImageData(pixels, х, у);

}

Обратите внимание, что на метод getImageData накладываются те же ограничения политики общего происхождения, что и на метод toDataURL: он не будет работать с холстами, в которые вставлялись изображения (непосредственно, вызовом метода drawImage, или косвенно, с помощью метода CanvasPattern), имеющие происхождение, отличное от происхождения документа, содержащего элемент <canvas>.

21.4.15. Определение попадания

Метод

isPointInPath

позволяет узнать, находится ли указанная точка внутри (или на границе) текущего контура, и возвращает true, если это так, и false-в противном случае. Метод принимает координаты точки в не преобразованной системе координат по умолчанию. Это позволяет использовать метод для определения попадания: определения принадлежности точки, где был выполнен щелчок мышью, некоторой определенной фигуре.

Однако значения свойств

clientX

и

clientY

объекта

MouseEvent

нельзя передать непосредственно методу

isPointlnPath.

Во-первых, координаты события мыши следует преобразовать из координат объекта

Window

в относительные координаты элемента

<canvas>.

Во-вторых, если экранные размеры холста отличаются от его фактических размеров, координаты мыши необходимо перевести в соответствующий масштаб. В примере 21.11 показана вспомогательная функция, используемая для определения попадания точки события MouseEvent в текущий контур.