Sign in Join
Wiki copytemporary

BGRABitmap tutorial 3/es: what changed

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

OldNewLine
11Esta tutoría muestra como dibujar en un bitmap con el mouse.
22
33### Crear un nuevo proyecto
44
55Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
66
77### Crea una nueva imágen
88
99Añade una variable privada a la forma principal para almacenar la imágen :
1010
1111``` pascal
1212 TForm1 = class(TForm)
1313 private
1414 { private declarations }
1515 image: TBGRABitmap;
1616 public
1717 { public declarations }
1818 end;
1919```
2020
2121Crea la imágen cuando la forma es creada. Para hacer esto, haz doble clic en la forma, un procedimiento debe aparecer en el editor de código. Añade la instrucción de creación :
2222
2323``` pascal
2424procedure TForm1.FormCreate(Sender: TObject);
2525begin
2626 image := TBGRABitmap.Create(640,480,BGRAWhite); //crea una imágen de 640x480
2727end;
2828```
2929
3030### Dibuja el bitmap
3131
3232Añade un manejador OnPaint. Para hacer esto, selecciona la forma principal, luego ve al inspector de objetos, en la pestaña de eventos haz doble clic en la línea OnPaint. Luego agrega el código de dibujo :
3333
3434``` pascal
3535procedure TForm1.FormPaint(Sender: TObject);
3636begin
3737 PaintImage;
3838end;
3939```
4040
4141Añade el procedimiento PaintImage :
4242
4343``` pascal
4444procedure TForm1.PaintImage;
4545begin
4646 image.Draw(Canvas,0,0,True);
4747end;
4848```
4949
5050Luego de escribir esto, pon el cursor en PaintImage y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
5151
5252### Manejar el mouse
5353
5454Con el inspector de objetos, agrega manejadores para los eventos MouseDown y MouseMove :
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
7070Agrega el procedimiento 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
8484Luego de escribir esto, pon el cursor en DrawBrush y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
8585
8686Este procedimiento dibuja un gradiente radial (gtRadial) :
8787
8888- el borde rectangular es (X-radius,Y-radius, X+radius,Y+radius).
8989- el centro es negro, el borde es transparente
9090- el centro está en (X,Y) y el borde está en (X+radius,Y)
9191
9292### Código
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### Ejecuta el programa
174174
175175Deberías poder dibujar en la forma.
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### Dibujo contínuo
183180
184181Para tener un dibujo contínuo, necesitamos agregar variables adicionales :
185182
186183``` pascal
187184 TForm1 = class(TForm)
188185 ...
189186 private
190187 { private declarations }
191188 image: TBGRABitmap;
192189 mouseDrawing: boolean;
193190 mouseOrigin: TPoint;
194191```
195192
196193mouseDrawing va a ser 'True' durante el dibujado (con el botón izquierdo presionado) y mouseOrigin el punto inicial del segmento que está siendo dibujado.
197194
198195El manejador de clic lo convierte en algo un poco mas complicado :
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
213210Esto inicializa el dibujado con la posición actual. Luego, esto dibuja un segmento cerrado (fíjate en el nuevo parámetro para DrawBrush). De todas formas, en el principio, el segmento está cerrado y tiene una longitud cero, que nos da un disco :
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
220214De a poco, agregaremos una nueva parte, que es un segmento abierto :
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
227218Es por esto que necesitamos un nuevo parámetro para la función DrawBrush, que se convierte en :
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
240231Transmitimos el parámetro Closed a DrawLineAntialias, para indicar cuando el segmento está cerrado o no. Mira el orden de las coordenadas. La posición inicial y la posición final están intercambiadas. De todas formas, para DrawLineAntialias, es la parte final que esta abierta, en este caso, necesitamos que la parte inicial esté abierta.
241232
242233La definición DrawBrush debe ser actualizada en la 'interface'.
243234
244235El manejador MouseMove se convierte en :
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
254245Finalmente, necesitamos agregar un manejador MouseUp para actualizar mouseDrawing :
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### Código
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### Ejecuta el programa
362353
363354Ahora el dibujo es en su mayoría contínuo :
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/es|Tutoría anterior (cargar imágen)]] \| [[BGRABitmap tutorial 4/es|Siguiente tutoría (acceso directo a píxeles)]]
371359
372360---
373361*From the Free Pascal wiki, page "BGRABitmap tutorial 3/es", 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).*
374362Category: Castellano
375363Category: Español

Back to history