Canvas in 9 Schritte einteilen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
code
eigentlicher code
falsch vorschlag
formel
funktion
klammer zuviel
koordinate
leichter testen
linie
niedrig letzter strich
pixel
position
prinzip
punkt
ruf
schritt
skalierung
strich
url
zeichnen
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
vielleicht liegts nur am zähler?
for(var o = 1; o <= (9; o++) {
...enthält eine klammer '(' zuviel, oder? -
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. -
//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 -
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. -
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. -
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. -
//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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage