Sign in Join
Wiki copytemporary

BGRABitmap tutorial 3/de: what changed

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

OldNewLine
11Dieses Tutorial zeigt, wie man mit der Maus auf einer Bitmap zeichnet.
22
33### Erzeugen Sie ein neues Projekt
44
55Erzeugen Sie ein neues Projekt und fügen Sie eine Referenz auf [[BGRABitmap/de|BGRABitmap]] hinzu, genau so wie im [[BGRABitmap tutorial/de|ersten Tutorial]].
66
77### Erzeugen Sie ein neues Bild
88
99Fügen Sie eine private Variable zum Hauptformular hinzu, um das Bild zu speichern:
1010
1111``` pascal
1212 TForm1 = class(TForm)
1313 private
1414 { private declarations }
1515 image: TBGRABitmap;
1616 public
1717 { public declarations }
1818 end;
1919```
2020
2121Erzeugen Sie das Bild, wenn das Formular erzeugt wird. Dazu doppelklicken Sie auf das Formular, eine Prozedur erscheint im Quelltexteditor. Fügen Sie eine Anweisung zum Erzeugen des Bildes ein:
2222
2323``` pascal
2424procedure TForm1.FormCreate(Sender: TObject);
2525begin
2626 image := TBGRABitmap.Create(640,480,BGRAWhite); //erzeuge ein 640x480 Bild
2727end;
2828```
2929
3030### Zeichnen Sie die Bitmap
3131
3232Fügen Sie einen OnPaint-Handler hinzu. Dazu wählen Sie das Hauptformular aus, gehen zum Objektinspektor, zum Karteireiter Ereignisse und doppelklicken Sie auf die Zeile 'OnPaint'. Dann fügen Sie den Zeichenbefehl ein:
3333
3434``` pascal
3535procedure TForm1.FormPaint(Sender: TObject);
3636begin
3737 PaintImage;
3838end;
3939```
4040
4141Schreiben Sie die Prozedur 'PaintImage':
4242
4343``` pascal
4444procedure TForm1.PaintImage;
4545begin
4646 image.Draw(Canvas,0,0,True);
4747end;
4848```
4949
5050Danach setzen Sie den Mauszeiger auf PaintImage und drücken Strg-Umsch-C, um die Deklaration dem Interface hinzuzufügen.
5151
5252### Behandeln Sie die Maus-Ereignisse
5353
5454Im Objektinspektor fügen Sie für die Ereignisse 'MouseDown' und 'MouseMove' jeweils einen Handler hinzu:
5555
5656``` pascal
5757procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
5858 Shift: TShiftState; X, Y: Integer);
5959begin
6060 if Button = mbLeft then DrawBrush(X,Y);
6161end;
6262
6363procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
6464 Y: Integer);
6565begin
6666 if ssLeft in Shift then DrawBrush(X,Y);
6767end;
6868```
6969
7070Ergänzen Sie die Prozedur 'DrawBrush':
7171
7272``` pascal
7373procedure TForm1.DrawBrush(X, Y: Integer);
7474const radius = 5;
7575begin
7676 image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
7777 BGRABlack,BGRAPixelTransparent, gtRadial,
7878 PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);
7979
8080 PaintImage;
8181end;
8282```
8383
8484Danach setzen Sie den Mauszeiger auf DrawBrush und drücken Strg-Umsch-C, um die Deklaration dem Interface hinzuzufügen.
8585
8686Diese Prozedur zeichnet einen radialen Farbverlauft (gtRadial):
8787
8888- das umgebende Rechteck ist (X-radius,Y-radius, X+radius,Y+radius).
8989- die Mitte ist schwarz, der Rand ist transparent
9090- die Mitte ist bei (X,Y) und der Rand bei (X+radius,Y)
9191
9292### Code
9393
9494``` pascal
9595unit UMain;
9696
9797{$mode objfpc}{$H+}
9898
9999interface
100100
101101uses
102102 Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
103103 BGRABitmap, BGRABitmapTypes;
104104
105105type
106106 { TForm1 }
107107
108108 TForm1 = class(TForm)
109109 procedure FormCreate(Sender: TObject);
110110 procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
111111 Shift: TShiftState; X, Y: Integer);
112112 procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
113113 procedure FormPaint(Sender: TObject);
114114 private
115115 { private declarations }
116116 image: TBGRABitmap;
117117 procedure DrawBrush(X, Y: Integer);
118118 procedure PaintImage;
119119 public
120120 { public declarations }
121121 end;
122122
123123var
124124 Form1: TForm1;
125125
126126implementation
127127
128128{ TForm1 }
129129
130130procedure TForm1.FormCreate(Sender: TObject);
131131begin
132132 image := TBGRABitmap.Create(640,480,BGRAWhite);
133133end;
134134
135135procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
136136 Shift: TShiftState; X, Y: Integer);
137137begin
138138 if Button = mbLeft then DrawBrush(X,Y);
139139end;
140140
141141procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
142142 Y: Integer);
143143begin
144144 if ssLeft in Shift then DrawBrush(X,Y);
145145end;
146146
147147procedure TForm1.FormPaint(Sender: TObject);
148148begin
149149 PaintImage;
150150end;
151151
152152procedure TForm1.DrawBrush(X, Y: Integer);
153153const radius = 20;
154154begin
155155 image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
156156 BGRABlack,BGRAPixelTransparent,gtRadial,
157157 PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);
158158
159159 PaintImage;
160160end;
161161
162162procedure TForm1.PaintImage;
163163begin
164164 image.Draw(Canvas,0,0,True);
165165end;
166166
167167initialization
168168 {$I UMain.lrs}
169169
170170end.
171171```
172172
173173### Starten Sie das Programm
174174
175175Sie sollten mit der Maus auf dem Formular zeichnen können.
176176
177-<figure>
178-<img src="BGRATutorial3.png" title="BGRATutorial3.png" />
179-<figcaption>BGRATutorial3.png</figcaption>
180-</figure>
177+![](/wiki-images/a/aa/BGRATutorial3.png)
181178
182179### Kontinuierliches Zeichnen
183180
184181Für das kontinuierliche Zeichnen brauchen wir zusätzliche Variablen:
185182
186183``` pascal
187184 TForm1 = class(TForm)
188185 ...
189186 private
190187 { private declarations }
191188 image: TBGRABitmap;
192189 mouseDrawing: boolean;
193190 mouseOrigin: TPoint;
194191```
195192
196193'mouseDrawing' ist während des Zeichnens (also bei gedrückter linker Maustaste) TRUE und 'mouseOrigin' ist der Anfangspunkt des zu zeichnenden Segments.
197194
198195Der Klick-Handler wird dadurch ein bisschenkomplizierter:
199196
200197``` pascal
201198procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
202199 Shift: TShiftState; X, Y: Integer);
203200begin
204201 if Button = mbLeft then
205202 begin
206203 mouseDrawing := True;
207204 mouseOrigin := Point(X,Y);
208205 DrawBrush(X,Y,True);
209206 end;
210207end;
211208```
212209
213210Er initialisiert die Zeichnung mit der aktuellen Position. Dann zeichnet er ein geschlossenes Segment (beachten Sie den neuen Parameter von DrawBrush). Wirklich, am Anfang wird das Segment geschlossen und hat die Länge Null, das ergibt eine Scheibe:
214211
215-<figure>
216-<img src="BGRATutorial3b.png" title="BGRATutorial3b.png" />
217-<figcaption>BGRATutorial3b.png</figcaption>
218-</figure>
212+![](/wiki-images/b/b1/BGRATutorial3b.png)
219213
220214Schritt für Schritt fügen wir einen neuen Teil (aber ein offenes Segment) hinzu:
221215
222-<figure>
223-<img src="BGRATutorial3c.png" title="BGRATutorial3c.png" />
224-<figcaption>BGRATutorial3c.png</figcaption>
225-</figure>
216+![](/wiki-images/d/d5/BGRATutorial3c.png)
226217
227218Darum brauchen wir einen neuen Parameter für die Funktion 'DrawBrush', diese wird zu:
228219
229220``` pascal
230221procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
231222const brushRadius = 20;
232223begin
233224 image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
234225 mouseOrigin := Point(X,Y);
235226
236227 PaintImage;
237228end;
238229```
239230
240231Wir übergen den Parameter 'Closed' an 'DrawLineAntialias', um anzuzeigen, ob das Segment geschlossen ist oder nicht. Beachten Sie die Reihenfolge der Koordinaten. Die Anfangs- und Endposition sind vertauscht. Tatsächlich ist für 'DrawLineAntialias' das Ende offen - wir hingegen wollen in diesem Fall, dass der Anfang offen ist.
241232
242233Die Definition von DrawBrush muss im Interface angepasst werden.
243234
244235Der MouseMove-Handler wird zu:
245236
246237``` pascal
247238procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
248239 Y: Integer);
249240begin
250241 if mouseDrawing then DrawBrush(X,Y,False);
251242end;
252243```
253244
254245Zuletzt fügen wir einen MouseUp-Handler hinzu, der 'mouseDrawing' aktualisiert:
255246
256247``` pascal
257248procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
258249 Shift: TShiftState; X, Y: Integer);
259250begin
260251 if Button = mbLeft then
261252 mouseDrawing := False;
262253end;
263254```
264255
265256### Code
266257
267258``` pascal
268259unit UMain;
269260
270261{$mode objfpc}{$H+}
271262
272263interface
273264
274265uses
275266 Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
276267 BGRABitmap, BGRABitmapTypes;
277268
278269type
279270 { TForm1 }
280271
281272 TForm1 = class(TForm)
282273 procedure FormCreate(Sender: TObject);
283274 procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
284275 Shift: TShiftState; X, Y: Integer);
285276 procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
286277 procedure FormMouseUp(Sender: TObject; Button: TMouseButton;
287278 Shift: TShiftState; X, Y: Integer);
288279 procedure FormPaint(Sender: TObject);
289280 private
290281 { private declarations }
291282 image: TBGRABitmap;
292283 mouseDrawing: boolean;
293284 mouseOrigin: TPoint;
294285 procedure DrawBrush(X, Y: Integer; Closed: boolean);
295286 procedure PaintImage;
296287 public
297288 { public declarations }
298289 end;
299290
300291var
301292 Form1: TForm1;
302293
303294implementation
304295
305296{ TForm1 }
306297
307298procedure TForm1.FormCreate(Sender: TObject);
308299begin
309300 image := TBGRABitmap.Create(640,480,BGRAWhite);
310301end;
311302
312303procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
313304 Shift: TShiftState; X, Y: Integer);
314305begin
315306 if Button = mbLeft then
316307 begin
317308 mouseDrawing := True;
318309 mouseOrigin := Point(X,Y);
319310 DrawBrush(X,Y,True);
320311 end;
321312end;
322313
323314procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
324315 Y: Integer);
325316begin
326317 if mouseDrawing then DrawBrush(X,Y,False);
327318end;
328319
329320procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
330321 Shift: TShiftState; X, Y: Integer);
331322begin
332323 if Button = mbLeft then
333324 mouseDrawing := False;
334325end;
335326
336327procedure TForm1.FormPaint(Sender: TObject);
337328begin
338329 PaintImage;
339330end;
340331
341332procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
342333const brushRadius = 20;
343334begin
344335 image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
345336 mouseOrigin := Point(X,Y);
346337
347338 PaintImage;
348339end;
349340
350341procedure TForm1.PaintImage;
351342begin
352343 image.Draw(Canvas,0,0,True);
353344end;
354345
355346initialization
356347 {$I UMain.lrs}
357348
358349end.
359350```
360351
361352### Starten Sie das Programm
362353
363354Jetzt ist das Zeichnen nahezu kontinuierlich:
364355
365-<figure>
366-<img src="BGRATutorial3d.png" title="BGRATutorial3d.png" />
367-<figcaption>BGRATutorial3d.png</figcaption>
368-</figure>
356+![](/wiki-images/9/9a/BGRATutorial3d.png)
369357
370358[[BGRABitmap tutorial 2/de|Voriges Tutorial (Laden eines Bildes)]] \| [[BGRABitmap tutorial 4/de|Nächstes Tutorial (direkter Zugriff auf die Pixel)]]
371359
372360---
373361*From the Free Pascal wiki, page "BGRABitmap tutorial 3/de", as it stood on 2020-02-10 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