roger: mittels Canvas 90° Text schreiben

SELF-Forum

mittels Canvas 90° Text schreiben

roger
– Informationen zu den Bewertungsregeln

Hallo,

ich spiele gerade mit Canvas etwas herum. Rechteck, Linie kein Problem.
Nun möchte ich per Schleife Text in 90° Drehung (unten nach oben, links bündig) schreiben.(nicht rotate)
Dies soll der Skalentext für einen selbstgeschriebenen Slider werden.

Ich habe schon vieles im Web gefunden, nur nicht 90° gedrehten Text
Vermutlich sitze ich "nur" auf der Leitung.

Gruß
       roger

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. mittels Canvas 90° Text schreiben

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    ich spiele gerade mit Canvas etwas herum. Rechteck, Linie kein Problem.
    Nun möchte ich per Schleife Text in 90° Drehung (unten nach oben, links bündig) schreiben.(nicht rotate)
    Dies soll der Skalentext für einen selbstgeschriebenen Slider werden.

    Muß es canvas sein? Oder dürfte es auch ein "normales" HTML-Element mit CSS-transform:rotate(...) sein?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. mittels Canvas 90° Text schreiben

      roger
      – Informationen zu den Bewertungsregeln

      Hallo,

      Muß es canvas sein? Oder dürfte es auch ein "normales" HTML-Element mit CSS-transform:rotate(...) sein?

      Es muss Canvas sein, trotzdem Danke

      roger

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. mittels Canvas 90° Text schreiben

        roger
        – Informationen zu den Bewertungsregeln

        Hallo,

        anbei mein bisheriger Code.

        <html>  
<head>  
<title>&lt;canvas&gt;-Dokumentation</title>  
  
<script type="text/javascript">  
var x=20; // von links  
var y=150; // von oben  
var rahmendicke = 1;    // Strichstärke des Sliderrahmens  
var scala_x_kurz = 5;   // kurze Skalastriche  
var scala_x_lang = 10;  // lange Skalastriche  
var bezeichnung = 'Temperatur';  
var bezeichnungsfontgroesse = 20;  
var breite = 200;  
var hoehe = 20;  
var min = 0;           // min. Wert  
var max = 100;         // max. Wert  
var skala_aufloesung = 10;     // wieviele Skalastriche gezeichnet werden  
var wert=0;  
  
//----------- interne Variablen ------------------------------------  
var objContext;  
//------------------------------------------------------------------  
  
window.onload = function(){zeichnen();}  
  
//----------------------------------------------------------------------------------------  
function zeichnen()  
{  
	var objCanvas = document.getElementById('canvas_id');  
	if (objCanvas.getContext){objContext = objCanvas.getContext('2d');  
    // Zeichenroutinen  
    }else{ /* Sonstige Routinen */ }  
  
	objContext.strokeStyle = "black";  
        objContext.strokeRect(x, y, breite, hoehe);  
	objContext.font = bezeichnungsfontgroesse + "px arial";  
	var laenge = objContext.measureText(bezeichnung).width;  
	objContext.fillText(bezeichnung, x + (breite / 2) -  (laenge / 2), y + hoehe + bezeichnungsfontgroesse + 10);  
  
	skala();  
}  
//----------------------------------------------------------------------------------------  
function skala()  
{  
var aufloesung = breite / max;  
var i;  
//Pfad beginnen  
	objContext.beginPath();  
  
	for (i=0; i < breite; i++)  
	{  
		if (!(i % skala_aufloesung) || i == 0)  
		{  
			objContext.moveTo(x+i,y);  
			objContext.lineTo(x+i,y - scala_x_lang);  
//			skalatext(x+i,y - scala_x_lang, i)  
		}  
	}  
  
	objContext.moveTo(x+i,y);  
	objContext.lineTo(x+i,y - scala_x_lang);  
	objContext.closePath();  
	objContext.stroke();  
  
  
	objContext.font = "10px 'optimer'";  
	objContext.textAlign = 'left';  
	objContext.rotate(-45);  
	objContext.fillText("12", x, y-scala_x_lang);  
  
  
}  
//----------------------------------------------------------------------------------------  
function aktwert(messwert)  
{  
	objContext.clearRect(x+rahmendicke, y+rahmendicke, breite - (2 * rahmendicke), hoehe - (2 * rahmendicke)); // Rechteck löschen  
	objContext.strokeStyle = "#fc0";        // Linienstil  
  
	objContext.fillStyle = "blue";  
  
	var aufloesung = breite / max;  
  
  
	objContext.fillRect(x+rahmendicke, y+rahmendicke, aufloesung * messwert, hoehe - (2 * rahmendicke));  // Gefülltes Rechteck}  
}  
//----------------------------------------------------------------------------------------  
function increment()  
{  
	wert=wert+1;  
	aktwert(wert);  
}  
//----------------------------------------------------------------------------------------  
function decrement()  
{	  
	if (wert > 0)  
	{  
		wert=wert-1;  
		aktwert(wert);  
	}  
}  
//----------------------------------------------------------------------------------------  
</script>  
  
