Мне поручено реализовать d-pad навигацию для существующего веб-приложения для GoogleTV (и я тестирую в Google Chrome, и пока они, похоже, работают аналогично. В своих заметках для реализации навигации по d-pad у них есть базовые обработчики для вверх, вправо, влево, вниз и выбора.
В настоящее время у меня есть схема для инициализации виртуального курсора, а затем для различных ударов dpad.Я полагаюсь на использование document.elementFromPoint()
и циклический переход до тех пор, пока не найду новый элемент, который ранее не был выбран. Я использую outline:
css, чтобы указать текущую позицию, и я показываю его только когда один из dpadбыли выбраны элементы управления.
У меня есть шаг при инициализации, который добавляет класс dpadClickable
ко всем элементам, на которые можно кликать, а затем, когда курсор перемещается, я добавляю dpadHighlighted
к новому и удаляюот всех других элементов. Это выглядит правильно.
Это все не удастся, если у меня есть элемент, который можно прокручивать, или если ориентация такова, что перемещение моего ПОИnt downward ничего не находит.
Мне нужна структура данных, в которой хранятся все мои элементы dpadClickable
, а затем по щелчкам на клавиатуре можно выполнить итерацию, чтобы найти лучшую ближайшую вершину вниз, левый и правый элементы.Например, я должен делать это на основе свойств top
и left
?Или на основе вычисленной центральной точки?
Я нашел библиотеку jQuery , которая как бы реализует это, и я до некоторой степени реверс-инжиниринг.Но то, что я действительно хотел бы, является учебником по этому классу проблемы программирования: я должен искать алгоритмы графического программирования?игры?Что-то еще?
ОБНОВЛЕНИЕ: Вопрос на сайте User Experience StackExchange : Добавление навигации D-pad ксуществующее веб-приложение: Ресурсы?