Andorra 2D - Der Canvas

[igel457]

Das original Tutorial gibt es hier

Andorra 2D Tutorials
Canvas

Einleitung
In diesem Tutorial behandle ich den Andorra 2D Canvas, welchen es ab Version 0.2 gibt (oder schon jetzt im CVS Archiv). Dabei handelt es sich um ein Objekt, auf das man ähnlich wie bei der Windows GDI Grafiken zeichenen kann. Zur Zeit können mit dem Andorra 2D Canvas die folgenden Objekte gezeichnet werden:

• Text
• Linien
• Pfeile
• Rechtecke
• Beliebige Vierecke
• Kreise/Ellipsen

Dies hört sich nicht sehr spektakulär an, allerdings muss man beachten das die meisten Objekte mit Farbverlauf, sowie texturiert gezeichnet werden können.

Verwendung
Das TAdDraw Objekt beinhaltet ein eigenes "Canvas" Objekt, auf welches man einfach zugreifen kann. Um auf Canvas-Spezifische Typen zugreifen zu können, sollte noch die Unit "AdCanvas" eingebunden werden.

Delphi-Quellcode:

AdDraw1.BeginScene;
AdDraw1.ClearSurface(clBlack);

with AdDraw1.Canvas do
begin
  //Hier landet des Canvas-Code
  Release; //<-- Lässt man diese Zeile weg, wird nichts gezeichnet
end;

AdDraw1.EndScene;
AdDraw1.Flip;

Das Canvas verwaltet intern so genannte "Displaylisten". In diesen werden die Canvas-Objekte gesammelt. Mit dem aufruf von "Release" wird die Liste gezeichnet und eine neue erstellt.

Stifte und Pinsel
Wie bei TCanvas besitzt auch TAdCanvas zwei essenzielle Objekte: Einen Pen und einen Brush. Über den Pen kann eingestellt werden, wie Linien aussehen sollen, über den Brush kann das aussehen der Füllung verändert werden.
TAdBrush besitzt folgende Eigenschaften:

Delphi-Quellcode:

Color:TAndorraColor //Standardfarbe
GradientColor:TAndorraColor //Verlaufsfarbe
GradientDirecton:TAdCanvasGradientDirection //Richtung des Verlaufes (gdVertical, gdHorizontal)
Style:TAdBrushStyle //Stil (abClear, abSolid, abGradient)
Texture:TAd2dTexture //Textur, mit der das Objekt gefüllt werden soll 
TextureMode:TAdCanvasTextureMode //Art, wie das Objekt mit der Textur gefüllt werden soll (tmTile, tmStretch, tmStretchAlign)
TexturePosition:TAdCanvasTexturePosition //Wo sich die Textur befinden soll (tpStatic, tpDynamic)
BlendMode:TAd2dBlendMode //Beschreibt, wie das Objekt geblendet werden soll

Bei TAdPen sieht es ähnlich aus:

Delphi-Quellcode:

Color:TAndorraColor //Farbe des Stifts
Width:single //Breite des Stifts
Texture:TAd2dTexture //Textur des Stifts
TextureMode:TAdCanvasTextureMode //Art, wie die Line mit der Textur gefüllt werden soll (tmTile, tmStretch, tmStretchAlign)
TexturePosition:TAdCanvasTexturePosition //Wo sich die Textur befinden soll (tpStatic, tpDynamic)
PenPosition:TAdPenPosition //Wo sich die Line befinden soll (ppOuter,ppMiddle,ppInner)
Style:TAdPenStyle //Stil der Line (apNone, apSolid)
BlendMode:TAd2dBlendMode //Beschreibt, wie das Objekt geblendet werden soll

Linen Zeichnen
Es gibt zwei Befehle, die wichtig sind, um eine Linie zu Zeichenen:

Delphi-Quellcode:

MoveTo(X,Y) //Den Zeichenstift an einer bestimmten Stelle positionieren
LineTo(X,Y) //Von der letzten Stelle oder der Stelle, die mit MoveTo gesetzt wurde, zur angegebenen Stelle zeichnen

Beispiel 1:

Delphi-Quellcode:

//Zeichnet eine weiße Linie von (0;0) zu (100;100).
Pen.Color := Ad_ARGB(255,255,255,255);
MoveTo(0,0);
LineTo(100,100);

Beispiel 2:

Delphi-Quellcode:

//Zeichnet eine dicke Linie mit Farbverlauf von (0;0) zu (100;100);
Pen.Width := 4;
Pen.Color := Ad_ARGB(255,0,0,255);
MoveTo(0,0);
Pen.Color := Ad_ARGB(255,255,0,0);
LineTo(100,100);

