Est-il possible d'obtenir des coordonnées de pixel de texte et dessiner une bordure rectangulaire autour de lui en utilisant Javascript?

Question

J'évalue les options technologiques pour un projet à venir, et l'une des exigences est de dessiner un rectangle autour de certains groupes de mots dans un champ de texte. Chaque fois que le texte est évalué et analysé, certaines parties reconnues doivent être encadrées avec un rectangle, qui doit également répondre aux clics de souris. Il est même nécessaire de placer un petit triangle dans l'un des coins de ce rectangle. Je n'ai aucun contrôle sur les exigences, et il est clair que cette exigence vise à obtenir des positions de pixels dans un champ de texte (ou un conteneur div), et à utiliser un mécanisme de superposition pour dessiner le rectangle. À moins que j'utilise les mauvais mots clés, les recherches google ne renvoient aucun résultat utile, et j'apprécierais vraiment votre contribution sur ce sujet.

Cordialement Seref Arikan Ps: tous les livres/ressources sur dom navigateur de graphismes avancés basés avec javascript apprécié aussi.

Answer 1

Je recommande regarder ce plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Ce n'est pas exactement ce que vous voulez, mais vous pourriez être en mesure de l'adapter. Le travail de recherche de texte dans l'exécution du contenu et de le manipuler est un peu compliqué.

éditez notez que ce plugin est pour le texte dans le document HTML, pas pour le texte dans les champs de saisie ou dans les blocs <textarea>. Ce serait assez difficile à faire, mais peut-être que quelqu'un l'a fait.

Answer 2

Je vous suggère d'utiliser plusieurs champs de texte sans bordure, chacun contenant une seule partie du texte (mots ou lettres) et envelopper les groupes si nécessaire avec une bordure et le triangle comme image de fond positionnée.