Sign in Join
Wiki copytemporary

BGRABitmap tutorial 3/es: what changed

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

Title: BGRABitmap tutorial 3/es

OldNewLine
1+Esta tutoría muestra como dibujar en un bitmap con el mouse.
2+
3+### Crear un nuevo proyecto
4+
5+Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
6+
7+### Crea una nueva imágen
8+
9+Añade una variable privada a la forma principal para almacenar la imágen :
10+
11+``` pascal
12+ TForm1 = class(TForm)
13+ private
14+ { private declarations }
15+ image: TBGRABitmap;
16+ public
17+ { public declarations }
18+ end;
19+```
20+
21+Crea 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 :
22+
23+``` pascal
24+procedure TForm1.FormCreate(Sender: TObject);
25+begin
26+ image := TBGRABitmap.Create(640,480,BGRAWhite); //crea una imágen de 640x480
27+end;
28+```
29+
30+### Dibuja el bitmap
31+
32+Añ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 :
33+
34+``` pascal
35+procedure TForm1.FormPaint(Sender: TObject);
36+begin
37+ PaintImage;
38+end;
39+```
40+
41+Añade el procedimiento PaintImage :
42+
43+``` pascal
44+procedure TForm1.PaintImage;
45+begin
46+ image.Draw(Canvas,0,0,True);
47+end;
48+```
49+
50+Luego de escribir esto, pon el cursor en PaintImage y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
51+
52+### Manejar el mouse
53+
54+Con el inspector de objetos, agrega manejadores para los eventos MouseDown y MouseMove :
55+
56+``` pascal
57+procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
58+ Shift: TShiftState; X, Y: Integer);
59+begin
60+ if Button = mbLeft then DrawBrush(X,Y);
61+end;
62+
63+procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
64+ Y: Integer);
65+begin
66+ if ssLeft in Shift then DrawBrush(X,Y);
67+end;
68+```
69+
70+Agrega el procedimiento DrawBrush :
71+
72+``` pascal
73+procedure TForm1.DrawBrush(X, Y: Integer);
74+const radius = 5;
75+begin
76+ image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
77+ BGRABlack,BGRAPixelTransparent, gtRadial,
78+ PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);
79+
80+ PaintImage;
81+end;
82+```
83+
84+Luego de escribir esto, pon el cursor en DrawBrush y presiona Ctrl-Shift-C para agregar la declaración a 'interface'.
85+
86+Este procedimiento dibuja un gradiente radial (gtRadial) :
87+
88+- el borde rectangular es (X-radius,Y-radius, X+radius,Y+radius).
89+- el centro es negro, el borde es transparente
90+- el centro está en (X,Y) y el borde está en (X+radius,Y)
91+
92+### Código
93+
94+``` pascal
95+unit UMain;
96+
97+{$mode objfpc}{$H+}
98+
99+interface
100+
101+uses
102+ Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
103+ BGRABitmap, BGRABitmapTypes;
104+
105+type
106+ { TForm1 }
107+
108+ TForm1 = class(TForm)
109+ procedure FormCreate(Sender: TObject);
110+ procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
111+ Shift: TShiftState; X, Y: Integer);
112+ procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
113+ procedure FormPaint(Sender: TObject);
114+ private
115+ { private declarations }
116+ image: TBGRABitmap;
117+ procedure DrawBrush(X, Y: Integer);
118+ procedure PaintImage;
119+ public
120+ { public declarations }
121+ end;
122+
123+var
124+ Form1: TForm1;
125+
126+implementation
127+
128+{ TForm1 }
129+
130+procedure TForm1.FormCreate(Sender: TObject);
131+begin
132+ image := TBGRABitmap.Create(640,480,BGRAWhite);
133+end;
134+
135+procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
136+ Shift: TShiftState; X, Y: Integer);
137+begin
138+ if Button = mbLeft then DrawBrush(X,Y);
139+end;
140+
141+procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
142+ Y: Integer);
143+begin
144+ if ssLeft in Shift then DrawBrush(X,Y);
145+end;
146+
147+procedure TForm1.FormPaint(Sender: TObject);
148+begin
149+ PaintImage;
150+end;
151+
152+procedure TForm1.DrawBrush(X, Y: Integer);
153+const radius = 20;
154+begin
155+ image.GradientFill(X-radius,Y-radius, X+radius,Y+radius,
156+ BGRABlack,BGRAPixelTransparent,gtRadial,
157+ PointF(X,Y), PointF(X+radius,Y), dmDrawWithTransparency);
158+
159+ PaintImage;
160+end;
161+
162+procedure TForm1.PaintImage;
163+begin
164+ image.Draw(Canvas,0,0,True);
165+end;
166+
167+initialization
168+ {$I UMain.lrs}
169+
170+end.
171+```
172+
173+### Ejecuta el programa
174+
175+Deberías poder dibujar en la forma.
176+
177+<figure>
178+<img src="BGRATutorial3.png" title="BGRATutorial3.png" />
179+<figcaption>BGRATutorial3.png</figcaption>
180+</figure>
181+
182+### Dibujo contínuo
183+
184+Para tener un dibujo contínuo, necesitamos agregar variables adicionales :
185+
186+``` pascal
187+ TForm1 = class(TForm)
188+ ...
189+ private
190+ { private declarations }
191+ image: TBGRABitmap;
192+ mouseDrawing: boolean;
193+ mouseOrigin: TPoint;
194+```
195+
196+mouseDrawing va a ser 'True' durante el dibujado (con el botón izquierdo presionado) y mouseOrigin el punto inicial del segmento que está siendo dibujado.
197+
198+El manejador de clic lo convierte en algo un poco mas complicado :
199+
200+``` pascal
201+procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
202+ Shift: TShiftState; X, Y: Integer);
203+begin
204+ if Button = mbLeft then
205+ begin
206+ mouseDrawing := True;
207+ mouseOrigin := Point(X,Y);
208+ DrawBrush(X,Y,True);
209+ end;
210+end;
211+```
212+
213+Esto 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 :
214+
215+<figure>
216+<img src="BGRATutorial3b.png" title="BGRATutorial3b.png" />
217+<figcaption>BGRATutorial3b.png</figcaption>
218+</figure>
219+
220+De a poco, agregaremos una nueva parte, que es un segmento abierto :
221+
222+<figure>
223+<img src="BGRATutorial3c.png" title="BGRATutorial3c.png" />
224+<figcaption>BGRATutorial3c.png</figcaption>
225+</figure>
226+
227+Es por esto que necesitamos un nuevo parámetro para la función DrawBrush, que se convierte en :
228+
229+``` pascal
230+procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
231+const brushRadius = 20;
232+begin
233+ image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
234+ mouseOrigin := Point(X,Y);
235+
236+ PaintImage;
237+end;
238+```
239+
240+Transmitimos 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.
241+
242+La definición DrawBrush debe ser actualizada en la 'interface'.
243+
244+El manejador MouseMove se convierte en :
245+
246+``` pascal
247+procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
248+ Y: Integer);
249+begin
250+ if mouseDrawing then DrawBrush(X,Y,False);
251+end;
252+```
253+
254+Finalmente, necesitamos agregar un manejador MouseUp para actualizar mouseDrawing :
255+
256+``` pascal
257+procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
258+ Shift: TShiftState; X, Y: Integer);
259+begin
260+ if Button = mbLeft then
261+ mouseDrawing := False;
262+end;
263+```
264+
265+### Código
266+
267+``` pascal
268+unit UMain;
269+
270+{$mode objfpc}{$H+}
271+
272+interface
273+
274+uses
275+ Classes, SysUtils, FileUtil, LResources, Forms, Controls, Graphics, Dialogs,
276+ BGRABitmap, BGRABitmapTypes;
277+
278+type
279+ { TForm1 }
280+
281+ TForm1 = class(TForm)
282+ procedure FormCreate(Sender: TObject);
283+ procedure FormMouseDown(Sender: TObject; Button: TMouseButton;
284+ Shift: TShiftState; X, Y: Integer);
285+ procedure FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
286+ procedure FormMouseUp(Sender: TObject; Button: TMouseButton;
287+ Shift: TShiftState; X, Y: Integer);
288+ procedure FormPaint(Sender: TObject);
289+ private
290+ { private declarations }
291+ image: TBGRABitmap;
292+ mouseDrawing: boolean;
293+ mouseOrigin: TPoint;
294+ procedure DrawBrush(X, Y: Integer; Closed: boolean);
295+ procedure PaintImage;
296+ public
297+ { public declarations }
298+ end;
299+
300+var
301+ Form1: TForm1;
302+
303+implementation
304+
305+{ TForm1 }
306+
307+procedure TForm1.FormCreate(Sender: TObject);
308+begin
309+ image := TBGRABitmap.Create(640,480,BGRAWhite);
310+end;
311+
312+procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;
313+ Shift: TShiftState; X, Y: Integer);
314+begin
315+ if Button = mbLeft then
316+ begin
317+ mouseDrawing := True;
318+ mouseOrigin := Point(X,Y);
319+ DrawBrush(X,Y,True);
320+ end;
321+end;
322+
323+procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
324+ Y: Integer);
325+begin
326+ if mouseDrawing then DrawBrush(X,Y,False);
327+end;
328+
329+procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton;
330+ Shift: TShiftState; X, Y: Integer);
331+begin
332+ if Button = mbLeft then
333+ mouseDrawing := False;
334+end;
335+
336+procedure TForm1.FormPaint(Sender: TObject);
337+begin
338+ PaintImage;
339+end;
340+
341+procedure TForm1.DrawBrush(X, Y: Integer; Closed: Boolean);
342+const brushRadius = 20;
343+begin
344+ image.DrawLineAntialias(X,Y,mouseOrigin.X,mouseOrigin.Y,BGRA(0,0,0,128),brushRadius,Closed);
345+ mouseOrigin := Point(X,Y);
346+
347+ PaintImage;
348+end;
349+
350+procedure TForm1.PaintImage;
351+begin
352+ image.Draw(Canvas,0,0,True);
353+end;
354+
355+initialization
356+ {$I UMain.lrs}
357+
358+end.
359+```
360+
361+### Ejecuta el programa
362+
363+Ahora el dibujo es en su mayoría contínuo :
364+
365+<figure>
366+<img src="BGRATutorial3d.png" title="BGRATutorial3d.png" />
367+<figcaption>BGRATutorial3d.png</figcaption>
368+</figure>
369+
370+[[BGRABitmap tutorial 2/es|Tutoría anterior (cargar imágen)]] \| [[BGRABitmap tutorial 4/es|Siguiente tutoría (acceso directo a píxeles)]]
371+
372+---
373+*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).*
374+Category: Castellano
375+Category: Español

Back to history