kostenloser Webspace werbefrei: lima-city


Canvas in 9 Schritte einteilen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo,
    Ich würde einen Canvas mit Strichen gerne in Schritte eintelen:

    <canvas id="Diagramm" height="520" width="920">Ihr Browser unterstützt kein Canvas</canvas>



    //Breite
    	for(var o = 1; o <= 9; o++) {
    	context.moveTo(o*steps+20,500);
    	context.lineTo(o*steps+20,510);
    	}
    	context.moveTo(919,500); //Letzer Strich
    	context.lineTo(919,510);
    	
    //Höhe
    	for(var o = 1; o <= 9; o++) {
    	context.moveTo(10, ((500) - (o * ymaxpixel / 9)));
    	context.lineTo(20, ((500) - (o * ymaxpixel / 9)));
    	}


    9 Schritte also. In der Breite funktioniert alles super. Um nicht den ganzen Code erklären zu müssen hier eine allgemeine Erklärung: (Wer ihn doch anschauen will https://dl.dropbox.com/u/23477673/Rechner.html)

    o zählt immer rauf, also

    1 * ymaxpixel / 9
    ... bis ...
    9 * ymaxpixel / 9

    ymaxpixel wird also in 9 Stufen eingeteilt. Wenn ich die Werte überprüfe stimmt es, ist ja auch logisch, aber mit den Strichen kalappt alles nicht mehr.

    context.moveTo(10, ((500) - (o * ymaxpixel / 9)));


    Mein Canvas ist 520 Pixel hoch, aber unten ist ein 20pixel Rand für die Striche. Da der 0 Punkt ja oben links beginnt, zieh ich 500 - den Wert ab, und eigentlich sollte es dann doch alles schön einteilen.


    Kann mir jemand helfen?

    Beitrag zuletzt geändert: 20.1.2013 16:50:10 von c143
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. vielleicht liegts nur am zähler?
    for(var o = 1; o <= (9; o++) {
    ...enthält eine klammer '(' zuviel, oder?
  4. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    xian schrieb:
    vielleicht liegts nur am zähler?
    for(var o = 1; o <= (9; o++) {
    ...enthält eine klammer '(' zuviel, oder?


    Oh sry, Fehler beim Post erstellen, ich wollts besser Darstellen, damits einleuchtender ist, die Klammer kommt noch von einer Rechnung, und da ist das Ergebnis einfach 9, also canvas.width - 20 / steps. Ich editiers kurz, aber an dem liegts nicht, sonst gäbe es ja einen Error, aber es ist einfach falsch eingeteilt.
  5. //Höhe
    	for(var o = 1; o <= (canvas.width-120)/steps; o++) {
    	context.moveTo(10, ((520) - (o * ymaxpixel / 9)));
    	context.lineTo(20, ((520) - (o * ymaxpixel / 9)));
    höhe enthält width? wie auch immer: das prinzip ist wohl richtig, aber die skalierung passt nicht, die y-werte sind zu niedrig. "letzter strich" und "anfangshöhe" skalieren anders, aber auch falsch.

    vorschlag: ermittle zuerst, welcher x/y-wert welcher x/y-position auf dem canvas entspricht (bereinigt um skalierung & versatz) und ruf dann pro linie eine funktion auf, die dir eine linie von x1/y1 nach x2/y2 pinselt. dann bleibt dein eigentlicher code mit den formeln übersichtlicher und du kannst viel leichter testen.

    Beitrag zuletzt geändert: 20.1.2013 17:51:02 von xian
  6. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    xian schrieb:
    //Höhe
    	for(var o = 1; o <= (canvas.width-120)/steps; o++) {
    	context.moveTo(10, ((520) - (o * ymaxpixel / 9)));
    	context.lineTo(20, ((520) - (o * ymaxpixel / 9)));
    höhe enthält width? wie auch immer: das prinzip ist wohl richtig, aber die skalierung passt nicht, die y-werte sind zu niedrig. "letzter strich" und "anfangshöhe" skalieren anders, aber auch falsch.

    vorschlag: ermittle zuerst, welcher x/y-wert welcher x/y-position auf dem canvas entspricht (bereinigt um skalierung & versatz) und ruf dann pro linie eine funktion auf, die dir eine linie von x1/y1 nach x2/y2 pinselt. dann bleibt dein eigentlicher code mit den formeln übersichtlicher und du kannst viel leichter testen.



    Ja enthalt die Breite, da beides ja 9 gibt, also 9 Striche, sonst wär das Diagram ja falsch. Wie meinst du das? Versteh ich nicht ganz. Also wegen der Skalierung, später sollte man dann die Genauigkeit einstellen können.
  7. ein beispiel: ich will x-werte 0..100 und y-werte -1000..1000 auf die koordinaten x 50...350 und y 20..420 übertragen:

    um auf die koordinaten zu kommen, muss jeder x-wert mit 3 multipliziert und dann zu 50 addiert, jeder y-wert mit 0,2 multipliziert und dann zu 220 addiert werden. weiß ich das erstmal, kann ich beliebige x/y-punkte bzw. x1/y1-x2/y2-linien zeichnen.
  8. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    xian schrieb:
    ein beispiel: ich will x-werte 0..100 und y-werte -1000..1000 auf die koordinaten x 50...350 und y 20..420 übertragen:

    um auf die koordinaten zu kommen, muss jeder x-wert mit 3 multipliziert und dann zu 50 addiert, jeder y-wert mit 0,2 multipliziert und dann zu 220 addiert werden. weiß ich das erstmal, kann ich beliebige x/y-punkte bzw. x1/y1-x2/y2-linien zeichnen.


    Sowas hab ich auf der y-Achse schon gemacht, falls ich es richtig verstehe:

    var onepixel	= 900/ xs;
    	var ymaxpixel	= ymax * onepixel;



    Also der Weg in x füllt den ganzen Canvas, deshalb die Breite des Canvas / den Weg x, das gibt dann den Weg pro Pixel, und dann berechne ich die Pixel bei ymax.
  9. //Höhe
    	for(var o=0; o<=10; o+=1/10) {
    		context.moveTo(15, 500-o*500);
    		context.lineTo(25, 500-o*500);
    		context.fillText(Math.round(100*o)/4,0, 500-o*500); }
    	context.stroke();
    
    // Die beiden letzen Striche
    	context.strokeStyle = 'blue';	
    	context.beginPath();
    	context.moveTo(15,canvas.height - h * scaleY-20); // anfang
    	context.lineTo(25,canvas.height - h * scaleY-20);
    	context.moveTo(15,ymaxpixel);                     // max
    	context.lineTo(25,ymaxpixel);
    	context.stroke();
    ich weiß natürlich nicht was aus deinem projekt noch werden soll.
    man kann zb den höchsten und den weitesten wert zum automatischen skalieren verwenden.
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!