Sign in Join
Wiki copytemporary

BGRABitmap tutorial 11/es: what changed

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

Title: BGRABitmap tutorial 11/es

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

Back to history