Sign in Join
Wiki copytemporary

BGRABitmap tutorial 10/de: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRABitmap tutorial 10/de

OldNewLine
1+Dieses Tutorial zeigt, wie Sie Texturen transformieren können ("texture mapping").
2+
3+### Erzeugen Sie ein neues Projekt
4+
5+Erzeugen Sie ein neues Projekt und fügen Sie eine Referenz auf [[BGRABitmap/de|BGRABitmap]] hinzu, genau so wie im [[BGRABitmap tutorial/de|ersten Tutorial]].
6+
7+### Verwenden des Vorgabe-Mappings
8+
9+Schauen wir uns an was passiert, wenn wir ein Polygon mit einer Textur zeichnen und dabei das Vorgabe-Mapping anwenden:
10+
11+``` pascal
12+procedure TForm1.FormPaint(Sender: TObject);
13+var image: TBGRABitmap;
14+ tex: TBGRABitmap;
15+begin
16+ //schwarzer Hintergrund
17+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
18+
19+ tex:= TBGRABitmap.Create('image.png'); //lade eine Bitmap
20+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex);
21+ tex.Free;
22+
23+ image.Draw(Canvas,0,0,True); //auf dem Bildschirm zeichnen
24+ image.free;
25+end;
26+```
27+
28+### Starten Sie das Programm
29+
30+Sie erhalten etwas in dieser Art:
31+
32+<figure>
33+<img src="BGRATutorial10a.png" title="BGRATutorial10a.png" />
34+<figcaption>BGRATutorial10a.png</figcaption>
35+</figure>
36+
37+Wie Sie sehen ist das Bild nicht verformt.
38+
39+### Affine Transformation
40+
41+Wir können aber auch eine affine Transformation anwenden, wie folgt:
42+
43+``` pascal
44+uses BGRABitmap, BGRABitmapTypes, BGRATransform;
45+
46+procedure TForm1.PaintImage;
47+var image: TBGRABitmap;
48+ tex: TBGRABitmap;
49+ affine: TBGRAAffineBitmapTransform;
50+
51+begin
52+ //schwarzer Hintergrund
53+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
54+
55+ tex:= TBGRABitmap.Create('image.png'); //lade eine Bitmap
56+
57+ //create a rotation of 45°
58+ affine := TBGRAAffineBitmapTransform.Create(tex,True);
59+ affine.RotateDeg(45);
60+
61+ //nimm diese Transformation als Parameter anstelle von 'tex'
62+ image.FillPolyAntialias( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], affine);
63+
64+ affine.Free;
65+ tex.Free;
66+
67+ image.Draw(Canvas,0,0,True); //auf dem Bildschirm zeichnen
68+ image.free;
69+end;
70+```
71+
72+### Starten Sie das Programm
73+
74+Sie erhalten ein gedrehtes Bild in dem Polygon:
75+
76+<figure>
77+<img src="BGRATutorial10b.png" title="BGRATutorial10b.png" />
78+<figcaption>BGRATutorial10b.png</figcaption>
79+</figure>
80+
81+### Texturen-Mapping
82+
83+Wenn die Textur an der Polygonlinie ausgerichtet sein soll, dann setzen wir ein Textur-Mapping ein.
84+
85+#### Lineares Mapping
86+
87+Lineares Mapping streckt das Bild linear bis zu den Rändern. Dazu schreiben wir:
88+
89+``` pascal
90+procedure TForm1.PaintImage;
91+var image: TBGRABitmap;
92+ tex: TBGRABitmap;
93+begin
94+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
95+
96+ tex:= TBGRABitmap.Create('image.png');
97+ image.FillPolyLinearMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)], tex,
98+ [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
99+ tex.Free;
100+
101+ image.Draw(Canvas,0,0,True);
102+ image.free;
103+end;
104+```
105+
106+Für das Mapping benutzen wir die Prozedur 'FillPolyLinearMapping'. Einige Parameter sind neu. Die Texturkoordinaten legen für jeden Punkt des Polygons die Lage in der Textur fest. Die letzte Option 'Interpolation' liefert uns die beste Qualität.
107+
108+### Starten Sie das Programm
109+
110+Jetzt ist die Textur verformt, passend zur Form des Polygons.
111+
112+<figure>
113+<img src="BGRATutorial10c.png" title="BGRATutorial10c.png" />
114+<figcaption>BGRATutorial10c.png</figcaption>
115+</figure>
116+
117+#### Perspektives Mapping
118+
119+Das perspektive Mapping erlaubt es, die Tiefe eines jeden Punktes zu ändern.
120+
121+``` pascal
122+procedure TForm1.PaintImage;
123+var image: TBGRABitmap;
124+ tex: TBGRABitmap;
125+begin
126+ image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
127+
128+ tex:= TBGRABitmap.Create('image.png');
129+ image.FillPolyPerspectiveMapping( [PointF(110,10), PointF(250,10), PointF(350,160), PointF(10,160)],
130+ [75, 75, 50, 50],
131+ tex, [PointF(0,0), PointF(tex.width-1,0), PointF(tex.Width-1,tex.Height-1), PointF(0,tex.Height-1)], true);
132+ tex.Free;
133+
134+ image.Draw(Canvas,0,0,True);
135+ image.free;
136+end;
137+```
138+
139+Hier ist die Tiefe an der Polygonoberseite 75, am unteren Rand des Polygons bei 50. Dies bedeutet, dass die Unterseite näher beim Betrachter liegt, so als ob die Fläche horizontal wäre (wie ein Fussboden).
140+
141+### Starten Sie das Programm
142+
143+Jetzt scheint es sich um ein 3D-Polygon zu handeln:
144+
145+<figure>
146+<img src="BGRATutorial10d.png" title="BGRATutorial10d.png" />
147+<figcaption>BGRATutorial10d.png</figcaption>
148+</figure>
149+
150+### Schlussfolgerungen
151+
152+Mittels dieser Techniken ist es möglich, ein Bild zu verformen - wie in LazPaints Werkzeug "Gitterverformung" ("grid deformation") - oder 3D-Objekte mit Texturen darzustellen, wie in den Tests 19-21 der Funktion 'testbgrafunc' (ebenfalls im LazPaint-Archiv enthalten).
153+
154+[[BGRABitmap tutorial 9/de|Voriges Tutorial (Phong-Schattierung)]] \| [[BGRABitmap tutorial 11/de|Nächstes Tutorial (Kombinieren von Transformationen)]]
155+
156+---
157+*From the Free Pascal wiki, page "BGRABitmap tutorial 10/de", as it stood on 2020-02-09 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*

Back to history