SVG текстовый хит-тест - PullRequest
       26

SVG текстовый хит-тест

6 голосов
/ 10 августа 2011

Я пытаюсь реализовать обнаружение коллизий для текстовых элементов SVG с использованием клиентского JavaScript.Хит-тест должен проверить, перекрывает ли любой глиф текста любой глиф другого текстового элемента.Поскольку getBBox и getExtentOfChar не являются точными, мне нужно специальное решение.

Мой первый подход состоял в том, чтобы получить цвет каждой координаты / пикселя элемента и выполнить тестирование нажатия вручную, ноне работает, потому что невозможно получить цвет координаты.Для получения цвета пикселей потребуется дополнительный холст -> ужасный обходной путь.

Теперь я думаю о преобразовании текста или глифов в полигоны для проверки попадания.Является ли это возможным?Или у кого-нибудь есть другой подход к тестированию на основе глифов?

С наилучшими пожеланиями

Ответы [ 2 ]

1 голос
/ 16 августа 2011

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

Одной из проблем, например, является то, что Firefox (по крайней мере, 3,6) и iirc также некоторые версии оперы имеют некоторую ошибку округления при масштабировании, поэтому, когда вы масштабируете родительский элемент, содержащий текст, и масштабируете текст обратно пропорционально этому масштабу, тогда интервал между буквами будет немного отличаться по сравнению с без масштаба. (Поскольку каждая буква должна начинаться с четного числа или чего-то подобного, проблему можно решить, умножив как верхний, так и нижний масштаб на примерно 10000, но это уже другая история)

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

Быстрое преобразование svg-шрифтов в пути очень простое, оно является открытым текстом и использует тот же формат, что и элемент path. (однако остерегайтесь шрифтов-встраиваний-лицензий! Также учитывайте размер файла, поскольку вы не можете использовать шрифты из системы пользователей)

0 голосов
/ 15 августа 2011

Что касается пиксельного тестирования хитов - если вы переключитесь на HTML5 Canvas, то это станет возможным.Несколько проектов обеспечивают легкий переход от SVG к Canvas, например fabric.js . См. Таблицу сравнения здесь .

Что касается подхода на основе многоугольников - возможно, но сложно.Вы можете преобразовать текст или глифы в полигоны (пути), используя какой-либо инструмент (например, текст-путь Inkscape).И тогда будут расчеты.Создание общего решения для любого текста потребует много работы.Однако, если текст не изменяется, рисование текста вручную с использованием путей может быть быстрым и грязным решением.

...