roger: mittels Canvas 90° Text schreiben

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

  1. 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.
    1. 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

      1. 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

        1. 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?
          1. 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

  2. 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?