Comment obtenir la position de chaque caractère

Comment obtenir la position (gauche, haut) de tous les caractères dans un nœud? Je connais juste une méthode: envelopper chaque personnage dans son propre tag et ensuite nous pouvons obtenir sa coordonnée. Mais il est un peu lentComment obtenir la position de chaque caractère

Source

2010-11-30 anton_byrna

Je crains que vous n'ayez pas beaucoup de choix à l'exception de la méthode que vous avez décrite. Pour connaître la position de chaque personnage, vous devez connaître la taille exacte de chaque lettre et c'est une tâche à peu près impossible car chaque police a une taille différente pour chaque caractère .. –

Possible duplicate: http://stackoverflow.com/questions/5143534/get -la-position-de-texte-dans-un-élément –

J'ai trouvé réponse à ma question - L'interface de gamme peut présenter toutes les informations dont j'ai besoin (Plus d'infos - http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html).

Source

2010-12-05 14:10:53

code pour ce faire peut être trouvé ici: https://stackoverflow.com/a/29903556/142317 –

Vous pouvez mettre en cache les largeurs de caractères que vous avez déjà vu.

function findOffset(index) { 
    // Set some variables early on 
    var sizes   = {}, 
     text   = "The text you are getting an offset from.", 
     lineHeight  = 16, // You can get this dynamically if you want 
     containerWidth = 500, // Same with this one 
     leftOffset  = 0, 
     topOffset  = 0, 
     i    = 0, 
     cur; 

    // Loop through and count up the sizes of each character until this one 
    for (; (i < text.length) && (i <= index); i++) { 

    // Set the current character 
    cur = text.charAt(i); 

    // Check to see if we have a size 
    if (typeof size[cur] == "undefined") { 
     // If not: Wrap it in a span (You seemed to already know how to do this) 
     // then cache the result 
     size[cur] = findWidthByTemporarilyWrappingInASpan(text, i); 
    } 

    // If it's greater than a line can hold, we'll wrap 
    if ((sizes[cur] + leftOffset) > containerWidth) { 

     // Reset the left offset 
     leftOffset = 0; 

     // Increment the top offset 
     topOffset += lineHeight; 
    } 
    // Otherwise, increment from the left 
    else { 
     leftOffset += sizes[cur]; 
    } 
    } 

    // return an object with the coordinates 
    return { 
    leftOffset: leftOffset, 
    topOffset : topOffset 
    }; 
}

Ensuite, vous pouvez même memoize chaque indice que vous allez saisir et commencer à partir d'une proximité l'un de la prochaine fois que vous appelez cette fonction. Cela signifie que vous restez hors du dom, à l'exception de la plupart du temps pas trop de ~ 50 (alphanumériques + ponctuation, etc) fois, plutôt que pour chaque personnage.

Cela fonctionnerait certainement pour les polices à espacement fixe, mais je pense qu'il y a un certain mérite à d'autres types. Vous devez juste faire la recherche d'emballage pour différents navigateurs. Notez également que cela suppose une justification à gauche, etc. C'est plus une idée qu'une véritable solution de code.

Source

2010-11-30 09:07:31

Bonne idée, besoin de prendre en compte la famille de police et la taille de la police (probablement peut être trouvé avec jQuery?) et l'ajouter à la clé de cache par exemple la touche typique sera "G_Tahoma_14" et une autre "G_Tahoma_12". :) –

Comme je le mentionne en utilisant l'objet Range résoudre mon problème et c'est beaucoup plus rapide que l'emballage de chaque symbole dans le noeud span. –

Comment obtenir la position de chaque caractère

Répondre

Questions connexes