Bauteile: 2.8" TFT Display
| Bastelseite Display + Antriebe Sensoren C++ | |
Übersicht von 2,8" TFT-Display von Elegoo - Teil 2
tft.drawPixel(x, y, Farbe);
Pixel darstellen
Um einen einzelnen Punkt (Pixel) anzusprechen, benötigt man nur die X- und Y-Position, sowie die Farbe.
Beispiel:
tft.drawLine(x1, y1, x2, y2, Farbe);
Linien erzeugen
Mit dem Befehl tft.drawLine lassen sich folgende Werte eingeben: den Startpunkt mit x1 und y1 und die des Endpunktes: x2 und y2. Abschließend noch die Farbangabe macht alles bereits komplett.
Somit kann jegliche Linie von und nach gezeichnet werden in welcher Farbe auch immer es einem gefällt.
Zur besseren Übersicht habe iche den Startpunkt (25,10) und auch den Endpunkt (290,210) mit einem roten Punkt markiert.
tft.drawFastVLine(x, y, h, Farbe);
Schnelle Vertikale Linie
Mit tft.drawFastVLine (x, y, h, Farbe); lassen sich mit den Werten X und Y der Startpunkt festlegen. Die Höhe "h" ergibt dann die Länge der Linie. Farbe noch dazu - alles klar.
Da der Wert der Höhe in den positiven Bereich geht, wird die Linie nach unten vom Startpunkt aus gezeichnet.
Erzeugt eine vertikale Linie vom Punkt 160,10 aus in Rot mit einer Länge von 120 Pixel.
tft.drawFastHLine(x, y, b, Farbe);
Schnelle Horizontale Linie
Mit tft.drawFastHLine (x, y, h, Farbe); lassen sich mit den Werten X und Y der Startpunkt festlegen. Die Breite "b" ergibt dann die Länge der Linie. Farbe noch dazu - alles klar.
Da der Wert der Höhe in den positiven Bereich geht, wird die Linie nach rechts vom Startpunkt aus gezeichnet.
Erzeugt eine horizontale Linie vom Punkt 10,100 aus in Cyan mit einer Länge von 50 Pixel.
tft.drawRect(x, y, b, h, Farbe);
Rechteck zeichnen
Um ein Rechteck zu zeichnen, benötigt man nur die X- und Y-Start-Position, sowie die Breite (b) und Höhe (h) des Rechtecks, und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit den Startkoordinaten von 20 und 20 für x und Y. Die Breite (b) legen wir mit 120 und die Höhe mit 100 fest. Als Farbe wählen wir gelb (YELLOW). Das Rechteck sollte nun in der Mitte des Displays enden.
tft.fillRect(x, y, b, h, Farbe);
Ein ausgemaltes Rechteck zeichnen
Auch hier benötigen wir, wie beim Rechteck, nur die X- und Y-Start-Position, sowie die Breite (b) und Höhe (h) des Rechtecks, und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit den Startkoordinaten von 160 und 120 für x und Y. Die Breite (b) legen wir mit 140 und die Höhe mit 100 fest. Als Farbe wählen wir grün (GREEN). Da der Startpunkt in der Mitte des Displays liegt, wird es nach unten rechts gezeichnet.
tft.drawRoundRect(x, y, b, h, r, Farbe);
Abgerundetes Rechteck zeichnen
Um ein abgerundetes Rechteck zu zeichnen, benötigt man nur die X- und Y-Start-Position, sowie die Breite (b) und Höhe (h) des Rechtecks, ferner noch den Radius (r) und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit den Startkoordinaten von 20 und 20 für x und Y. Die Breite (b) legen wir mit 120 und die Höhe mit 100 fest. Als Radius nehme ich 50 und als Farbe weiß (WHITE).
tft.fillRoundRect(x, y, b, h, r, Farbe);
Ein abgerundetes und gefülltes Rechteck zeichnen
Auch hier benötigen wir, wie beim Rechteck, nur die X- und Y-Start-Position, sowie die Breite (b) und Höhe (h) des Rechtecks, ferner noch den Radius (r) und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit den Startkoordinaten von 160 und 120 für x und Y. Die Breite (b) legen wir mit 140 und die Höhe mit 100 fest. Als Radius nehme ich 15 und für die Farbe blau (BLUE).
tft.drawCircle(x, y, r, Farbe);
Kreis zeichnen
Um einen Kreis zu zeichnen, benötigt man nur die X- und Y-Start-Position, sowie den Radius (r) des Kreises, und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit den Startkoordinaten von 160 und 120 für X und Y. Den Radius (r) legen wir mit 50 und den zweiten mit 100 fest. Als Farbe wählen wir gelb (YELLOW) und grün (GREEN). Der Kreis sollte nun in der Mitte des Displays stehen, ebenso der zweite Kreis.
Beispiel:
tft.fillCircle(x, y, r, Farbe);
Einen ausgemalten Kreis zeichnen
Auch hier benötigen wir, wie beim Kreis selbst, nur die X- und Y-Start-Position, sowie den Radius (r) des Kreises, und wie immer noch dessen Farbe.
Nehmen wir ein Beispiel mit unterschiedlichen Startkoordinaten: 100 & 100, sowie 240 & 120. Die Radien (r) legen wir mit 90 und 115 fest. Als Farbe wählen wir rot (RED) und weiß (WHITE).
Beispiel:
tft.drawCircleHelper(x, y, r, Ecken-Wert, Farbe);
Kreisabschnitt zeichnen
Um einen Kreisabschnitt zu zeichnen, benötigt man die X- und Y-Start-Position, den Radius (r), die Ecken-Angabe und wie immer noch dessen Farbe.
Die Ecken-Angabe sieht auf den ersten Blick vielleicht komplizierter aus, wie es eigentlich ist. Da es nur vier Ecken gibt: links oben (=1), rechts oben (=2), rechts unten (=4) und links unten (=8) ist es einfacher. Über diese vier Zahlen, und deren Kombinationen, lassen sie sich einzeln oder auch gemeinsam ansprechen.
Es ergibt der Ecken-Wert demnach:
1 = 1 (Nur 1 = links oben)
2 = 2 (Nur 2 = rechts oben)
3 = 1 + 2 (1 und 2 = oberer Halbkreis)
4 = 4 (Nur 4 = rechts unten)
5 = 1 + 4 (gegenüberliegend)
6 = 2 + 4 (Halbkreis rechts)
7 = 1 + 2 + 4 (Dreiviertel-Kreis)
8 = 8 (Nur 8 = links unten)
9 = 1 + 8 (Halbkreis links)
10 = 2 + 8 (gegenüberliegend)
11 = 1 + 2 + 8 (Dreiviertel Kreis)
12 = 4 + 8 (Halbkreis unten)
13 = 1 + 4 + 8 (Dreiviertel Kreis)
14 = 2 + 4 + 8 (Dreiviertel Kreis)
15 = Kreis = verwende lieber drawCircle!
Beispiel:
Nehmen wir die Startkoordinaten von 160 und 120 für X und Y. Den Radius (r) legen wir mit 90 fest. Nun sprechen wir jeden Abschnitt einzeln an: Ecken-Wert 1, 2, 4 und 8 und geben jedem eine andere Farbe.
tft.fillCircleHelper(x, y, r, Wert(w), Versatz(v), Farbe);
Eine gefüllte Kreishälfte ver-zeichnen
Auch hier benötigen wir, wie beim Rechteck, nur die X- und Y-Start-Position, den Radius (r), den Wert (w), Versatz(v) vom Mittelpunkt und wie immer noch die Farbe.
Für den Wert (w) gilt 1 = rechte Hälfte, 2 = linke Hälfte und 3 für beide Hälften gemeinsam.
Für den Versatz gelten Pixelangaben, die nach unten gehen. Das heißt, von der gefüllten Kreishälfte die Pixel nach unten gezogen.
Beispiel:
tft.drawTriangle(x1,y1, x2,y2, x3,y3, Farbe);
Eine Dreieck zeichnen
Für ein Dreieck benötigt man drei Punkte, die durch Linien automatisch verbunden werden. Die Farbangabe ist wie immer ...
Mit X1 & Y1 wird der erste Punkt festgelegt, mit X2 & Y2 der Zweite und mit X3 & Y3 der Dritte
Beispiel:
tft.fillTriangle(x1,y1, x2,y2, x3,y3, Farbe);
Eine gefülltes Dreieck zeichnen
Für das Dreieck benötigt man drei Punkte, die durch Linien automatisch verbunden und ausgefüllt werden. Die Farbangabe ist wie immer ...
Mit X1 & Y1 wird der erste Punkt festgelegt, mit X2 & Y2 der Zweite und mit X3 & Y3 der Dritte
Beispiel:
