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

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

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 демонстрирует, как реализовать подобную проверку попадания.

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

Оглавление книги