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

Question

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

С наилучшими пожеланиями Сереф ​​Арикан Ps: любые книги / ресурсы о продвинутой графике на основе браузера с Javascript также приветствуются.

Answer 1

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

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

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

Answer 2

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