BGRABitmap tutorial 5/es: what changed

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

Title: BGRABitmap tutorial 5/es

New		Line
1	+	Esta tutoría muestra como usar capas.
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	+	### Acerca de las máscaras
8	+
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.
10	+
11	+	<figure>
12	+	<img src="BGRATutorial5d.png" title="BGRATutorial5d.png" />
13	+	<figcaption>BGRATutorial5d.png</figcaption>
14	+	</figure>
15	+
16	+	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 :
17	+
18	+	``` pascal
19	+	var temp,tex,mask: TBGRABitmap;
20	+	begin
21	+	temp:= TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
22	+
23	+	//cargando y escalando la textura
24	+	tex := TBGRABitmap.Create('texture.png');
25	+	BGRAReplace(tex,tex.Resample(128,80));
26	+
27	+	//muestra una imágen en la esquina superior izquierda
28	+	temp.PutImage(10,10,tex,dmDrawWithTransparency);
29	+
30	+	//crea una máscara con un elipse y un rectángulo
31	+	mask := TBGRABitmap.Create(128,80,BGRABlack);
32	+	mask.FillEllipseAntialias(40,40,30,30,BGRAWhite);
33	+	mask.FillRectAntialias(60,40,100,70,BGRAWhite);
34	+
35	+	//muestra la máscara en la parte superior derecha
36	+	temp.PutImage(150,10,mask,dmDrawWithTransparency);
37	+
38	+	//aplica la máscara a la imágen
39	+	tex.ApplyMask(mask);
40	+
41	+	//muestra la imágen resultante en la esquina inferior izquierda
42	+	temp.PutImage(10,100,tex,dmDrawWithTransparency);
43	+
44	+	mask.Free;
45	+	tex.Free;
46	+
47	+	//muestra todo en la pantalla
48	+	image.Draw(Canvas,0,0,True);
49	+	image.Free;
50	+	end;
51	+	```
52	+
53	+	### Borrando las partes de una imágen
54	+
55	+	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.
56	+
57	+	<figure>
58	+	<img src="BGRATutorial5e.png" title="BGRATutorial5e.png" />
59	+	<figcaption>BGRATutorial5e.png</figcaption>
60	+	</figure>
61	+
62	+	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 :
63	+
64	+	``` pascal
65	+	var image,tex: TBGRABitmap;
66	+	begin
67	+	image := TBGRABitmap.Create(640,480,ColorToBGRA(ColorToRGB(clBtnFace)));
68	+
69	+	//muestra y escala la textura
70	+	tex := TBGRABitmap.Create('texture.png');
71	+	BGRAReplace(tex,tex.Resample(128,80));
72	+
73	+	//muestra la imágen
74	+	image.PutImage(10,10,tex,dmDrawWithTransparency);
75	+
76	+	//borra las partes
77	+	tex.EraseEllipseAntialias(40,40,30,30,255);
78	+	tex.EraseEllipseAntialias(80,40,30,30,128);
79	+
80	+	//muestra el resultado
81	+	image.PutImage(10,100,tex,dmDrawWithTransparency);
82	+
83	+	tex.Free;
84	+
85	+	//muestra todo en la pantalla
86	+	image.Draw(Canvas,0,0,True);
87	+	image.Free;
88	+	end;
89	+	```
90	+
91	+	### Agrega un manejador de pintado
92	+
93	+	Con el inspector de objetos, agrega un manejador OnPaint y escribe :
94	+
95	+	``` pascal
96	+	procedure TForm1.FormPaint(Sender: TObject);
97	+	var image: TBGRABitmap;
98	+	size: single;
99	+
100	+	procedure DrawMoon;
101	+	var layer: TBGRABitmap;
102	+	begin
103	+	layer := TBGRABitmap.Create(image.Width,image.Height);
104	+	layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size0.4,size0.4,BGRA(224,224,224,128));
105	+	layer.EraseEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.3,size*0.3,255);
106	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
107	+	layer.Free;
108	+	end;
109	+
110	+	begin
111	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
112	+
113	+	//Computa el espacio disponible en ambas direcciones
114	+	if image.Height < image.Width then
115	+	size := image.Height
116	+	else
117	+	size := image.Width;
118	+
119	+	image.GradientFill(0,0,image.Width,image.Height,
120	+	BGRA(128,192,255),BGRA(0,0,255),
121	+	gtLinear,PointF(0,0),PointF(0,image.Height),
122	+	dmSet);
123	+
124	+	DrawMoon;
125	+
126	+	image.Draw(Canvas,0,0,True);
127	+	image.free;
128	+	end;
129	+	```
130	+
131	+	El procedimiento crea una imágen y la rellena con un degradado azúl. Esta es la capa de fondo.
132	+
133	+	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.
134	+
135	+	### Ejecuta el programa
136	+
137	+	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.
138	+
139	+	<figure>
140	+	<img src="Tutorial5a.png" title="Tutorial5a.png" />
141	+	<figcaption>Tutorial5a.png</figcaption>
142	+	</figure>
143	+
144	+	### Añade otra capa con un sol
145	+
146	+	En el evento OnPaint, añade el siguiente subprocedimiento :
147	+
148	+	``` pascal
149	+	procedure DrawSun;
150	+	var layer,mask: TBGRABitmap;
151	+	begin
152	+	layer := TBGRABitmap.Create(image.Width,image.Height);
153	+	layer.GradientFill(0,0,layer.Width,layer.Height,
154	+	BGRA(255,255,0),BGRA(255,0,0),
155	+	gtRadial,PointF(layer.Width/2,layer.Height/2-size0.15),PointF(layer.Width/2+size0.45,layer.Height/2-size*0.15),
156	+	dmSet);
157	+	mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
158	+	mask.FillEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.25,size*0.25,BGRAWhite);
159	+	layer.ApplyMask(mask);
160	+	mask.Free;
161	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
162	+	layer.Free;
163	+	end;
164	+	```
165	+
166	+	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.
167	+
168	+	Agregue una llamada a este procedimiento para dibujarlo después de la luna.
169	+
170	+	### Ejecuta el programa
171	+
172	+	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.
173	+
174	+	<figure>
175	+	<img src="BGRATutorial5b.png" title="BGRATutorial5b.png" />
176	+	<figcaption>BGRATutorial5b.png</figcaption>
177	+	</figure>
178	+
179	+	### Añade una capa de luz
180	+
181	+	Añade el siguiente subprocedimiento en el evento OnPaint :
182	+
183	+	``` pascal
184	+	procedure ApplyLight;
185	+	var layer: TBGRABitmap;
186	+	begin
187	+	layer := TBGRABitmap.Create(image.Width,image.Height);
188	+	layer.GradientFill(0,0,layer.Width,layer.Height,
189	+	BGRA(255,255,255),BGRA(64,64,64),
190	+	gtRadial,PointF(layer.Width5/6,layer.Height/2),PointF(layer.Width1/3,layer.Height/4),
191	+	dmSet);
192	+	image.BlendImage(0,0,layer,boMultiply);
193	+	layer.Free;
194	+	end;
195	+	```
196	+
197	+	Este procedimiento dibuja una capa con un degradado radial blanco. Luego es aplicado para multiplicar la imágen.
198	+
199	+	### Código resultante
200	+
201	+	``` pascal
202	+	procedure TForm1.FormPaint(Sender: TObject);
203	+	var image: TBGRABitmap;
204	+	size: single;
205	+
206	+	procedure DrawMoon;
207	+	var layer: TBGRABitmap;
208	+	begin
209	+	layer := TBGRABitmap.Create(image.Width,image.Height);
210	+	layer.FillEllipseAntialias(layer.Width/2,layer.Height/2,size0.4,size0.4,BGRA(224,224,224,128));
211	+	layer.EraseEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.3,size*0.3,255);
212	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
213	+	layer.Free;
214	+	end;
215	+
216	+	procedure DrawSun;
217	+	var layer,mask: TBGRABitmap;
218	+	begin
219	+	layer := TBGRABitmap.Create(image.Width,image.Height);
220	+	layer.GradientFill(0,0,layer.Width,layer.Height,
221	+	BGRA(255,255,0),BGRA(255,0,0),
222	+	gtRadial,PointF(layer.Width/2,layer.Height/2-size0.15),PointF(layer.Width/2+size0.45,layer.Height/2-size*0.15),
223	+	dmSet);
224	+	mask := TBGRABitmap.Create(layer.Width,layer.Height,BGRABlack);
225	+	mask.FillEllipseAntialias(layer.Width/2+size0.15,layer.Height/2,size0.25,size*0.25,BGRAWhite);
226	+	layer.ApplyMask(mask);
227	+	mask.Free;
228	+	image.PutImage(0,0,layer,dmDrawWithTransparency);
229	+	layer.Free;
230	+	end;
231	+
232	+	procedure ApplyLight;
233	+	var layer: TBGRABitmap;
234	+	begin
235	+	layer := TBGRABitmap.Create(image.Width,image.Height);
236	+	layer.GradientFill(0,0,layer.Width,layer.Height,
237	+	BGRA(255,255,255),BGRA(64,64,64),
238	+	gtRadial,PointF(layer.Width5/6,layer.Height/2),PointF(layer.Width1/3,layer.Height/4),
239	+	dmSet);
240	+	image.BlendImage(0,0,layer,boMultiply);
241	+	layer.Free;
242	+	end;
243	+
244	+	begin
245	+	image := TBGRABitmap.Create(ClientWidth,ClientHeight);
246	+
247	+	if image.Height < image.Width then
248	+	size := image.Height
249	+	else
250	+	size := image.Width;
251	+
252	+	image.GradientFill(0,0,image.Width,image.Height,
253	+	BGRA(128,192,255),BGRA(0,0,255),
254	+	gtLinear,PointF(0,0),PointF(0,image.Height),
255	+	dmSet);
256	+
257	+	DrawMoon;
258	+	DrawSun;
259	+	ApplyLight;
260	+
261	+	image.Draw(Canvas,0,0,True);
262	+	image.free;
263	+	end;
264	+	```
265	+
266	+	### Ejecuta el programa
267	+
268	+	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.
269	+
270	+	<figure>
271	+	<img src="Tutorial5c.png" title="Tutorial5c.png" />
272	+	<figcaption>Tutorial5c.png</figcaption>
273	+	</figure>
274	+
275	+	[[BGRABitmap tutorial 4/es\|Tutoría anterior (acceso directo a píxeles)]] \\| [[BGRABitmap tutorial 6/es\|Siguiente tutoría (estilo de línea)]]
276	+
277	+	---
278	+	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).
279	+	Category: Castellano
280	+	Category: Español

Back to history