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;

}