blikk info infothek forum galerie sitemap

Zeichnen mit Delphi

anfang zurueck weiter ende nach oben

Du möchtest mit Delphi auch einfach mal etwas Zeichnen. Kein Problem. Ich zeige dir nun wie es funktioniert.

 

Meistens verwendet man beim Programmieren, falls nötig, vorgegebene Grafiken,die man aus einem Ordner zieht,welche im Internet oder der Gleichen zu finden sind, um sie dann sinnvoll in seine Prozedur einzubeziehen, dass heißt sie zum Beispiel laufen, springen oder einfach erscheinen zu lassen.

Jedoch, da Delphi nun eine objektorientierte Programmierung ist kann man nicht nur vorgegebene Grafiken in seiner Prozedur verwenden, sondern auch eigene Grafiken entwerfen und sie dann darstellen.

 

Dazu braucht man mehrere Methoden, um verschiedene Zeichen- Elemente (=geometrische Figuren) zu zeichnen und auch einige Befehle, damit auch diese gezeichneten Elemente auf dem Bildschirm erscheinen.

Dies könnte man sich so vorstellen, dass man einem Roboter, in diesem Fall Delphi, sagen würde, was dieser zu zeichnen hat und er würde dann sinnbildlich einen Stift in die Hand nehmen, hier wäre es die entsprechende Prozedur, und  anfangen zu zeichnen.

 

Doch bevor man dies alles machen kann, braucht man eine geeignete Befehlsschaltfläche, damit der Prozedur auch klar gemacht wird, wann das Gezeichnete gesehen werden soll. Dies kann zum Beispiel mit einem Button gemacht werden. So kann man dann in dem Formular darauf klicken und schon würde das Programm erkennen, dass nun die Zeichen-Elemente in der Prozedur in dem Formular zusehen sein sollen. 

 

Jedoch um überhaupt einmal das Gezeichnete zu sehen, muss man zunächst eine so genannte Leinwand in dem Formular aufspannen. Diese Leinwand wird in Delphi „Canvas“ genannt und dann mit in die Prozedur Button- Klick eingefügt, die automatisch in der Prozedur erscheint, wenn man den Button in das Formular einsetzt  (with form1.Canvas do begin).

