Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

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

Шрифт:

Пример 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>

*

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

* .sparkline { background-color: #ddd; color: red; }

*

* - Цвет кривой графика определяется CSS-свойством color вычисленного стиля.

* - Сами диаграммы являются прозрачными, поэтому сквозь них просвечивает фон страницы.

* - Высота диаграммы определяется атрибутом data-height, если он указан,

* или свойством font-size вычисленного стиля в противном случае.

* - Ширина диаграммы определяется атрибутом data-width, если он указан,

* или числом точек данных, умноженным на значение атрибута data-dx, если он

* указан, или числом точек данных, умноженным на высоту, деленную на 6

* - Минимальное и максимальное значение по оси у извлекаются из атрибутов

  • Читать дальше
  • 1
  • ...
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: