Шрифт:
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 в текущий контур. Пример 21.11. Проверка попадания точки события мыши в текущий контур
// Возвращает true, если указанное событие мыши возникло в текущем контуре
// в указанном объекте CanvasRenderingContext2D.
function hitpath(context, event) {
// Получить элемент <canvas> из объекта контекста
var canvas = context.canvas;
// Получить координаты и размеры холста
var bb = canvas.getBoundingClientRect;
// Преобразовать и масштабировать координаты события мыши в координаты холста
var х = (event.clientX-bb.left)*(canvas.width/bb.width);
var у = (event.clientY-bb.top)*(canvas.height/bb.height);
// Вызвать isPointlnPath с преобразованными координатами
return context.isPointInPath(x,y);
}
Эту функцию
hitpath
можно использовать в обработчиках событий, как показано ниже:
canvas.onclick = function(event) {
if (hitpath(this.getContext("2d"), event) {
alert("Ecть попадание!"); // Щелчок в пределах текущего контура
}
};
Вместо проверки попадания в текущий контур с помощью метода
getlmageData
можно определить, окрашен ли пиксел в точке события мыши. Если пиксел (или пикселы) под указателем мыши оказался полностью прозрачным, следовательно, под указателем мыши ничего не было нарисовано и щелчок был выполнен за пределами какой-либо фигуры. Пример 21.12 демонстрирует, как реализовать подобную проверку попадания.