Damit diese Leinwand auch graphisch im Formular zu sehen ist,setzt man unter den Canvas- Befehl, den Befehl, dass die Leinwand in einer gewissen Größe, welche man selber bestimmen kann (rectangle(0,0,form1.width,form1.height), und in einer anderen gewünschten Farbe, im Formular erscheint (brush.color:=clwhite).

 

Nun gibt es verschiedene Methoden, um verschiedene geometrische Figuren zu zeichnen.

Bei der ersten Methode überlegt man sich welchen Stift sich der Roboter (Delphi) zur Hand nehmen soll. Welche Farbe (pen.color:=clred) und welche Dicke (pen.width:=2) er haben soll.

Und dann setzt man seinen gewünschten Befehl an den Roboter in die Prozedur Button-Klick, hinter der Anweisung, zum Aufspannen der Leinwand.

Diese Befehle kann man jederzeit an einer anderen gewünschten Stelle in der Prozedur verändern.

 

Danach sollte man wissen wo der Standpunkt des Stiftes im Formular sein sollte, bevor man anfängt verschiedene Figuren darin zu zeichnen. Um diesen Punkt festzulegen benutzt man die Methode „MoveTo“ .

Dabei setzt man zwei Koordinaten hinter den Begriff, damit Delphi erkennt, wo es anfangen soll zu zeichnen. MoveTo setzt so zu sagen die aktuelle Zeichenposition, dass heißt, dass man diese Methode nicht nur am Anfang jeder Prozedur anwenden kann, sondern auch jedes Mal zwischen drin, wenn man an einem ganz entfernten Punkt neu anfangen will zu zeichnen, wo jedoch der Stift im Moment noch nicht ist (MoveTo(x,y).

 

Die erste geometrische Figur, die man zeichnen lassen kann ist ein Rechteck. Der passende Ausdruck, den man in der Prozedur verwenden muss, heißt „rectangle“.

Dabei werden hinter dem Begriff vier Zahlen in eine Klammer gesetzt. Dies sollen die Koordinaten der beiden gegenüberliegenden Eckpunkte des Rechtecks sein. Wenn man diese Koordinaten dann angibt, verbindet Delphi, durch den passenden Begriff , die Punkte so, dass es ein Rechteck mit der gewünschten Größe wird. Dass heißt, je weiter entfernt diese beiden Punkte sind, desto größer wird das Rechteck dabei (rectangle(x1,y1,x2,y2).

Also wenn man die Entfernung der beiden x-Punkte weiter setzt als die der y-Punkte, dann wird das Rechteck sehr breit, ist es genau umgekehrt, wird es sehr länglich. Dabei muss man sich wieder vorstellen, dass hinter der Prozedur ein Roboter sitzt mit einem Stift in der Hand, der dann das Rechteck in einem Koordinatenkreuz zeichnet.

 

So ähnlich funktioniert auch die Methode „Ellipse“.

Hier muss man auch zwei Koordinaten angeben. Nur dass, wenn man dann Ellipse davor schreibt, ein Kreis gezeichnet wird innerhalb der Koordinaten, die ein Rechteck bilden (Ellipse(x1,y1,x2,y2).

 

Fast genauso funktioniert auch die Methode „Pie“, bei der man nur nun vier Koordinaten in Klammern setzten muss, da aus dieser Methode ein Halbkreis entstehen soll.

Dabei wird dann aus zwei Koordinaten wieder eine imaginäres Rechteck geformt, in dem ein Kreis gezeichnet wird, doch nun kommen noch zwei weitere Koordinaten dazu, die eine Gerade bilden und den kompletten Kreis, dann nur noch zu einem Halbkreis machen (pie(x1,y1,x2,y2,x3,y3,x4,y4).

 

Diese Figuren kann man dann natürlich auch mit einer anderen Farbe ausfüllen ( brush.color:=clblue).

 

Damit man jedoch nicht nur Rechtecke oder Kreise zeichnen muss gibt es auch die Methode „LineTo“.

Diese Methode verbindet zwei Koordinaten zu einer Geraden. Man zeigt erst, wo man sich befindet mit dem schon erwähnten MoveTo und setzt hinter dem LineTo eine weitere Koordinate, die dann miteinander verbunden werden (LineTo(x,y)).

Mit dieser Methode kann man zum Beispiel auch Dreiecke zeichnen, in dem man einfach drei Geraden in einem Dreieck positioniert.

 

Jedoch kann man beim Ausfüllen eines Dreiecks leider nicht brush.color benutzen, da die Geraden nun nie ganz aneinander stehen und Lücken lassen, auch wenn das für unsere menschlichen Augen nicht sichtbar ist, also wenn man diese Methode verwenden würde, dann würde die ganze Leinwand in der gewünschten Farbe erscheinen, nicht nur das Dreieck.

Damit jedoch auch wirklich nur das Dreieck in einer anderen Farbe ist, verwendet man  „floodfill“. Dabei werden wieder Koordinaten in Klammer hinter dem Ausdruck geschrieben, die nur irgendwo in dem Dreieck sein müssen, damit das Programm weiß, was es auszufüllen hat. Dann wird noch angegeben bis wohin die Farbe in dem Dreieck gelangen darf und so bleibt die Farbe, um das Dreieck auszufüllen, auch nur im Dreieck und breitet sich nicht auf der ganzen Leinwand aus (floodfill(150,260,clblack,fsborder);

 

Natürlich kann man mit der Methode LineTo nicht nur Dreiecke zeichnen, sondern noch viel andere Figuren, wie zum Beispiel einen Stern oder ein Fünfeck, aber das Ausfüllen funktioniert  immer nach der selben Methode.

 

Mit diesem Zeichenprogramm kann man nicht nur Figuren zeichnen, sondern man kann auch einen Schriftzug auf der Leinwand erscheinen lassen.

Dies geht ganz einfach mit der Methode „textout“, hinter der man einfach angibt, wo und welcher Schriftzug zu sehen sein soll ( textout (round (( form1.width-130)/2)-120,380,'Ende der Vorstellung').

 

Dabei kann man dann davor natürlich wieder feststellen welche Farbe die Buchstaben haben sollen (font.color:=clgreen) und wie groß sie sein sollen (font.height:=40).

 

Um nun noch besser diese ganzen Methoden zu verstehen, sollte man auch noch einiges über die Zusammenstellung der Koordinaten wissen.

Das Wichtigste dabei ist zu wissen wie das Formular, bzw. die Leinwand aufgebaut ist. Dieses ist nämlich in einem Koordinatenkreuz aufgebaut, wobei die x-Achse den oberen Rand darstellt und die y-Achse den linken Rand des Formulars. Dabei befindet sich der Nullpunkt in der linken oberen Ecke der Leinwand. Das heißt genau umgedreht als wir das in der Mathematik kennen.

Dies bedeutet, wenn man zum Beispiel einen Punkt (50/120) hat, dann geht der Stift zum Zeichnen 50 Schritte nach rechts und 120 nach unten und bleibt dann bei diesem Punkt stehen.

Die Schwierigkeit mit diesen Koordinaten ist dabei, wenn man mehrere Figuren ineinander setzen möchte, um dann auch den gewünschten Punkt zu treffen, da an der x-und y- Achse keinerlei Anhaltspunkte sind. Man erfährt nur durch die schon gesetzen Koordinaten, welcher Punkt in der Nähe sein könnte.

 

 

 

Anweisungen und Eigenschaften zu Delphi- Zeichnungen(Zusammenfassung):

 

        Zu Beginn noch eine Zusatzinformation über die Koordinatenachsen:

        Die x- und die y-Achse beginnen nicht wie in der Mathematik mit dem 

        0- Punkt unten links, sondern oben links!!

 

zunächst kann man einen Button einfügen, in den dann alle Programmierungen hineingeschrieben werden.

 

> Diese Option muss man zunächst eingeben um überhaupt etwas zeichnen zu können.

   with form1.canvas do begin

 

man zeichnet auf einer Leinwand, welche man wie folgt aufspannt:

 

brush.color:=clwhite;

rectangle(0,0,form1.width-130,form1.height);

 

Ø       Auf die Begriffe werde ich nachher noch näher eingehen.

 

Zudem möchte ich vorab noch erwähnen, dass es verschiedene Methoden zum zeichnen gibt.

 

Nun eine genauere Erklärung der Methoden mit Beispielen.

 

Ø       Methoden:

 

Moveto:       hiermit bewegt man sich an die Stelle an der man       

                   zeichnen möchte.

                   Beispiel:        moveto(100,200);

 

Lineto:                  hiermit kann man einzelne Striche ziehen

                   Beispiel:        lineto(200,200);

 

Pen:                      das ist der Stift mit dem man zeichnet. Man muss vor dem zeichnen die Stiftfarbe und auch die stiftbreite bestimmen. Dies funktioniert mit:

Ø       pen.color:=cl……. – für die Farbe

Beispiel:        pen.color:=clblack;

 

Ø       pen.width:=(z.B.)2 – für die Stiftbreite

Beispiel         pen.width:=2;

 

Rectangle:   diese Methode ist dazu da, um Rechtecke zu zeichnen.

                   Beispiel:        rectangle(150,200,350,300);        

 

Ellipse:        diese Methode ist zum Zeichnen von Kreisen.

                   Beispiel:        ellipse(265,285,275,285);

 

Pie:                       diese Methode ist zum Zeichnen eines nicht geschlossenen Kreises (z.B.Halbkreise).

                   Beispiel:        pie(80,220,120,280,120,250,80,250);

Brush:                   hiermit kann man die Füllfarbe eines geschlossenen Objektes (ellipse und rectangle) bestimmen.

                   Beispiel:   brush.color:=clyellow;

Ø       Brush.style:=bsclear damit man übereinander zeichnen kann

 

Floodfill:      hiermit füllt man Flächen aus, die nicht als geschlossen gelten.

                   Beispiel:   brush.color:=clyellow;

floodfill(150,260,clblack,fsborder);

 

Sleep:          mit dieser Methode kann man Pausen zwischen den Zeicheneinheiten machen.

                   Beispiel:   sleep(500);

 

Label:          wenn man unter den Funktionen (da wo man den Button einfügt) noch ein Label einfügt, kann man in das Bild auch noch Schriftzüge einarbeiten

                   Um das Label zu postionieren muss man noch Koordinaten angeben.

                   Beispiel:        label.height:=70

 

 

Dies sind einige der vielen Methoden mit denen man schon sehr viel zeichnen kann. Zu diesen Beispielen und Methoden gibt es auch noch Beispiele in denen schon ein Bild gezeichnet ist.

 

 

 

Martin, Carina, Marie und Christina



 

nach oben
punkt   seitenbereich schließen

Seitentitel



Beispielaufgabe Eistüte


Beispielaufgabe Kirche