BGRABitmap tutorial 11/es: what changed

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

Old	New		Line
1	1		Esta tutoría muestra como combinar transformaciones.
2	2
3	3		### Crear un nuevo proyecto
4	4
5	5		Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en el [[BGRABitmap tutorial/es\|primer tutorial]].
6	6
7	7		### Transformación afín de un degradado radial
8	8
9	9		Aquí se aplica una transformación afín en un gradiente como lo hicimos con las texturas:
10	10
11	11		``` pascal
12	12		uses BGRAGradientScanner, BGRATransform;
13	13
14	14		procedure TForm1.FormPaint(Sender: TObject);
15	15		var image: TBGRABitmap;
16	16		grad: TBGRAGradientScanner;
17	17		affine: TBGRAAffineScannerTransform;
18	18		begin
19	19		image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
20	20
21	21		grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
22	22
23	23		affine := TBGRAAffineScannerTransform.Create(grad);
24	24		affine.Scale(150,80);
25	25		affine.RotateDeg(-30);
26	26		affine.Translate(ClientWidth/2, ClientHeight/2);
27	27
28	28		image.Fill(affine);
29	29
30	30		affine.free;
31	31		grad.free;
32	32
33	33		image.Draw(Canvas,0,0,True);
34	34		image.free;
35	35		end;
36	36		```
37	37
38	38		El gradiente de base es radial, con centro en el origen (0,0), de radio 1.
39	39
40	40		Las transformaciones afines hacen lo siguiente:
41	41
42	42		- Tramo de la pendiente a un tamaño de 150x80
43	43		- Rotar 30 grados en dirección a la izquierda
44	44		- Centrar en la forma
45	45
46	46		La instrucción Fill dibuja el resultado en la imagen.
47	47
48	48		### Ejecuta el programa
49	49
50	50		Usted debe obtener un gradiente de elipse azul y blanco.
51	51
52		-	~~<figure>~~
53		-	~~<img src="BGRATutorial11a.png" title="BGRATutorial11a.png" />~~
54		-	~~<figcaption>BGRATutorial11a.png</figcaption>~~
55		-	~~</figure>~~
	52	+	![](/wiki-images/a/a9/BGRATutorial11a.png)
56	53
57	54		### Combinar con un giro
58	55
59	56		Podemos agregar otra transformación de esta manera:
60	57
61	58		``` pascal
62	59		var image: TBGRABitmap;
63	60		grad: TBGRAGradientScanner;
64	61		affine: TBGRAAffineScannerTransform;
65	62		twirl: TBGRATwirlScanner;
66	63		begin
67	64		image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
68	65
69	66		grad := TBGRAGradientScanner.Create(BGRA(0,0,255),BGRAWhite,gtRadial,PointF(0,0),PointF(1,0),True,True);
70	67
71	68		affine := TBGRAAffineScannerTransform.Create(grad);
72	69		affine.Scale(150,80);
73	70		affine.RotateDeg(-30);
74	71		affine.Translate(ClientWidth/2, ClientHeight/2);
75	72
76	73		twirl := TBGRATwirlScanner.Create(affine,Point(ClientWidth div 2, ClientHeight div 2),100);
77	74		image.Fill(twirl);
78	75		twirl.Free;
79	76
80	77		affine.free;
81	78		grad.free;
82	79
83	80		image.Draw(Canvas,0,0,True);
84	81		image.free;
85	82		end;
86	83		```
87	84
88	85		En este sentido, basta con crear una transformación de giro aplicado a la anterior, y rellenar con ella.
89	86
90	87		### Ejecuta el programa
91	88
92	89		Ahora el centro del gradiente está girado.
93	90
94		-	~~<figure>~~
95		-	~~<img src="BGRATutorial11b.png" title="BGRATutorial11b.png" />~~
96		-	~~<figcaption>BGRATutorial11b.png</figcaption>~~
97		-	~~</figure>~~
	91	+	![](/wiki-images/b/b0/BGRATutorial11b.png)