<style type="text/css">  
	canvas{ border: 1px solid #000;}  
</style>  
  
</head>  
<body>  
  
    <canvas width="300" height="300" id="canvas_id"></canvas>  
	<INPUT type="button"  value="increment" onclick="increment()">  
	<INPUT type="button"  value="decrement" onclick="decrement()">  
  
</body>  
</html>

        Mein Problem.... sobald ich objContext.rotate(-45); aufrufe stimmt die Position des Textes überhaupt nicht mehr.
        Wenn ich // objContext.rotate(-45); kommentiert das Script laufen lasse, stimmen meine x,y Koordinaten nicht mehr. Mit "-45"
        schreibt er den Text irgendwo in die Canvas. Eigentlich möchte ich den Text "90" Grad versetzen, jedoch wird dabei überhaupt kein Text mehr dargestellt, oder ich sehe den Text nicht mehr.

        Warum das so ist ????
        Noch eine Frage: wenn ich den Text mit einer Schleife schreibe, muss ich etwas beachten (Path oä) ??

        Gruß
            roger

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. mittels Canvas 90° Text schreiben

          ChrisB
          – Informationen zu den Bewertungsregeln

          Hi,

          Mein Problem.... sobald ich objContext.rotate(-45); aufrufe stimmt die Position des Textes überhaupt nicht mehr.
          Wenn ich // objContext.rotate(-45); kommentiert das Script laufen lasse, stimmen meine x,y Koordinaten nicht mehr. Mit "-45" schreibt er den Text irgendwo in die Canvas.

          Mach dir bitte klar, was rotate macht:
          Mit der Methode rotate wird das Koordinatensystem um den Winkel, der im Parameter übergeben wird, gedreht. Drehzentrum ist der Ursprung.

          Analogie für’s Verständnis:
          Ich gebe dir ein Din-A4-Blatt Papier, und sage dir, „schreibe bitte deinen Namen in die linke obere Ecke“.
          Dass diese „Koordinate“ „linke obere Ecke“ einen vollkommen anderen Punkt bezeichnet und sich auch entsprechend auf das Ergebnis auswirkt, wenn ich dir auch noch sage, „drehe aber bitte vorher das Blatt um 90° gegen den Uhrzeigersinn, und anschließend zurück“, sollte doch wohl ganz glasklar einleuchten.

          MfG ChrisB

          --
          RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. mittels Canvas 90° Text schreiben

            roger
            – Informationen zu den Bewertungsregeln

            Hallo,

            nochmals für mich

            Canvas

            0,0
            ------------------------
            |                      |
            |   *3,2               |
            |                      |
            |                      |
            |                      |
            -----------------------
                                 10,5

            rotate(-90);
            0,0
            -----------
            |         |
            |         |
            |         |
            |         |
            |         |
            |         |
            |         |
            |  *2,7   |
            |         |
            -----------
                     5,10

            schreibe text

            rotate(90);

            0,0
            ------------------------
            |                      |
            |   *3,2               |
            |                      |
            |                      |
            |                      |
            -----------------------
                                 10,5

            Verstehe ich das richtig. Nach dem Textschreiben muss ich wieder zurückdrehen um wieder "normale" Koordinaten zu haben ?

            Gruß
                roger

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. mittels Canvas 90° Text schreiben

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Nun möchte ich per Schleife Text in 90° Drehung (unten nach oben, links bündig) schreiben.(nicht rotate)

    Warum nicht rotate?

    Ich habe schon vieles im Web gefunden, nur nicht 90° gedrehten Text

    Google: canvas rotated text, erster Treffer: http://stackoverflow.com/questions/3167928/drawing-rotated-text-on-a-html5-canvas

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln