Lazarus/Computer-Graphik

Aus ZUM-Unterrichten

Nach soviel Mathematik und Formeln wäre jetzt vielleicht ein kleines Kontrastprogramm angebracht. In den alten Zeiten der Computerei wurden fast immer nur Zahlen und Buchstaben auf Papier ausgegeben. Kreative Leute machten selbst daraus kleine Kunstwerke. Heute sind fast alle Computer aus dem Anwenderbereich graphikfähig und auch Lazarus kann recht gut mit einfacher Graphik umgehen.

Die TImage-Komponente und ihre "Leinwand" (Canvas)

Eine Lazarus-Komponente speziell zur Manipulation von Graphiken ist die Komponente TImage. Um sich das Arbeiten mit dieser Komponente besser vorstellen zu können, stellen wir uns einen echten Künstler und sein Werkzeug vor: Eine Leinwand (engl.: Canvas), einen dazu passenden Bleistift (engl.: Pen) zum Zeichnen von Formen und einen Pinsel (engl.: Brush) zum Ausmalen der Flächen. Etwas seltsam ist dabei, dass in Lazarus Bleistift und Pinsel Eigenschaften der Leinwand sind; wir stellen uns vor, sie wären daran angebunden, damit sie nicht im hektischen Kunstbetrieb verloren gehen.

Bei den folgenden Beispielen gehen wir davon aus, dass es auf dem Bildschirm eine Komponente image1 gibt, deren Eigenschaft Canvas wir ansprechen.


Farben, Stile und Strichdicken

Sowohl der Stift als auch der Pinsel haben eine Farbe als auch einen "Stil". Der Stift hat außerdem eine Dicke.

Befehl Wirkung
image1.canvas.Pen.Color:=Farbe; Setzt die Stiftfarbe
image1.canvas.Brush.Color:=Farbe; Setzt die Pinselfarbe
image1.canvas.Pen.Style:=Stil; Setzt den Stift-Stil
image1.canvas.Brush.Style:=Stil; Setzt den Pinsel-Stil
image1.canvas.Pen.Width:=Breite; Setzt die Breite der Linien

Es gibt eine Reihe vorgefertigter Farben und Stile. Die wichtigsten:

Farbname Farbe
clBlack Schwarz
clWhite Weiß
clRed Rot
clGreen Grün
clBlue Blau
clYellow Gelb
clAqua Cyan
clFuchsia Magenta

Das sind natürlich nur sehr wenige, ausgewählte Farben. In Lazarus ist es aber auch möglich, alle nur überhaupt auf dem Bildschirm denkbaren Farben darzustellen. Hierzu muss man sich darüber klar sein, dass alle Bildschirmfarben mit drei Zahlenwerten beschrieben werden können. Diese Werte stehen für die Farben Rot, Grün und Blau und liegen im Bereich zwischen 0 und 255.

Befehl Wirkung
image1.canvas.Pen.Color:=RGBToColor(r,g,b); Setzt die Stiftfarbe auf die durch die Zahlen r,g und b beschriebene Farbe.


Die Farbe "durchsichtig" gibt es in Lazarus so nicht. Die Sichtbarkeit- bzw. Nicht-Sichtbarkeit von Linien und Füllungen wird über "Stile" geregelt:

Stil-Befehl Bedeutung
psSolid Durchgezogene Linie
psClear Unsichtbare Linie
bsSolid Durchgefärbte Füllung
bsClear Unsichtbare Füllung

Löschen

Befehl Wirkung
image1.canvas.clear; Färbt die Leinwand einheitlich in der Farbe des Pinsels (Brush).
Es kann sein, dass in Ausnahmefällen die Färbung stattdessen schwarz wird.
Möglicherweise handelt es sich dabei um einen Programmierfehler in Lazarus.
Abhilfe lässt sich dadurch schaffen, den clear-Befehl zweimal hintereinander auszuführen).

Punkte und Linien

Befehl Wirkung
image1.canvas.pixels[x,y]:=Farbe; Setzt das Pixel mit den Koordinaten x und y auf die entsprechende Farbe.
image1.canvas.line(x1,y1,x2,y2); Zeichnet eine Linie vom Punkt (x1,y1) zum Punkt (x2,y2). Die Farbe ist die PenColor des Canvas.

Formen

Befehl Wirkung
Image1.Canvas.Rectangle(x1,y1,x2,y2) Zeichnet ein Rechteck mit den Eckpunkten (x1,y1) und (x2,y2)
Image1.Canvas.Ellipse(x1,y1,x2,y2) Zeichnet eine Ellipse umgrenzt von dem (unsichtbaren) Rechteck mit den Eckpunkten (x1,y1) und (x2,y2)

Schreiben auf der Leinwand

Befehl Wirkung
Image1.Canvas.TextOut(x,y,Text); Schreibt den Text an die Koordinaten (x,y). Brush.Color bildet dabei die Hintergrundfarbe.

Ein Beispiel

Das folgende Beispiel ist ein (sehr bescheidener) Versuch, mit dem Computer ein Bild zu malen. Es benötigt eine Image-Komponente mit dem Namen image1 mit einer Höhe von 400 Pixeln oder mehr und einer Breite von 600 Pixeln oder mehr und einen Button1. 


unit bild;
{$mode objfpc}{$H+}
interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls,
  ExtCtrls,LazIOStuff;

type
  { TForm1 }

  TForm1 = class(TForm)
    Button1: TButton;
    Image1: TImage;
    procedure Button1Click(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;

var
  Form1: TForm1;
  i : integer;


implementation

{$R *.lfm}
{ TForm1 }

procedure TForm1.Button1Click(Sender: TObject);
begin
  // Hintergrund
  Image1.Canvas.Brush.Color:=clBlack;
  Image1.Canvas.Brush.Style:=bsSolid;
  Image1.Canvas.Clear;
  Image1.Canvas.Clear; // zweimal, wenn's beim ersten Mal nicht funktioniert

  // Zwei einsame Schneeflocken
   Image1.Canvas.Pixels[100,300]:=clWhite;
   Image1.Canvas.Pixels[240,200]:=clWhite;

   // Haus
  Image1.Canvas.Pen.Color:=clBlue;
  Image1.Canvas.Pen.Width:=3;
  Image1.Canvas.Brush.Color:=clGray;

  Image1.Canvas.Rectangle(200,300,300,380);
  Image1.Canvas.Line(180,320,250,220);
  Image1.Canvas.Line(320,320,250,220);

  // Sonne
  Image1.Canvas.Pen.Style:=psClear;
  Image1.Canvas.Brush.Color:=clYellow;
  Image1.Canvas.Ellipse(550,50,600,100);

  // Schrift
  Image1.Canvas.TextOut(100,380,'Das Haus in der Sonne');

end;


end.

Aufgabe
  1. Das Haus vom Nikolaus
    Veranlasse den Computer dazu, das "Haus vom Nikolaus" zu zeichnen.
  2. Mathematik: Dreiecke zeichnen
    In insgesamt 6 Edit-Komponenten soll der Benutzer die Koordinaten von 3 Punkten festlegen. Der Computer soll dann entsprechend ein Dreieck zeichnen.
  3. Bildrauschen:
    Fülle den die Zeichenfläche mit 10000 zufällig gefärbten Pixeln an zufälligen Positionen.
  4. Biologie/Bildende Kunst: Farbwahrnehmung
    Die Farbwahrnehmung von Menschen ist sehr unterschiedlich. Schreibe ein Programm, bei dem man mit drei Edit-Komponenten den Rot-, Grün- und Blau-Wert eines Kreises inmitten einer schwarzen Fläche festlegen kann.
  5. Gitter auf dem Bildschirm
    Zeichne in eine Image-Komponente ein Gitter mit Kästchen. Die horizontalen und vertikalen Linien sollen jeweils einen Abstand von 20 Pixeln voneinander haben.
  6. Farbverlauf
    Eine Image-Komponente soll von unten nach oben mit einem Farbverlauf von dunkelgrau nach hellgrau ausgefüllt werden.
  7. Mathematik: Sinus
    Versuche, eine Sinuskurve auf dem Bildschirm darzustellen.


Lazarus Logo (new).png

Lazarus-Buch

Abgerufen von „https://unterrichten.zum.de/index.php?title=Lazarus/Computer-Graphik&oldid=96904“