Sign in Join
Wiki copytemporary

BGRABitmap tutorial 5/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 usar capas.
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### Acerca de las máscaras
88
99Una 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.
1010
11-<figure>
12-<img src="BGRATutorial5d.png" title="BGRATutorial5d.png" />
13-<figcaption>BGRATutorial5d.png</figcaption>
14-</figure>
11+![](/wiki-images/0/05/BGRATutorial5d.png)
1512
1613En 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 :
1714
1815``` pascal
1916var temp,tex,mask: TBGRABitmap;
2017begin
2118 temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
2219
2320 //cargando y escalando la textura
2421 tex := TBGRABitmap.Create('texture.png');
2522 BGRAReplace(tex,tex.Resample(128,80));
2623
2724 //muestra una imágen en la esquina superior izquierda
2825 temp.PutImage(10,10,tex,dmDrawWithTransparency);
2926
3027 //crea una máscara con un elipse y un rectángulo
3128 mask := TBGRABitmap.Create(128,80,BGRABlack);
3229 mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
3330 mask.FillRectAntialias(60,40,100,70,BGRAWhite);
3431
3532 //muestra la máscara en la parte superior derecha
3633 temp.PutImage(150,10,mask,dmDrawWithTransparency);
3734
3835 //aplica la máscara a la imágen
3936 tex.ApplyMask(mask);
4037
4138 //muestra la imágen resultante en la esquina inferior izquierda
4239 temp.PutImage(10,100,tex,dmDrawWithTransparency);
4340
4441 mask.Free;
4542 tex.Free;
4643
4744 //muestra todo en la pantalla
4845 image.Draw(Canvas,0,0,True);
4946 image.Free;
5047end;
5148```
5249
5350### Borrando las partes de una imágen
5451
5552Algunas 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.
5653
57-<figure>
58-<img src="BGRATutorial5e.png" title="BGRATutorial5e.png" />
59-<figcaption>BGRATutorial5e.png</figcaption>
60-</figure>
54+![](/wiki-images/6/62/BGRATutorial5e.png)
6155
6256Aquí 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 :
6357
6458``` pascal
6559var image,tex: TBGRABitmap;
6660begin
6761 image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
6862
6963 //muestra y escala la textura
7064 tex := TBGRABitmap.Create('texture.png');
7165 BGRAReplace(tex,tex.Resample(128,80));
7266
7367 //muestra la imágen
7468 image.PutImage(10,10,tex,dmDrawWithTransparency);
7569
7670 //borra las partes
7771 tex.EraseEllipseAntialias(40,40,30,30,255);
7872 tex.EraseEllipseAntialias(80,40,30,30,128);
7973
8074 //muestra el resultado
8175 image.PutImage(10,100,tex,dmDrawWithTransparency);
8276
8377 tex.Free;
8478
8579 //muestra todo en la pantalla
8680 image.Draw(Canvas,0,0,True);
8781 image.Free;
8882end;
8983```
9084
9185### Agrega un manejador de pintado
9286
9387Con el inspector de objetos, agrega un manejador OnPaint y escribe :
9488
9589``` pascal
9690procedure TForm1.FormPaint(Sender: TObject);
9791var image: TBGRABitmap;
9892 size: single;
9993
10094 procedure DrawMoon;
10195 var layer: TBGRABitmap;
10296 begin
10397 layer := TBGRABitmap.Create(image.Width,image.Height);
10498 layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
10599 layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
106100 image.PutImage(0,0,layer,dmDrawWithTransparency);
107101 layer.Free;
108102 end;
109103
110104begin
111105 image := TBGRABitmap.Create(ClientWidth,ClientHeight);
112106
113107 //Computa el espacio disponible en ambas direcciones
114108 if image.Height < image.Width then
115109 size := image.Height
116110 else
117111 size := image.Width;
118112
119113 image.GradientFill(0,0,image.Width,image.Height,
120114 BGRA(128,192,255),BGRA(0,0,255),
121115 gtLinear,PointF(0,0),PointF(0,image.Height),
122116 dmSet);
123117
124118 DrawMoon;
125119
126120 image.Draw(Canvas,0,0,True);
127121 image.free;
128122end;
129123```
130124
131125El procedimiento crea una imágen y la rellena con un degradado azúl. Esta es la capa de fondo.
132126
133127El 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.
134128
135129### Ejecuta el programa
136130
137131Deberí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.
138132
139-<figure>
140-<img src="Tutorial5a.png" title="Tutorial5a.png" />
141-<figcaption>Tutorial5a.png</figcaption>
142-</figure>
133+![](/wiki-images/1/15/Tutorial5a.png)
143134
144135### Añade otra capa con un sol
145136
146137En el evento OnPaint, añade el siguiente subprocedimiento :
147138
148139``` pascal
149140 procedure DrawSun;
150141 var layer,mask: TBGRABitmap;
151142 begin
152143 layer := TBGRABitmap.Create(image.Width,image.Height);
153144 layer.GradientFill(0,0,layer.Width,layer.Height,
154145 BGRA(255,255,0),BGRA(255,0,0),
155146 gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
156147 dmSet);
157148 mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
158149 mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
159150 layer.ApplyMask(mask);
160151 mask.Free;
161152 image.PutImage(0,0,layer,dmDrawWithTransparency);
162153 layer.Free;
163154 end;
164155```
165156
166157Este 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.
167158
168159Agregue una llamada a este procedimiento para dibujarlo después de la luna.
169160
170161### Ejecuta el programa
171162
172163Deberí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.
173164
174-<figure>
175-<img src="BGRATutorial5b.png" title="BGRATutorial5b.png" />
176-<figcaption>BGRATutorial5b.png</figcaption>
177-</figure>
165+![](/wiki-images/9/9b/BGRATutorial5b.png)
178166
179167### Añade una capa de luz
180168
181169Añade el siguiente subprocedimiento en el evento OnPaint :
182170
183171``` pascal
184172 procedure ApplyLight;
185173 var layer: TBGRABitmap;
186174 begin
187175 layer := TBGRABitmap.Create(image.Width,image.Height);
188176 layer.GradientFill(0,0,layer.Width,layer.Height,
189177 BGRA(255,255,255),BGRA(64,64,64),
190178 gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
191179 dmSet);
192180 image.BlendImage(0,0,layer,boMultiply);
193181 layer.Free;
194182 end;
195183```
196184
197185Este procedimiento dibuja una capa con un degradado radial blanco. Luego es aplicado para multiplicar la imágen.
198186
199187### Código resultante
200188
201189``` pascal
202190procedure TForm1.FormPaint(Sender: TObject);
203191var image: TBGRABitmap;
204192 size: single;
205193
206194 procedure DrawMoon;
207195 var layer: TBGRABitmap;
208196 begin
209197 layer := TBGRABitmap.Create(image.Width,image.Height);
210198 layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size*0.4,size*0.4,BGRA(224,224,224,128));
211199 layer.EraseEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.3,size*0.3,255);
212200 image.PutImage(0,0,layer,dmDrawWithTransparency);
213201 layer.Free;
214202 end;
215203
216204 procedure DrawSun;
217205 var layer,mask: TBGRABitmap;
218206 begin
219207 layer := TBGRABitmap.Create(image.Width,image.Height);
220208 layer.GradientFill(0,0,layer.Width,layer.Height,
221209 BGRA(255,255,0),BGRA(255,0,0),
222210 gtRadial,PointF(layer.Width/2,layer.Height/2-size*0.15),PointF(layer.Width/2+size*0.45,layer.Height/2-size*0.15),
223211 dmSet);
224212 mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
225213 mask.FillEllipseAntialias(layer.Width/2+size*0.15,layer.Height/2,size*0.25,size*0.25,BGRAWhite);
226214 layer.ApplyMask(mask);
227215 mask.Free;
228216 image.PutImage(0,0,layer,dmDrawWithTransparency);
229217 layer.Free;
230218 end;
231219
232220 procedure ApplyLight;
233221 var layer: TBGRABitmap;
234222 begin
235223 layer := TBGRABitmap.Create(image.Width,image.Height);
236224 layer.GradientFill(0,0,layer.Width,layer.Height,
237225 BGRA(255,255,255),BGRA(64,64,64),
238226 gtRadial,PointF(layer.Width*5/6,layer.Height/2),PointF(layer.Width*1/3,layer.Height/4),
239227 dmSet);
240228 image.BlendImage(0,0,layer,boMultiply);
241229 layer.Free;
242230 end;
243231
244232begin
245233 image := TBGRABitmap.Create(ClientWidth,ClientHeight);
246234
247235 if image.Height < image.Width then
248236 size := image.Height
249237 else
250238 size := image.Width;
251239
252240 image.GradientFill(0,0,image.Width,image.Height,
253241 BGRA(128,192,255),BGRA(0,0,255),
254242 gtLinear,PointF(0,0),PointF(0,image.Height),
255243 dmSet);
256244
257245 DrawMoon;
258246 DrawSun;
259247 ApplyLight;
260248
261249 image.Draw(Canvas,0,0,True);
262250 image.free;
263251end;
264252```
265253
266254### Ejecuta el programa
267255
268256Deberí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.
269257
270-<figure>
271-<img src="Tutorial5c.png" title="Tutorial5c.png" />
272-<figcaption>Tutorial5c.png</figcaption>
273-</figure>
258+![](/wiki-images/f/f3/Tutorial5c.png)
274259
275260[[BGRABitmap tutorial 4/es|Tutoría anterior (acceso directo a píxeles)]] \| [[BGRABitmap tutorial 6/es|Siguiente tutoría (estilo de línea)]]
276261
277262---
278263*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).*
279264Category: Castellano
280265Category: Español

Back to history