Rechtecke Zeichnen
Dazu steht der Befehl "Rectangle" zur Verfügung:

Beispiel 1:

Delphi-Quellcode:

//Zeichnet ein weißes Rechteck mit blauer Umrandung von (1;1) nach (100;100);
Pen.Color := Ad_ARGB(255,0,0,255);
Brush.Color := Ad_ARGB(255,255,255,255);
Rectangle(1,1,100,100);
Release;

Beispiel 2:

Delphi-Quellcode:

//Zeichnet ein Rechteck mit horizonzalem Farbverlauf und blauer Umrandung von (1;1) nach (100;100);
Pen.Color := Ad_ARGB(255,0,0,255);;
Pen.Style := apSolid;
Brush.Color := Ad_ARGB(255,255,255,255);
Brush.GradientColor := Ad_ARGB(0,255,255,255);
Brush.GradientDirecton := gdHorizontal;
Rectangle(1,1,100,100);

Kreise Zeichnen
Hierzu wird der Befehl "Circle" oder "Ellipse" verwendet.

Beispiel 1:

Delphi-Quellcode:

//Zeichnet einen Kreis mit Farbverlauf und mit blauer Umrandung an Punkt (50;50) mit dem Radius 50px;
Pen.Color := Ad_ARGB(255,0,0,255);
Pen.Style := apSolid;
Brush.Color := Ad_ARGB(255,255,255,255);
Brush.GradientColor := Ad_ARGB(255,255,255,255);
Circle(50,50,50);

Text Zeichnen
Hierzu wird der Befehl "Textout" verwendet.

Beispiel 1:

Delphi-Quellcode:

//Zeichnet blauen Text
Pen.Color := Ad_ARGB(200, 0, 0, 255);
Textout(0,0,'Test Text!');

Beispiel 2:

Delphi-Quellcode:

with AdDraw.Canvas do
begin
  Font := AdDraw.Fonts.GenerateFont('Comic Sans MS',12,[]);
  Textout(0,0,'Test Text!');
end;

Copyright und Lizenz
(c) by Andreas Stöckel Mai 2007

Revision 2: Dezember 2007

Der Inhalt dieses Tutorials steht unter der GNU Lizenz für freie Dokumentation.

[edit=Jelly]Tutorial auf Wunsch des Autors angepasst Mfg, Jelly[/edit]

[Eljey]

Zeichnung des Farbverlaufes bei linie funktioniert nicht. Warum?

Delphi-Quellcode:

with AdDraw.Canvas do
 begin
 Pen.Width:=5;
 Pen.Color := Ad_ARGB(255,255,0,255);
 MoveTo(mitte_dis_x,mitte_dis_y);
 Pen.Color := Ad_ARGB(100,0,0,255);
 LineTo(v.x,v.y);
 v:=mDrehen(v.x,v.y,360 DIV mAnzahl);
 i:=i+1;
 end;
until mMenu[i].parent<>mMenu[mCurrentMain].id;
  AdDraw.Canvas.Release;

[Die Muhkuh]

Ich denke mal, dass das AdDraw.Canvas.Release in die Schleife muss.

[Eljey]

immer noch das gleich .

Delphi-Quellcode:

 with AdDraw.Canvas do
 begin
 Pen.Width:=5;
 Pen.Color := Ad_ARGB(255,255,0,255);
 MoveTo(mitte_dis_x,mitte_dis_y);
 Pen.Color := Ad_ARGB(100,0,0,255);
 LineTo(v.x,v.y);
 v:=mDrehen(v.x,v.y,360 DIV mAnzahl);
 i:=i+1;
 Release;
 end;
until mMenu[i].parent<>mMenu[mCurrentMain].id;

[STS301]

hast du auch

Delphi-Quellcode:

AdDraw1.BeginScene;
AdDraw1.ClearSurface(clBlack);

davor
und

Delphi-Quellcode:

AdDraw1.EndScene;
AdDraw1.Flip;

danach verwendet.

Womit Programmierst du?

[Eljey]

Ja, das hab ich verwendet, ich programmier mit Lazarus und OpenGL.
Hab ein Screenshot beigelegt, da sieht man auch das nächste problem, die linien auf der canvas überlagen die bilder. Kann man das verhindern;

[Eljey]

Jetzt klappts, nachdem ich die die Pinselbreite auf 0.5 gestellt hab.. komisch, der Verlauf funktioniert nur bis zu einer Pen dicke von1.
Das andere Problem steht aber noch

[Die Muhkuh]

Erst die Linien, dann die Bilder zeichnen.

[Eljey]

Danke hatte erst andere lösung aber jetzt hats geklappt. ich musste die bilder nach "Release" zeichnen