#заметка дня

Ну что, будем долбиться в холст и аналитическую геометрию?

Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.

В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279

Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.

Заодно мы получили бесконечно возможное число секторов.

Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?

Для зануд: мы тут в декартовых координатах работаем.

1️⃣Определяем, не ткнули ли мы в центральную кнопку.

Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.

Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.

2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.

Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.

Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.

И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.

Радианы — просто всё умножается на π.

Ну и всё, перерисовали с учётом нового цвета.

Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010

Что делаем в следующий раз, анимируем?

#canvas #javascript #remote