Можно ли получить пиксельные координаты текста и нарисовать прямоугольную рамку вокруг него с помощью Javascript?

Question

Я оцениваю параметры технологии для предстоящего проекта, и одним из требований является рисование прямоугольника вокруг определенных групп слов в текстовом поле. Каждый раз, когда текст оценивается и анализируется, некоторые признанные его части должны быть помещены в квадрат с прямоугольником, который также должен реагировать на щелчки мыши. Существует даже требование поместить маленький треугольник в один из углов этого прямоугольника. У меня нет контроля над требованиями, и ясно это требование указывает на получение пиксельных позиций текста в текстовом поле (или контейнере div) и использование какого-либо механизма наложения для рисования прямоугольника. Если я использую неправильные ключевые слова, поисковые запросы google не возвращают полезные результаты, и я очень благодарен за ваш вклад в эту тему.

С наилучшими пожеланиями Seref Arikan Ps: любые книги/ресурсы о расширенной графике на основе браузера, основанной на javascript, также должны быть оценены.

Answer 1

Я бы рекомендовал смотреть на этот плагин: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

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

Редактировать Обратите внимание, что этот плагин предназначен для текста в документе HTML, а не текста в текстовых полях ввода или в блоках <textarea>. Это было бы очень трудно сделать, но, возможно, кто-то это сделал.

Answer 2

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