Canvas HIT-тестирование: работа с границами элементов и сглаживанием - PullRequest
0 голосов
/ 21 июня 2020

Настройка

Как часть инструмента редактирования веб-векторов, написанного на Javascript, я реализую проверку попадания с использованием стратегии холста попаданий, аналогичной стратегии Бетон. js. По большей части это работает довольно хорошо: я рисую свои фигуры дважды (один раз на холсте дисплея и один раз на выбранном холсте).

При запросе холста я проверяю зависший пиксель нажмите на холст и извлеките информацию о взаимодействии (т.е. какой идентификатор объекта там хранится).

Проблема

Это хорошо работает внутри фигур, но имеет болезненные изъяны на границах, где сглаживание делает сохраненные данные недействительными (они смешиваются с любыми фоновыми данными, которые были там раньше). Есть ли хорошие стратегии для решения этой проблемы с границами данных?

Если не отключать сглаживание для методов холста, тогда мы обязательно получим некоторые граничные области в перекрывающихся регионах, в которых будут храниться объединенные данные из нескольких регионов.

Простой сценарий

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

Реальный сценарий

Однако в общем сценарии с несколькими формами, перекрывающими друг друга поверх фона, есть ли разумная стратегия для обнаружения ошибок? (или ошибка исправление, но я предполагаю, что это сложнее)

Если я могу сказать, что данные недействительны (т.е. они состоят из искаженных данных из-за сглаживания), то я могу использовать другую стратегию для этих нескольких пикселей в границы. Но я чувствую, что невозможно определить, допустимы ли данные, которые я извлекаю, в общем сценарии, когда у нас может быть много перекрывающихся фигур.

Конечно, одно из решений - НЕ использовать холст совпадений. Но мне было интересно, нашли ли люди решение, используя популярные холсты, поскольку они кажутся отличными для работы со сложной геометрией. aliasing , что я не думаю, что это возможно для методов холста [*].

[*] Я знаю, что мы можем отключить фильтрацию при рендеринге изображений (например, этот вопрос ), например как с imageSmoothingEnabled=false или изменение масштаба с помощью image-rendering: pixelated, но это не решает проблему сглаживания при рисовании фигур / контуров.

...