Lengte tekst berekenen

Status
Niet open voor verdere reacties.
J

JLDesign

Gebruiker
Lid geworden
15 nov 2011
Berichten
34
Met onderstaand script bereken ik eerst de hoogte en de breedte van de tekst "Voorbeeldtekst Lengte" in px.
Met deze afmetingen bereken ik dan de lengte in milimeter naargelang de hoogte die gekozen wordt in het vervolgkeuzelijstje.
De hoogte van de eerste berekening in px is echter niet correct.
De hoogte die je krijgt is deze van de blauwe of zwarte achtergrond wanneer je de tekst selecteert en niet van de tekst zelf.
Bijgevolg klopt de berekening van de lengte niet.
Is het het mogelijk om via php de tekst eerst te converteren naar een image om zo de juiste hoogte te verkrijgen?


[JS]
function getAfm() {
var br=document.getElementById('tekst2').offsetWidth;
document.getElementById("lengte").value = br;
var hg=(document.getElementById('tekst2').offsetHeight);
document.getElementById("hoogte").value = hg;
var hmm;
var h = document.getElementById('Hoogte1').value;
if (h == "Hoogte: 15mm") { hmm = (15.00).toFixed(0) ;}
if (h == "Hoogte: 20mm") { hmm = (20.00).toFixed(0) ;}
var lg=hmm/hg;
lg=lg*br;
document.order.hoogtemm.value = lg.toFixed(0);
}
[/JS]

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Untitled</title>
<SCRIPT SRC="Test.js"></SCRIPT>
</head>
<body>
<FORM NAME="order">
<div id="artikel4">
<label for="Hoogte1">Letterhoogte : </label>
<select name="ADDITIONALINFO6" id="Hoogte1" onchange="getAfm()">
                                        <option value="kies" selected="selected" style="color:red">Kies een hoogte</option>
                                        <option value="Hoogte: 15mm">15 mm</option>
                                        <option value="Hoogte: 20mm">20 mm</option>
</select><br />
 
<input type="text" id="lengte" name="lengte" value="">lengte in px<br />
<input type="text" id="hoogte" name="hoogte" value="">hoogte in px<br />
<input type="text" id="hoogtemm" name="hoogtemm" value="">lengte in mm volgens de gekozen hoogte in mm<br />
 
<div class="voorbeeld2"><p><b id="tekst2" style="font-size:20pt; font-family:Arial">Voorbeeldtekst Lengte</b></p></div>
</FORM>
</body>
</html>
 
Wat zult u moet uitzoeken zijn
u hebt geen get of post en geen action op het form

verder ook geen onsubmit op het form en een submitknop binnen het form
 
Ja dat weet ik, in mijn uiteindelijke pagina heb ik deze wel.
Het gaat hem gewoon om het bereken van de juiste afmeting van tekst.
in mijn voorbeeld Hoogte.jpg zie je een geselecteerde tekst.
Hiervan wil ik de juiste afmeting.
Ik krijg echter de afmeting van het selectievak, dus het blauwe vak in het voorbeeld.
Het gaat namelijk over belettering en ik wil dat de klant bij het bestellen weet wat de juiste afmeting zal zijn en niet voor verassingen staat bij het ontvangen van zijn bestelling.
 
bekijk wat hier gebeurt (gelieve in commentaar een verwijzing naar deze topic te doen).omdat het mijn custom methode is voor validatierules [er kunnen kleine stukken ontbreken]
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>oefening</title>
		<style type="text/css">
			.red{background:red}
			.green{background:green}
			input{display:block;}
		</style>
		<script language="JavaScript">
        	function is_email(field){return true;}
            function is_reknr(field){return true;}
			function is_empty(field){
				with (field){
					return (field.value==null||field.value=="");
				}  
			}
			function set_doc(field,comment){
				with (field) {
					var text = document.createElement("p");
					text.innerHTML = field.nodeName;
					text.innerHTML += " " + field.name + comment;
					//docform.elements[i].value
					document.getElementById('doc').appendChild(text);
					//docform.elment.
				}
			}
			function formCheck(){
				var ok = true;
				var i =0;
				var docform = document.forms[0];
				while (docform.elements[i])
				{	if (docform.elements[i].name != "submit"&&docform.elements[i].nodeName=="INPUT") {
						if (is_empty(docform.elements[i])) {
							//docform.elements[i].className = 'red';
							docform.elements[i].previousSibling.className = 'red';
							ok =  false;
							set_doc(docform.elements[i]," is emty");
						}
						else {
							docform.elements[i].previousSibling.className = 'green';
							//ddocform.elements[i].className = 'green';
							if(is_email(docform.elements[i])&&(docform.elements[i].name == "email"||docform.elements[i].name == "mail" )){
								docform.elements[i].previousSibling.className = 'red';
								ok =  false;
								set_doc(docform.elements[i]," not valid email");
							}
							if( is_reknr(docform.elements[i])&& docform.elements[i].name == "reknr"){
								docform.elements[i].previousSibling.className = 'red';
								ok =  false;
								set_doc(docform.elements[i]," not valid rekeningnr");
							}
						}
					}		
					
						
					i++;
				}
				//email.focus();
				return false;
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>Bank</legend>
		<form method="GET"  enctype="text/plain" onsubmit="return formCheck()">
			<label for="naam">naam</label><input type="text" name="naam" value="Lieven" />
			<label for="email">email</label><input type="text" name="email"value="info@djdb.be" />
			<label for="reknr">rek nr</label><input type="text" name="reknr"value="3" />
			<label for="bedrag">bedrag</label><input type="text" name="bedrag"value="4" />
			<fieldset id="doc">
			</fieldset>	
			<input type="submit" value="5" name="submit"/>
			
		</form>
		</fieldset>
		
	</body>
</html>
 
En wat heeft dit allemaal met mijn vraag te maken ????????????????????
 
Het is een voorbeeld hoe je je js aan je html voegt maar ik denk dat ik het op een andere post moest plaatsen denk ik
maar heb je er iets aan of niet je kan het ook bekijken sorry van niet meer na te lezen
 
Hoi JLDesign,
Dus even terug naar af:
Is het het mogelijk om via php de tekst eerst te converteren naar een image om zo de juiste hoogte te verkrijgen?
Klik om te vergroten...
Ai, dit is een hele lastige! :rolleyes:
Dit hebben we eerder aan de hand gehad, en uitgebreid van alles en nog wat uitgeprobeerd.



Samengevat:
  • Het is toen niet gelukt.
  • Maar het moet wel kunnen, want bij onlinesticker.nl/maakjeeigensticker.php kunnen ze het ook.
  • We kwamen uit bij de GD Graphics Library die in php zit, maar het ontbrak aan kennis om dat op de rails te zetten.
  • De resterende opties waren, als er hier geen hulp van een GD Graphics Library-expert kwam:
    1. Zelf voldoende php gaan leren om de GD Graphics Library te gaan toepassen.
    2. Iemand in de arm nemen die een "op maat" toepassing ervan kan maken.​

Dus: GD Graphics Library-experts, komt u maar! :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan