Пример 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 демонстрирует, как реализовать подобную проверку попадания.
Пример 21.12. Проверка наличия окрашенного пиксела в точке события мыши
// Возвращает true, если указанное событие мыши возникло в точке,
// где находится непрозрачный пиксел,
function hitpaint(context, event) {
// Преобразовать и масштабировать координаты события мыши в координаты холста
var canvas = context.canvas;
var bb = canvas.getBoundingClientRect;
var x = (event.clientX-bb.left)*(canvas.width/bb.width);
var у = (event.clientY-bb.top)*(canvas.height/bb.height);
// Получить пиксел (или пикселы, если одному CSS-пикселу соответствует
// несколько аппаратных пикселов)
var pixels = с.getImageData(x,у,1,1);
// Если хотя бы один пиксел имеет ненулевое значение альфа-канала,
// вернуть true (попадание)
for(var і = 3; і < pixels.data.length; i+=4) {
if (pixels.data[i] !== 0) return true;
}
// Иначе это был промах, return false;
}
21.4.16. Пример использования элемента <canvas>: внутристрочные диаграммы
Закончим главу практическим примером рисования внутристрочных диаграмм. Внутристрочная диаграмма (sparkline) - это маленькое изображение (обычно некий график) предназначенное для отображения в потоке текста, например: Server load: 8. Термин «sparkline» был введен их автором Эдвардом Тафти (Edward Tufte), который описывает внутристрочные диаграммы так: «Маленькие графические изображения с высоким разрешением, встроенные в контекст окружающих их слов, чисел, изображений. Внутристрочная диаграмма -это простой в создании, тесно связанный с данными график, размер которого сопоставим с размером слова». (Подробнее о создании внутристрочных диаграмм см. в книге Эдварда Тафти «Beautiful Evidence» [Graphics Press].)
В примере 21.13 приводится относительно простой модуль на языке JavaScript, позволяющий вставлять в веб-страницы внутристрочные диаграммы. Порядок работы модуля описывается в комментариях. Обратите внимание, что в нем используется функция
onLoad
из примера 13.5.
Пример 21.13. Реализация внутристрочных диаграмм с помощью элемента
<canvas>
/*
* Отыскивает все элементы с CSS-классом "sparkline", анализирует их содержимое
* как последовательность чисел и замещает их графическим представлением.
*
* Определить внутристрочную диаграмму в разметке можно так: