2015-01-07 4 views
2

Предположим, у меня есть путь svg и фрагмент текста. Я хочу выяснить, где они пересекаются. Я не совсем уверен, с чего начать, потому что функция getBBox() метода SVG не помогает.Обнаружение столкновения между SVG-контуром и svg-текстом

С какого места следует начать?

+0

Когда вы говорите «где они пересекаются», что вы имеете в виду? Вы имеете в виду, к каким персонажам прикасается линия, или точным местам, когда линия касается каких-либо контуров глифа, или просто просто касаются ли они друг друга? –

+0

, где они касаются друг друга вообще - или, чтобы упростить, когда ограничивающая рамка текста касается линии. – praks5432

ответ

3

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

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

Элементы пути имеют couple of DOM functions, которые могут помочь: getTotalLength() и getPointAtLength(). Вы можете перемещаться по пути от 0 до длины пути, вызывая getPointAtLength(), пока возвращаемая точка не окажется внутри текстового поля bbox.

Если вы хотите уточнить, какой персонаж в тексте касается линии, есть DOM functions on SVG text elements, который должен быть полезен. Например, `getExtentOfChar (n) возвращает границы n-го символа в тексте.

Смежные вопросы