Taille d'un texte en pixel
Lilouse64
Messages postés
99
Date d'inscription
Statut
Membre
Dernière intervention
-
Lilouse64 Messages postés 99 Date d'inscription Statut Membre Dernière intervention -
Lilouse64 Messages postés 99 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai créé un programme qui me permet d'écrire sur une image 2 textes. Cette page est composé d'un formulaire comportant toute les variables (ou presque) dont j'ai besoin soit pour chaque texte : le contenue du texte en lui même, les coordonnées y et x du texte et sa taille. Il y a aussi le format utilisé commun au 2 textes. A coté du formulaire, se trouve l'image généré grâce à GD. Des qu'un champs du formulaire est modifié, je réactualise l'image grâce à javascript.
De plus, toujours avec javascript, si je clique sur l'image, j'utilise une fonction qui me change les paramètres de x et y pour la première image dans le formulaire et me réactualise l'image (mon premier texte est donc déplacé à l'endroit ou j'ai cliqué). C'est cette fonction que je souhaite modifier.
Je souhaite récupérer la longueur du texte afin de définir la zone ou se trouve mon texte. Mon objectif est que lorsqu'on clique sur la zone ou se trouve le 2ème texte, c'est celui ci qu'on sélectionne et qu'on pourra déplacer. Je pense que je n'aurais pas de difficulté à cela mais ce qui me pause problème c'est de définir ma zone de texte.
Pour la hauteur du texte, j'ai la taille dans le formulaire mais je n'arrive pas à connaitre la longueur en utilisant la taille et le format présent dans le formulaire. J'ai trouvé quelques tutos la dessus mais je les ai mal compris et je ne soit pas sur qu'ils soient vraiment adapté à mon problème.
Merci d'avance de l'aide que vous pourrez m'apporter.
J'ai créé un programme qui me permet d'écrire sur une image 2 textes. Cette page est composé d'un formulaire comportant toute les variables (ou presque) dont j'ai besoin soit pour chaque texte : le contenue du texte en lui même, les coordonnées y et x du texte et sa taille. Il y a aussi le format utilisé commun au 2 textes. A coté du formulaire, se trouve l'image généré grâce à GD. Des qu'un champs du formulaire est modifié, je réactualise l'image grâce à javascript.
De plus, toujours avec javascript, si je clique sur l'image, j'utilise une fonction qui me change les paramètres de x et y pour la première image dans le formulaire et me réactualise l'image (mon premier texte est donc déplacé à l'endroit ou j'ai cliqué). C'est cette fonction que je souhaite modifier.
Je souhaite récupérer la longueur du texte afin de définir la zone ou se trouve mon texte. Mon objectif est que lorsqu'on clique sur la zone ou se trouve le 2ème texte, c'est celui ci qu'on sélectionne et qu'on pourra déplacer. Je pense que je n'aurais pas de difficulté à cela mais ce qui me pause problème c'est de définir ma zone de texte.
Pour la hauteur du texte, j'ai la taille dans le formulaire mais je n'arrive pas à connaitre la longueur en utilisant la taille et le format présent dans le formulaire. J'ai trouvé quelques tutos la dessus mais je les ai mal compris et je ne soit pas sur qu'ils soient vraiment adapté à mon problème.
Merci d'avance de l'aide que vous pourrez m'apporter.
A voir également:
- Taille d'un texte en pixel
- Comment réduire la taille d'un fichier - Guide
- Transcription audio en texte word gratuit - Guide
- Mettre un texte en majuscule - Guide
- Reduire taille image - Guide
- Excel cellule couleur si condition texte - Guide
6 réponses
J'ai essayé une solution en utilisant ce que j'ai trouvé sur le net mais cela ne fonctionne pas. En bas de ma page, entre la balise <body>, j'ai écris ceci :
<script language="Javascript">
document.write("<div id=\"invisible1\" style=\"width: auto;visibility: hidden;font-size: " + document.formremplir.taille1.value +"px;font-family:" + document.formremplir.police.value + ";\" >"+ document.formremplir.text1.value + "</div>";
</script>
Le "width: auto;visibility: hidden;" je l'ai pris sur le forum ou on présentait une solution (pour info le css c'est vraiment pas mon truc) afin de rendre invisible mon texte.
formremplir est le nom du formulaire de saisie.
taille1, text1 et police sont les nom de mes champs du formulaire pour la taille du texte, la valeur du texte et la police pour le premier texte.
Dans ma fonction javascript appeler lors du clic sur l'image, j'ai placé la fonction :
alert(document.getElementById("invisible1").offsetWidth);
Lorsque je clic sur l'image ça ne m'affiche .... rien.
J'ai aussi essayé d'enlever width: auto;visibility: hidden;font-size: pour voir mon texte et la non aussi ... rien ne s'affiche...
Des idées pour m'aider ?
Merci d'avance.
<script language="Javascript">
document.write("<div id=\"invisible1\" style=\"width: auto;visibility: hidden;font-size: " + document.formremplir.taille1.value +"px;font-family:" + document.formremplir.police.value + ";\" >"+ document.formremplir.text1.value + "</div>";
</script>
Le "width: auto;visibility: hidden;" je l'ai pris sur le forum ou on présentait une solution (pour info le css c'est vraiment pas mon truc) afin de rendre invisible mon texte.
formremplir est le nom du formulaire de saisie.
taille1, text1 et police sont les nom de mes champs du formulaire pour la taille du texte, la valeur du texte et la police pour le premier texte.
Dans ma fonction javascript appeler lors du clic sur l'image, j'ai placé la fonction :
alert(document.getElementById("invisible1").offsetWidth);
Lorsque je clic sur l'image ça ne m'affiche .... rien.
J'ai aussi essayé d'enlever width: auto;visibility: hidden;font-size: pour voir mon texte et la non aussi ... rien ne s'affiche...
Des idées pour m'aider ?
Merci d'avance.
Le problème est que si je n'utilise que offsetWidth() j'aurais la taille de mon texte dans mon formulaire et il n'est pas représentatif de la taille dans mon image vu que celle ci utilise aussi les champs de la taille et du format.
Désolé pour le triple post m'ais j'ai vraiment besoin d'une solution. Depuis tout à l'heure j'ai fait divers test. j'ai remplacer :
document.write("<div id=\"invisible1\" style=\"width: auto;visibility: hidden;font-size: " + document.formremplir.taille1.value +"px;font-family:" + document.formremplir.police.value + ";\" >"+ document.formremplir.text1.value + "</div>";
par sa valeur valeur en dure hors des balises script.
J'ai donc mis :
<div id="invisible1" style="font-size: 50px; font-family:calibri;\" >mzvjhzmùrvhzmv</div>
Maintenant j'ai bien mon message d'alert qui s'affiche mais me donne 901 quelque soit les valeurs de font-size, font-family ou de la chaine de caractère, j'ai toujours le même résultat...
document.write("<div id=\"invisible1\" style=\"width: auto;visibility: hidden;font-size: " + document.formremplir.taille1.value +"px;font-family:" + document.formremplir.police.value + ";\" >"+ document.formremplir.text1.value + "</div>";
par sa valeur valeur en dure hors des balises script.
J'ai donc mis :
<div id="invisible1" style="font-size: 50px; font-family:calibri;\" >mzvjhzmùrvhzmv</div>
Maintenant j'ai bien mon message d'alert qui s'affiche mais me donne 901 quelque soit les valeurs de font-size, font-family ou de la chaine de caractère, j'ai toujours le même résultat...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question