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

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

на обложку

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

Шрифт:

Пример 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", анализирует их содержимое

* как последовательность чисел и замещает их графическим представлением.

* Определить внутристрочную диаграмму в разметке можно так:

* <span class="sparkline">3 5 7 6 6 9 11 15</span>