Sign in Join
Wiki copytemporary

BGRABitmap tutorial 5/es: what changed

Revision 3 to 4. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
1-[[BGRABitmap tutorial/es|**Home**]] | [[BGRABitmap tutorial 1/es|**Tutorial 1**]] | [[BGRABitmap tutorial 2/es|**Tutorial 2**]] | [[BGRABitmap tutorial 3/es|**Tutorial 3**]] | [[BGRABitmap tutorial 4/es|**Tutorial 4**]] | **Tutorial 5** | [[BGRABitmap tutorial 6/es|**Tutorial 6**]] | [[BGRABitmap tutorial 7/es|**Tutorial 7**]] | [[BGRABitmap tutorial 8/es|**Tutorial 8**]] | [[BGRABitmap tutorial 9/es|**Tutorial 9**]] | [[BGRABitmap tutorial 10/es|**Tutorial 10**]] | [[BGRABitmap tutorial 11/es|**Tutorial 11**]] | [[BGRABitmap tutorial 12/es|**Tutorial 12**]] | [Edit](<http://wiki.lazarus.freepascal.org/index.php?title=Template:BGRABitmap_tutorial_index/es&action=edit>)
2-
3-Esta tutoría muestra como usar capas.
4-
5-## Contents
6-
7- * 1 Crear un nuevo proyecto
8- * 2 Acerca de las máscaras
9- * 3 Borrando las partes de una imágen
10- * 4 Agrega un manejador de pintado
11- * 5 Ejecuta el programa
12- * 6 Añade otra capa con un sol
13- * 7 Ejecuta el programa
14- * 8 Añade una capa de luz
15- * 9 Código resultante
16- * 10 Ejecuta el programa
1+Esta tutoría muestra como usar capas.
172
183### Crear un nuevo proyecto
194
20-Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
5+Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
216
227### Acerca de las máscaras
238
24-Una máscara es una imágen de escala de grises. Cuando una máscara es aplicada en una imágen, las partes de la imágen que coinciden con las partes negras de la máscara son borradas y se convierten en transparentes, considerando que las partes que se superponen con las partes blancas de la máscara se mantienen. En otras palabras, la máscara es como un canal alfa define la opacidad. Si el valor de la máscara es cero, entonces se convierte en transparente, y si el valor de la máscara es de 255, se vuelve opaco.
9+Una máscara es una imágen de escala de grises. Cuando una máscara es aplicada en una imágen, las partes de la imágen que coinciden con las partes negras de la máscara son borradas y se convierten en transparentes, considerando que las partes que se superponen con las partes blancas de la máscara se mantienen. En otras palabras, la máscara es como un canal alfa define la opacidad. Si el valor de la máscara es cero, entonces se convierte en transparente, y si el valor de la máscara es de 255, se vuelve opaco.
2510
26-[![BGRATutorial5d.png](/wiki-images/0/05/BGRATutorial5d.png)](</File:BGRATutorial5d.png>)
11+![](/wiki-images/0/05/BGRATutorial5d.png)
2712
28-En este ejemplo, en la imágen, la imagen de inicio está en la esquina superior izquierda, la máscara en la parte superior derecha, y el resultado al aplicar la máscara en la esquina inferior izquierda. Código en OnPaint :
29-```
13+En este ejemplo, en la imágen, la imagen de inicio está en la esquina superior izquierda, la máscara en la parte superior derecha, y el resultado al aplicar la máscara en la esquina inferior izquierda. Código en OnPaint :
14+
15+``` pascal
3016var temp,tex,mask: TBGRABitmap;
31- begin
32- temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
33-
34- //cargando y escalando la textura
35- tex := TBGRABitmap.Create('texture.png');
36- BGRAReplace(tex,tex.Resample(128,80));
37-
38- //muestra una imágen en la esquina superior izquierda
39- temp.PutImage(10,10,tex,dmDrawWithTransparency);
40-
41- //crea una máscara con un elipse y un rectángulo
42- mask := TBGRABitmap.Create(128,80,BGRABlack);
43- mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
44- mask.FillRectAntialias(60,40,100,70,BGRAWhite);
45-
46- //muestra la máscara en la parte superior derecha
47- temp.PutImage(150,10,mask,dmDrawWithTransparency);
48-
49- //aplica la máscara a la imágen
50- tex.ApplyMask(mask);
51-
52- //muestra la imágen resultante en la esquina inferior izquierda
53- temp.PutImage(10,100,tex,dmDrawWithTransparency);
54-
55- mask.Free;
56- tex.Free;
57-
58- //muestra todo en la pantalla
59- image.Draw(Canvas,0,0,True);
60- image.Free;
61- end;
17+begin
18+ temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
19+
20+ //cargando y escalando la textura
21+ tex := TBGRABitmap.Create('texture.png');
22+ BGRAReplace(tex,tex.Resample(128,80));
23+
24+ //muestra una imágen en la esquina superior izquierda
25+ temp.PutImage(10,10,tex,dmDrawWithTransparency);
26+
27+ //crea una máscara con un elipse y un rectángulo
28+ mask := TBGRABitmap.Create(128,80,BGRABlack);
29+ mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
30+ mask.FillRectAntialias(60,40,100,70,BGRAWhite);
31+
32+ //muestra la máscara en la parte superior derecha
33+ temp.PutImage(150,10,mask,dmDrawWithTransparency);
34+
35+ //aplica la máscara a la imágen
36+ tex.ApplyMask(mask);
37+
38+ //muestra la imágen resultante en la esquina inferior izquierda
39+ temp.PutImage(10,100,tex,dmDrawWithTransparency);
40+
41+ mask.Free;
42+ tex.Free;
43+
44+ //muestra todo en la pantalla
45+ image.Draw(Canvas,0,0,True);
46+ image.Free;
47+end;
6248```
6349
6450### Borrando las partes de una imágen
6551
66-Algunas funciones permiten borrar una elipse, un rectángulo, etc. Esto significa que la parte de la imagen se vuelve transparente. Por tanto, es posible establecer un agujero en una imagen. Si el parámetro alfa es de 255, el agujero es completamente transparente. Sino, el agujero es semitransparente.
52+Algunas funciones permiten borrar una elipse, un rectángulo, etc. Esto significa que la parte de la imagen se vuelve transparente. Por tanto, es posible establecer un agujero en una imagen. Si el parámetro alfa es de 255, el agujero es completamente transparente. Sino, el agujero es semitransparente.
6753
68-[![BGRATutorial5e.png](/wiki-images/6/62/BGRATutorial5e.png)](</File:BGRATutorial5e.png>)
54+![](/wiki-images/6/62/BGRATutorial5e.png)
6955
70-Aquí una elipse se borra de la izquierda con un parámetro alfa de 255, y otra elipse se borra a la derecha con un parámetro alfa del 128. Código OnPaint :
71-```
56+Aquí una elipse se borra de la izquierda con un parámetro alfa de 255, y otra elipse se borra a la derecha con un parámetro alfa del 128. Código OnPaint :
57+
58+``` pascal
7259var image,tex: TBGRABitmap;
73- begin
74- image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
75-
76- //muestra y escala la textura
77- tex := TBGRABitmap.Create('texture.png');
78- BGRAReplace(tex,tex.Resample(128,80));
79-
80- //muestra la imágen
81- image.PutImage(10,10,tex,dmDrawWithTransparency);
82-
83- //borra las partes
84- tex.EraseEllipseAntialias(40,40,30,30,255);
85- tex.EraseEllipseAntialias(80,40,30,30,128);
86-
87- //muestra el resultado
88- image.PutImage(10,100,tex,dmDrawWithTransparency);
89-
90- tex.Free;
91-
92- //muestra todo en la pantalla
93- image.Draw(Canvas,0,0,True);
94- image.Free;
95- end;
60+begin
61+ image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
62+
63+ //muestra y escala la textura
64+ tex := TBGRABitmap.Create('texture.png');
65+ BGRAReplace(tex,tex.Resample(128,80));
66+
67+ //muestra la imágen
68+ image.PutImage(10,10,tex,dmDrawWithTransparency);
69+
70+ //borra las partes
71+ tex.EraseEllipseAntialias(40,40,30,30,255);
72+ tex.EraseEllipseAntialias(80,40,30,30,128);
73+
74+ //muestra el resultado
75+ image.PutImage(10,100,tex,dmDrawWithTransparency);
76+
77+ tex.Free;
78+
79+ //muestra todo en la pantalla
80+ image.Draw(Canvas,0,0,True);
81+ image.Free;
82+end;
9683```
9784
9885### Agrega un manejador de pintado
9986
100-Con el inspector de objetos, agrega un manejador OnPaint y escribe :
101-```
87+Con el inspector de objetos, agrega un manejador OnPaint y escribe :
88+
89+``` pascal
10290procedure TForm1.FormPaint(Sender: TObject);
103- var image: TBGRABitmap;
104- size: single;
105-
106- procedure DrawMoon;
107- var layer: TBGRABitmap;
108- begin
109- layer := TBGRABitmap.Create(image.Width,image.Height);
110- layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
111- layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
112- image.PutImage(0,0,layer,dmDrawWithTransparency);
113- layer.Free;
114- end;
115-
116- begin
117- image := TBGRABitmap.Create(ClientWidth,ClientHeight);
118-
119- //Computa el espacio disponible en ambas direcciones
120- if image.Height < image.Width then
121- size := image.Height
122- else
123- size := image.Width;
124-
125- image.GradientFill(0,0,image.Width,image.Height,
126- BGRA(128,192,255),BGRA(0,0,255),
127- gtLinear,PointF(0,0),PointF(0,image.Height),
128- dmSet);
129-
130- DrawMoon;
131-
132- image.Draw(Canvas,0,0,True);
133- image.free;
134- end;
91+var image: TBGRABitmap;
92+ size: single;
93+
94+ procedure DrawMoon;
95+ var layer: TBGRABitmap;
96+ begin
97+ layer := TBGRABitmap.Create(image.Width,image.Height);
98+ layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
99+ layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
100+ image.PutImage(0,0,layer,dmDrawWithTransparency);
101+ layer.Free;
102+ end;
103+
104+begin
105+ image := TBGRABitmap.Create(ClientWidth,ClientHeight);
106+
107+ //Computa el espacio disponible en ambas direcciones
108+ if image.Height < image.Width then
109+ size := image.Height
110+ else
111+ size := image.Width;
112+
113+ image.GradientFill(0,0,image.Width,image.Height,
114+ BGRA(128,192,255),BGRA(0,0,255),
115+ gtLinear,PointF(0,0),PointF(0,image.Height),
116+ dmSet);
117+
118+ DrawMoon;
119+
120+ image.Draw(Canvas,0,0,True);
121+ image.free;
122+end;
135123```
136124
137-El procedimiento crea una imágen y la rellena con un degradado azúl. Esta es la capa de fondo.
125+El procedimiento crea una imágen y la rellena con un degradado azúl. Esta es la capa de fondo.
138126
139-El procedimiento DrawMoon crea una capa, dibuja una luna en el mismo. En primer lugar un disco blanco se dibuja, a continuación, un disco más pequeño se resta. Por último, esta capa se fusiona con el fondo.
127+El procedimiento DrawMoon crea una capa, dibuja una luna en el mismo. En primer lugar un disco blanco se dibuja, a continuación, un disco más pequeño se resta. Por último, esta capa se fusiona con el fondo.
140128
141129### Ejecuta el programa
142130
143-Deberías ver un cielo azúl con una luna. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
131+Deberías ver un cielo azúl con una luna. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
144132
145-[![Tutorial5a.png](/wiki-images/1/15/Tutorial5a.png)](</File:Tutorial5a.png>)
133+![](/wiki-images/1/15/Tutorial5a.png)
146134
147135### Añade otra capa con un sol
148136
149-En el evento OnPaint, añade el siguiente subprocedimiento :
150-```
151-procedure DrawSun;
152- var layer,mask: TBGRABitmap;
153- begin
154- layer := TBGRABitmap.Create(image.Width,image.Height);
155- layer.GradientFill(0,0,layer.Width,layer.Height,
156- BGRA(255,255,0),BGRA(255,0,0),
157- gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
158- dmSet);
159- mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
160- mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
161- layer.ApplyMask(mask);
162- mask.Free;
163- image.PutImage(0,0,layer,dmDrawWithTransparency);
164- layer.Free;
165- end;
137+En el evento OnPaint, añade el siguiente subprocedimiento :
138+
139+``` pascal
140+ procedure DrawSun;
141+ var layer,mask: TBGRABitmap;
142+ begin
143+ layer := TBGRABitmap.Create(image.Width,image.Height);
144+ layer.GradientFill(0,0,layer.Width,layer.Height,
145+ BGRA(255,255,0),BGRA(255,0,0),
146+ gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
147+ dmSet);
148+ mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
149+ mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
150+ layer.ApplyMask(mask);
151+ mask.Free;
152+ image.PutImage(0,0,layer,dmDrawWithTransparency);
153+ layer.Free;
154+ end;
166155```
167156
168-Este procedimiento crea un gradiente radial de color rojo y naranja y se aplica una máscara circular a la misma. Esto da como resultado un disco de color. Por último, la capa se fusiona con el fondo.
157+Este procedimiento crea un gradiente radial de color rojo y naranja y se aplica una máscara circular a la misma. Esto da como resultado un disco de color. Por último, la capa se fusiona con el fondo.
169158
170-Agregue una llamada a este procedimiento para dibujarlo después de la luna.
159+Agregue una llamada a este procedimiento para dibujarlo después de la luna.
171160
172161### Ejecuta el programa
173162
174-Deberías ver un cielo azúl con una luna y un sol. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
163+Deberías ver un cielo azúl con una luna y un sol. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
175164
176-[![BGRATutorial5b.png](/wiki-images/9/9b/BGRATutorial5b.png)](</File:BGRATutorial5b.png>)
165+![](/wiki-images/9/9b/BGRATutorial5b.png)
177166
178167### Añade una capa de luz
179168
180-Añade el siguiente subprocedimiento en el evento OnPaint :
181-```
182-procedure ApplyLight;
183- var layer: TBGRABitmap;
184- begin
185- layer := TBGRABitmap.Create(image.Width,image.Height);
186- layer.GradientFill(0,0,layer.Width,layer.Height,
187- BGRA(255,255,255),BGRA(64,64,64),
188- gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
189- dmSet);
190- image.BlendImage(0,0,layer,boMultiply);
191- layer.Free;
192- end;
169+Añade el siguiente subprocedimiento en el evento OnPaint :
170+
171+``` pascal
172+ procedure ApplyLight;
173+ var layer: TBGRABitmap;
174+ begin
175+ layer := TBGRABitmap.Create(image.Width,image.Height);
176+ layer.GradientFill(0,0,layer.Width,layer.Height,
177+ BGRA(255,255,255),BGRA(64,64,64),
178+ gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
179+ dmSet);
180+ image.BlendImage(0,0,layer,boMultiply);
181+ layer.Free;
182+ end;
193183```
194184
195-Este procedimiento dibuja una capa con un degradado radial blanco. Luego es aplicado para multiplicar la imágen.
185+Este procedimiento dibuja una capa con un degradado radial blanco. Luego es aplicado para multiplicar la imágen.
196186
197187### Código resultante
198-```
188+
189+``` pascal
199190procedure TForm1.FormPaint(Sender: TObject);
200- var image: TBGRABitmap;
201- size: single;
202-
203- procedure DrawMoon;
204- var layer: TBGRABitmap;
205- begin
206- layer := TBGRABitmap.Create(image.Width,image.Height);
207- layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
208- layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
209- image.PutImage(0,0,layer,dmDrawWithTransparency);
210- layer.Free;
211- end;
212-
213- procedure DrawSun;
214- var layer,mask: TBGRABitmap;
215- begin
216- layer := TBGRABitmap.Create(image.Width,image.Height);
217- layer.GradientFill(0,0,layer.Width,layer.Height,
218- BGRA(255,255,0),BGRA(255,0,0),
219- gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
220- dmSet);
221- mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
222- mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
223- layer.ApplyMask(mask);
224- mask.Free;
225- image.PutImage(0,0,layer,dmDrawWithTransparency);
226- layer.Free;
227- end;
228-
229- procedure ApplyLight;
230- var layer: TBGRABitmap;
231- begin
232- layer := TBGRABitmap.Create(image.Width,image.Height);
233- layer.GradientFill(0,0,layer.Width,layer.Height,
234- BGRA(255,255,255),BGRA(64,64,64),
235- gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
236- dmSet);
237- image.BlendImage(0,0,layer,boMultiply);
238- layer.Free;
239- end;
240-
241- begin
242- image := TBGRABitmap.Create(ClientWidth,ClientHeight);
243-
244- if image.Height < image.Width then
245- size := image.Height
246- else
247- size := image.Width;
248-
249- image.GradientFill(0,0,image.Width,image.Height,
250- BGRA(128,192,255),BGRA(0,0,255),
251- gtLinear,PointF(0,0),PointF(0,image.Height),
252- dmSet);
253-
254- DrawMoon;
255- DrawSun;
256- ApplyLight;
257-
258- image.Draw(Canvas,0,0,True);
259- image.free;
260- end;
191+var image: TBGRABitmap;
192+ size: single;
193+
194+ procedure DrawMoon;
195+ var layer: TBGRABitmap;
196+ begin
197+ layer := TBGRABitmap.Create(image.Width,image.Height);
198+ layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
199+ layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
200+ image.PutImage(0,0,layer,dmDrawWithTransparency);
201+ layer.Free;
202+ end;
203+
204+ procedure DrawSun;
205+ var layer,mask: TBGRABitmap;
206+ begin
207+ layer := TBGRABitmap.Create(image.Width,image.Height);
208+ layer.GradientFill(0,0,layer.Width,layer.Height,
209+ BGRA(255,255,0),BGRA(255,0,0),
210+ gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
211+ dmSet);
212+ mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
213+ mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
214+ layer.ApplyMask(mask);
215+ mask.Free;
216+ image.PutImage(0,0,layer,dmDrawWithTransparency);
217+ layer.Free;
218+ end;
219+
220+ procedure ApplyLight;
221+ var layer: TBGRABitmap;
222+ begin
223+ layer := TBGRABitmap.Create(image.Width,image.Height);
224+ layer.GradientFill(0,0,layer.Width,layer.Height,
225+ BGRA(255,255,255),BGRA(64,64,64),
226+ gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
227+ dmSet);
228+ image.BlendImage(0,0,layer,boMultiply);
229+ layer.Free;
230+ end;
231+
232+begin
233+ image := TBGRABitmap.Create(ClientWidth,ClientHeight);
234+
235+ if image.Height < image.Width then
236+ size := image.Height
237+ else
238+ size := image.Width;
239+
240+ image.GradientFill(0,0,image.Width,image.Height,
241+ BGRA(128,192,255),BGRA(0,0,255),
242+ gtLinear,PointF(0,0),PointF(0,image.Height),
243+ dmSet);
244+
245+ DrawMoon;
246+ DrawSun;
247+ ApplyLight;
248+
249+ image.Draw(Canvas,0,0,True);
250+ image.free;
251+end;
261252```
262253
263254### Ejecuta el programa
264255
265-Deberías ver un cielo azúl con una luna y un sol, con un efecto de iluminación. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
256+Deberías ver un cielo azúl con una luna y un sol, con un efecto de iluminación. Cuando cambia el tamaño de la forma, la imagen cambia de tamaño en consecuencia.
266257
267-[![Tutorial5c.png](/wiki-images/f/f3/Tutorial5c.png)](</File:Tutorial5c.png>)
258+![](/wiki-images/f/f3/Tutorial5c.png)
268259
269-[[BGRABitmap tutorial 4/es|Tutoría anterior (acceso directo a píxeles)]] | [[BGRABitmap tutorial 6/es|Siguiente tutoría (estilo de línea)]]
260+[[BGRABitmap tutorial 4/es|Tutoría anterior (acceso directo a píxeles)]] \| [[BGRABitmap tutorial 6/es|Siguiente tutoría (estilo de línea)]]
270261
271262---
272-*From the Free Pascal wiki, page "BGRABitmap tutorial 5/es", as the Internet Archive kept it on 2022-07-03. 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).*
263+*From the Free Pascal wiki, page "BGRABitmap tutorial 5/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).*
264+Category: Castellano
265+Category: Español

Back to history