98	92
99	93		### Usar un escáner personalizado
100	94
101	95		Es posible que desee crear un generador de gradientes. Aquí está por ejemplo, un gradiente multiplicador:
102	96
103	97		``` pascal
104	98		type
105	99		{ TBGRAMultiplyScanner }
106	100
107	101		TBGRAMultiplyScanner = class(TBGRACustomScanner)
108	102		function ScanAt(X, Y: Single): TBGRAPixel; override;
109	103		end;
110	104
111	105		{ TBGRAMultiplyScanner }
112	106
113	107		function TBGRAMultiplyScanner.ScanAt(X, Y: Single): TBGRAPixel;
114	108		function cycle512(value: integer): integer; inline;
115	109		begin
116	110		result := value and 511;
117	111		if result >= 256 then result := 511-result;
118	112		end;
119	113
120	114		var
121	115		mul: integer;
122	116		begin
123	117		mul := cycle512(round(x*y));
124	118		result := BGRA(mul,mul,mul,255);
125	119		end;
126	120		```
127	121
128	122		Se deriva de TBGRACustomScanner para ser utilizados para el rellenado y la función ScanAt se anula. Calcula el producto de las dos coordenadas y hace un ciclo de 512 con él (de 0 a 255 y luego a partir de 255 a 0).
129	123
130	124		Vamos a dibujar en la pantalla con una sencilla transformación afín:
131	125
132	126		``` pascal
133	127		var image: TBGRABitmap;
134	128		grad: TBGRAMultiplyScanner;
135	129		affine: TBGRAAffineScannerTransform;
136	130		begin
137	131		image := TBGRABitmap.Create(ClientWidth,ClientHeight, BGRABlack );
138	132
139	133		grad := TBGRAMultiplyScanner.Create;
140	134		affine := TBGRAAffineScannerTransform.Create(grad);
141	135		affine.Scale(6,4);
142	136		affine.Translate(ClientWidth/2, ClientHeight/2);
143	137		image.Fill(affine);
144	138		affine.free;
145	139		grad.free;
146	140
147	141		image.Draw(Canvas,0,0,True);
148	142		image.free;
149	143		end;
150	144		```
151	145
152	146		### Ejecuta el programa
153	147
154	148		Debería verse como esto :
155	149
156		-	~~<figure>~~
157		-	~~<img src="BGRATutorial11c.png" title="BGRATutorial11c.png" />~~
158		-	~~<figcaption>BGRATutorial11c.png</figcaption>~~
159		-	~~</figure>~~
	150	+	![](/wiki-images/e/e0/BGRATutorial11c.png)
160	151
161	152		### Que se vea hermoso
162	153
163	154		Añade algunos colores modificando el procedimiento ScanAt del gradiente multiplicador :
164	155
165	156		``` pascal
166	157		var
167	158		mul: integer;
168	159		begin
169	160		mul := round(x*y);
170	161		result := BGRA(cycle512(round(x10)),cycle512(mul),cycle512(round(y10)),255);
171	162		end;
172	163		```
173	164
174	165		Las intensidades de rojo y azul están llenos de un ciclo de las posiciones x e y.
175	166
176	167		Y añade un poco de rotación:
177	168
178	169		``` pascal
179	170		affine := TBGRAAffineScannerTransform.Create(grad);
180	171		affine.Scale(6,4);
181	172		affine.RotateDeg(-30);
182	173		affine.Translate(ClientWidth/2, ClientHeight/2);
183	174		```
184	175
185		-	~~<figure>~~
186		-	~~<img src="BGRATutorial11d.png" title="BGRATutorial11d.png" />~~
187		-	~~<figcaption>BGRATutorial11d.png</figcaption>~~
188		-	~~</figure>~~
	176	+	![](/wiki-images/e/e8/BGRATutorial11d.png)
189	177
190	178		[[BGRABitmap tutorial 10/es\|Tutoría anterior (mapeo de texturas)]] \\| [[BGRABitmap tutorial 12/es\|Siguiente tutoría (funciones de texto)]]
191	179
192	180		---
193	181		From the Free Pascal wiki, page "BGRABitmap tutorial 11/es", as it stood on 2020-02-09 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).
194	182		Category: Castellano
195	183		Category: Español

Back to history