Developing with Graphics/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 página dará inicio a una serie de tutorías que trataran sobre la manipulación de mapa de bits y otros tipos de gráficos. Como no soy un experto programador de gráficos, ¡invito a todos a compartir sus experiencias! Basta con añadir un enlace a la siguiente sección, añadir una página y crear su propio artículo para el Wiki.
2	2
3	3		En esta página se dará alguna información general.
4	4
5	5		## Otros artículos sobre gráficos
6	6
7	7		### Dibujo 2D
8	8
9	9		- [[ZenGL]] - Desarrollo de juegos multi-plataforma usando OpenGL.
10	10		- [[BGRABitmap]] - Dibuja formas y mapas de bits con transparencia, acceso directo a los píxeles, etc.
11	11		- [[LazRGBGraphics]] - Un paquete para un veloz procesado en memoria de imagenes y manipulado de puntos (pixel) (similar a scan line)
12	12		- [[Double Gradient]] - Dibuja gradientes dobles y 'n gradientes' en bitmaps facilmente.
13	13		- [[Gradient Filler]] - TGradientFiller es la mejor manera de crear 'n gradientes' personalizados en Lazarus.
14	14		- [[PascalMagick]] - Una forma fácil de usar la API para interactuar con [ImageMagick](http://www.imagemagick.org), un paquete software libre multiplataforma para crear, editar y componer imágenes de mapa de bit.
15	15		- [[Sample Graphics/es]] - Galería de gráficos creada con Lazarus y herramientas de dibujo.
16	16
17	17		### Dibujo 3D
18	18
19	19		- [[GLScene]] - Una adaptación de la librería visual de gráficos OpenGL [GLScene](http://www.glscene.org)
20	20
21	21		### Gráficos
22	22
23	23		- [[TAChart/es\|TAChart]] - Componente gráfico para Lazarus
24	24		- [[PlotPanel/es\|PlotPanel]] - Un componente para trazar y realizar gráficos animados
25	25		- [[Perlin Noise]] - Un atículo sobre la utilización de Perlin Noise en aplicaciones LCL.
26	26
27	27		## Trabajo con TBitmap
28	28
29	29		Lo primero que hay que recordar es que Lazarus quiere decir plataforma independiente, así que todos los métodos que usan funcionalidades de la API de Windows se salen de la cuestión. Así que un método como ScanLine no es soportado por Lazarus, porque está destinado a Device Independent Bitmap y usa funciones de GDI32.dll.
30	30
31	31		Tenga cuidado porque si no especifica la anchura y altura de su [[doc:lcl/graphics/tbitmap.html\|TBitmap]] tendrá la predefinida, que es muy pequeña.
32	32
33	33		### Un ejemplo de desvanecimiento (fading)
34	34
35	35		Supongamos que quiere hacer una imagen que se desvanece. En Delphi podría hacer algo así:
36	36
37	37		``` pascal
38	38		type
39	39		PRGBTripleArray = ^TRGBTripleArray;
40	40		TRGBTripleArray = array[0..32767] of TRGBTriple;
41	41
42	42		procedure TForm1.FadeIn(aBitMap: TBitMap);
43	43		var
44	44		Bitmap, BaseBitmap: TBitmap;
45	45		Row, BaseRow: PRGBTripleArray;
46	46		x, y, step: integer;
47	47		begin
48	48		Bitmap := TBitmap.Create;
49	49		try
50	50		Bitmap.PixelFormat := pf32bit; // o bien pf24bit
51	51		Bitmap.Assign(aBitMap);
52	52		BaseBitmap := TBitmap.Create;
53	53		try
54	54		BaseBitmap.PixelFormat := pf32bit;
55	55		BaseBitmap.Assign(Bitmap);
56	56		for step := 0 to 32 do begin
57	57		for y := 0 to (Bitmap.Height - 1) do begin
58	58		BaseRow := BaseBitmap.Scanline[y];
59	59		Row := Bitmap.Scanline[y];
60	60		for x := 0 to (Bitmap.Width - 1) do begin
61	61		Row[x].rgbtRed := (step * BaseRow[x].rgbtRed) shr 5; // desvanec. rojo
62	62		Row[x].rgbtGreen := (step * BaseRow[x].rgbtGreen) shr 5; // desvanec. verde
63	63		Row[x].rgbtBlue := (step * BaseRow[x].rgbtBlue) shr 5; // desvanec. azul
64	64		// disminuyendo progresivamente los valores RGB (Red,Green,Blue o Rojo,
65	65		// Verde, Azul que son tres componentes que forman el color a mostrar
66	66		// logramos que la imagen se vaya apagando hasta quedarse a oscuras.
67	67		end;
68	68		end;
69	69		Form1.Canvas.Draw(0, 0, Bitmap);
70	70		InvalidateRect(Form1.Handle, nil, False);
71	71		RedrawWindow(Form1.Handle, nil, 0, RDW_UPDATENOW);
72	72		end;
73	73		finally
74	74		BaseBitmap.Free;
75	75		end;
76	76		finally
77	77		Bitmap.Free;
78	78		end;
79	79		end;
80	80		```
81	81
82	82		Está función en Lazarus sería así:
83	83
84	84		``` pascal
85	85		{ This code has been taken from the $LazarusPath/examples/lazintfimage/fadein1.lpi project. }
86	86		uses LCLType, // HBitmap type
87	87		IntfGraphics, // TLazIntfImage type
88	88		fpImage; // TFPColor type
89	89
90	90		procedure TForm1.FadeIn(ABitMap: TBitMap);
91	91		var
92	92		SrcIntfImg, TempIntfImg: TLazIntfImage;
93	93		ImgHandle,ImgMaskHandle: HBitmap;
94	94		FadeStep: Integer;
95	95		px, py: Integer;
96	96		CurColor: TFPColor;
97	97		TempBitmap: TBitmap;
98	98		begin
99	99		SrcIntfImg:=TLazIntfImage.Create(0,0);
100	100		SrcIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);
101	101		TempIntfImg:=TLazIntfImage.Create(0,0);
102	102		TempIntfImg.LoadFromBitmap(ABitmap.Handle,ABitmap.MaskHandle);
103	103		TempBitmap:=TBitmap.Create;
104	104		for FadeStep:=1 to 32 do begin
105	105		for py:=0 to SrcIntfImg.Height-1 do begin
106	106		for px:=0 to SrcIntfImg.Width-1 do begin
107	107		CurColor:=SrcIntfImg.Colors[px,py];
108	108		CurColor.Red:=(CurColor.Red*FadeStep) shr 5;
109	109		CurColor.Green:=(CurColor.Green*FadeStep) shr 5;
110	110		CurColor.Blue:=(CurColor.Blue*FadeStep) shr 5;
111	111		TempIntfImg.Colors[px,py]:=CurColor;
112	112		end;
113	113		end;
114	114		TempIntfImg.CreateBitmaps(ImgHandle,ImgMaskHandle,false);
115	115		TempBitmap.Handle:=ImgHandle;
116	116		TempBitmap.MaskHandle:=ImgMaskHandle;
117	117		Canvas.Draw(0,0,TempBitmap);
118	118		end;
119	119		SrcIntfImg.Free;
120	120		TempIntfImg.Free;
121	121		TempBitmap.Free;
122	122		end;
123	123		```
124	124
125	125		El código Lazarus de esta página se ha tomado del proyecto \$LazarusPath/examples/lazintfimage/fadein1.lpi . Así que si desea iniciarse en la programación de gráficos eche una mirada a este ejemplo.
126	126
127	127		### Dibujando mapa de bits de color transparente
128	128
129	129		Una nueva característica, incluida en Lazarus 0.9.11, son los mapa de bits de color transparente. Los archivos Bitmap (*.BMP) no pueden almacenar cualquier información sobre transparencia, pero pueden trabajar como si la tuviera si selecciona un color en ellos para representar la zona transparente. Este es un truco habitual usado en aplicaciones Win32.
130	130
131	131		El siguiente ejemplo carga un mapa de bit desde un recurso Windows, selecciona un color para que sea transparente (clFuchsia) y después lo dibuja.
132	132
133	133		``` pascal
134	134		procedure MyForm.MyButtonOnClick(Sender: TObject);
135	135		var
136	136		buffer: THandle;
137	137		bmp: TBitmap;
138	138		memstream: TMemoryStream;
139	139		begin
140	140		bmp := TBitmap.Create;
141	141
142	142		buffer := Windows.LoadBitmap(hInstance, MAKEINTRESOURCE(ResourceID));
143	143
144	144		if (buffer = 0) then exit; // Error cargando el mapa de bits
145	145
146	146		bmp.Handle := buffer;
147	147		memstream := TMemoryStream.create;
148	148		try
149	149		bmp.SaveToStream(memstream);
150	150		memstream.position := 0;
151	151		bmp.LoadFromStream(memstream);
152	152		finally
153	153		memstream.free;
154	154		end;
155	155
156	156		bmp.Transparent := True;
157	157		bmp.TransparentColor := clFuchsia;
158	158
159	159		MyCanvas.Draw(0, 0, bmp);
160	160
161	161		bmp.Free; // Liberar el recurso Tbitmap (bmp) creado con anterioridad
162	162		end;
163	163		```
164	164
165	165		Observe las operaciones de memoria realizadas con [[doc:rtl/classes/tmemorystream.html\|TMemoryStream]]. Son necesarios para garantizar la correcta carga de la imagen.
166	166
167	167		### Tomar una captura de la pantalla
168	168
169	169		Desde Lazarus 0.9.16 podemos utilizar la LCL para realizar capturas de la pantalla de forma multiplataforma. El código de ejemplo siguiente lo hace (funciona en gtk2 y Win32, pero no en gtk1 actualmente):
170	170
171	171		``` pascal
172	172		uses LCLIntf, LCLType;
173	173
174	174		...
175	175
176	176		var
177	177		MyBitmap: TBitmap;
178	178		ScreenDC: HDC;
179	179		begin
180	180		MyBitmap := TBitmap.Create;
181	181		ScreenDC := GetDC(0);
182	182		MyBitmap.LoadFromDevice(ScreenDC);
183	183		ReleaseDC(ScreenDC);
184	184
185	185		...
186	186		```
187	187
188	188		### Pintar un TLazIntfImage en el lienzo (Canvas)
189	189
190	190		Puesto que la propiedad ScanLines ha sido temporalmente removida de la clase TBitmap, la única forma de acceder a datos de línea de exploración de un mapa de bits, es utilizar TLazIntfImage. Esta es una muestra de cómo crear un TLazIntfImage desde un TBitmap y, a continuación, dibujarlo en el lienzo (canvas).
191	191
192	192		``` pascal
193	193		uses
194	194		...GraphType, IntfGraphics, LCLType, LCLProc, LCLIntf ...
195	195
196	196		procedure TForm1.Button4Click(Sender: TObject);
197	197		var
198	198		b: TBitmap;
199	199		t: TLazIntfImage;
200	200		bmp, old: HBitmap;
201	201		msk: HBitmap;
202	202		tmpDC: HDC;
203	203		begin
204	204		b := TBitmap.Create;
205	205		try
206	206		b.LoadFromFile('test.bmp');
207	207		t := b.CreateIntfImage;
208	208		t.CreateBitmaps(bmp, msk, false);
209	209
210	210		tmpDC := CreateCompatibleDC(Canvas.Handle);
211	211		old := SelectObject(tmpDC, bmp);
212	212		BitBlt(Canvas.Handle, 0, 0, t.Width, t.Height, tmpDC, 0, 0, SRCCOPY);
213	213		DeleteObject(SelectObject(tmpDC, old));
214	214		DeleteObject(msk);
215	215		DeleteDC(tmpDC);
216	216
217	217		finally
218	218		t.Free;
219	219		b.Free;
220	220		end;
221	221		end;
222	222		```
223	223
224	224		## Gráficos en movimiento - Cómo evitar el parpadeo
225	225
226	226		Muchos programas dibujan su salida al GUI como gráficos 2D. Si esos gráficos necesitan cambiar rápidamente, pronto tendrá un problema: los gráficos que cambian rápidamente a menudo parpadean en la pantalla. Esto ocurre cuando los usuarios algunas veces ven las imágenes ocultas y algunas veces las ven cuando se dibujan sólo parcialmente. Esto ocurre porque el proceso de pintar requiere tiempo.
227	227
228	228		Pero ¿cómo puedo evitar el parpadeo y conseguir la mejor velocidad de trazado? Claro, podría trabajar con aceleración de hardware utilizando OpenGL, pero es verdaderamente pesado para pequeños programas u ordenadores antiguos. Este tutorial esta enfocado hacia el dibujo con TCanvas. Si necesita ayuda con OpenGL, eche una mirada al ejemplo que viene con Lazarus. Puede también usar el paquete para juegos de A. J. Venter, que proporciona un canvas (lienzo) de doble memoria intermedia y un componente sprite (objeto móvil).
229	229
230	230		Ahora examinaremos las opciones que tenemos para dibujar en un Canvas (lienzo):
231	231
232	232		- Dibujar en un TImage
233	233		- Dibujar en el envento OnPaint del formulario, un TPaintBox u otro control
234	234		- Crear un control personalizado que se dibuja a sí mismo
235	235		- Utilizando el paquete para juegos de A.J. Venter
236	236
237	237		### Dibujar en un TImage
238	238
239	239		Un TImage consta de 2 partes: Un TGraphic, por lo general un TBitmap, conteniendo la imagen persistente y el área visual, que es pintada en cada evento OnPaint. Cambiar el tamaño del TImage no cambiar el tamaño del mapa de bits. El gráfico (o mapa de bits) es accesible a través de Image1.Picture.Graphic (o Image1.Picture.Bitmap). El lienzo es Image1.Picture.Bitmap.Canvas. El lienzo de la zona visual de un TImage sólo es accesible durante Image1.OnPaint través de Image1.Canvas.
240	240
241	241		Importante: Nunca use el evento OnPaint para dibujar en un TImage. Un TImage es almacenado en la memoria intermedia por lo que todo lo que necesita hacer es dibujarlo desde cualquier lugar y se cambia para siempre. Sin embargo, si constantemente redibuja, la imagen parpadeará. En este caso puede intentar otras opciones. Dibujar en un TImage se considera más lento que otras posibilidades.
242	242
243	243		#### Redimensionando el mapa de bits de un TImage
244	244
245	245		Nota: No uses esto duante un OnPaint.
246	246
247	247		``` pascal
248	248		with Image1.Picture.Bitmap do begin
249	249		Width:=100;
250	250		Height:=120;
251	251		end;
252	252		```
253	253
254	254		#### Pintando el mapa de bits de un TImage
255	255
256	256		Nota: No uses esto duante un OnPaint.
257	257
258	258		``` pascal
259	259		with Image1.Picture.Bitmap.Canvas do begin
260	260		// fill the entire bitmap with red
261	261		Brush.Color:=clRed;
262	262		FillRect(0,0,Width,Height);
263	263		end;
264	264		```
265	265
266	266		Nota: dentro de un Image1.OnPaint el lienzo (el Image1.Canvas) apunta al área visible volátil. Fuera del evento Image1.OnPaint el lienzo apunta a Image1.Picture.Bitmap.Canvas.
267	267
268	268		Otro ejemplo:
269	269
270	270		``` pascal
271	271		procedure TForm1.BitBtn1Click(Sender: TObject);
272	272		var
273	273		x, y: Integer;
274	274		begin
275	275		// Pinta el fondo
276	276		MyImage.Canvas.Pen.Color := clWhite;
277	277		MyImage.Canvas.Rectangle(0, 0, Image.Width, Image.Height);
278	278
279	279		// Dibuja cuadrados
280	280		MyImage.Canvas.Pen.Color := clBlack;
281	281		for x := 1 to 8 do
282	282		for y := 1 to 8 do
283	283		MyImage.Canvas.Rectangle(Round((x - 1) * Image.Width / 8), Round((y - 1) * Image.Height / 8),
284	284		Round(x * Image.Width / 8), Round(y * Image.Height / 8));
285	285		end;
286	286		```
287	287
288	288		#### Pintando el área visual volátil de un TImage
289	289
290	290		Sólo se puede pintar en esta área durante OnPaint.OnPaint se llama automáticamente por el LCL, cuando la zona es invalidada. Se puede invalidar la zona manualmente con Image1.Invalidate. Esto no llamará inmediatamente a OnPaint y es posible invocar Invalidate tantas veces como se desee.
291	291
292	292		``` pascal
293	293		procedure TForm.Image1Paint(Sender: TObject);
294	294		begin
295	295		with Image1.Canvas do begin
296	296		// paint a line
297	297		Pen.Color:=clRed;
298	298		Line(0,0,Width,Height);
299	299		end;
300	300		end;
301	301		```
302	302
303	303		### Dibujar en el evento OnPaint
304	304
305	305		En este caso todo tiene que dibujarlo en el evento OnPaint del formulario. No se mantiene en la memoria intermedia, como en el TImage.
306	306
307	307		### Crear un control personalizado que se dibuja a sí mismo
308	308
309	309		Crear un control personalizado tiene la ventaja de estructurar su código y poder reutilizar el control. Está opción es muy rápida, pero puede todavía generar parpadeo si no dibuja en un TBitmap primero y después dibuja en el canvas (lienzo). En este caso no necesita utilizar el evento OnPaint del control.
310	310
311	311		Este es un ejemplo de control personalizado:
312	312
313	313		``` pascal
314	314		uses Classes, SysUtils, Controls, Graphics, LCLType;
315	315
316	316		type
317	317		TMyDrawingControl = class(TCustomControl)
318	318		public
319	319		procedure EraseBackground(DC: HDC); override;
320	320		procedure Paint; override;
321	321		end;
322	322
323	323		implementation
324	324
325	325		procedure TMyDrawingControl.EraseBackground(DC: HDC);
326	326		begin
327	327		// Quita los comentarios para habilitar el borrado del fondo predeterminado
328	328		//inherited EraseBackground(DC);
329	329		end;
330	330
331	331		procedure TMyDrawingControl.Paint;
332	332		var
333	333		x, y: Integer;
334	334		Bitmap: TBitmap;
335	335		begin
336	336		Bitmap := TBitmap.Create;
337	337		try
338	338		// Initializes the Bitmap Size
339	339		Bitmap.Height := Height;
340	340		Bitmap.Width := Width;
341	341
342	342		// Draws the background
343	343		Bitmap.Canvas.Pen.Color := clWhite;
344	344		Bitmap.Canvas.Rectangle(0, 0, Width, Height);
345	345
346	346		// Draws squares
347	347		Bitmap.Canvas.Pen.Color := clBlack;
348	348		for x := 1 to 8 do
349	349		for y := 1 to 8 do
350	350		Bitmap.Canvas.Rectangle(Round((x - 1) * Width / 8), Round((y - 1) * Height / 8),
351	351		Round(x * Width / 8), Round(y * Height / 8));
352	352
353	353		Canvas.Draw(0, 0, Bitmap);
354	354		finally
355	355		Bitmap.Free;
356	356		end;
357	357
358	358		inherited Paint;
359	359		end;
360	360		```
361	361
362	362		y cómo lo creamos en el formulario:
363	363
364	364		``` pascal
365	365		procedure TMyForm.FormCreate(Sender: TObject);
366	366		begin
367	367		MyDrawingControl:= TMyDrawingControl.Create(Self);
368	368		MyDrawingControl.Height := 400;
369	369		MyDrawingControl.Width := 500;
370	370		MyDrawingControl.Top := 0;
371	371		MyDrawingControl.Left := 0;
372	372		MyDrawingControl.Parent := Self;
373	373		MyDrawingControl.DoubleBuffered := True;
374	374		end;
375	375		```
376	376
377	377		y para destruirlo:
378	378
379	379		``` pascal
380	380		procedure TMyForm.FormDestroy(Sender: TObject);
381	381		begin
382	382		MyDrawingControl.Free;
383	383		end;
384	384		```
385	385
386	386		Aunque se destruye de forma automática, porque usamos self como propietario.
387	387
388	388		No es necesario asignar cero a Top y Left, ya que ésta es la posición predefinida, pero se hace así para reforzar la posición donde se colocará el control.
389	389
390	390		"MyDrawingControl.Parent := Self;" es muy importante y no se verá el control si no se hace así.
391	391
392	392		"MyDrawingControl.DoubleBuffered := True;" se requiere para evitar el parpadeo en Windows. No tiene ningún efecto en gtk.
393	393
394	394		### Utilizando el paquete para juegos de A.J. Venter
395	395
396	396		El paquete para juegos está enfocado al dibujo de cualquier cosa en un canvas (lienzo) de doble memoria intermedia, que sólo se actualiza cuando usted está preparado. Esto supone verdaderamente bastante código, pero tiene la ventaja de ser capaz de hacer muy rápidamente cambios de escenas con múltiples sprites (objetos móviles) en ellos. Si desea utilizar esta opción, puede interesarle el paquete para juegos de A. J. Venter, un conjunto de componentes para desarrollar juegos en Lazarus, que proporciona un componente de pantalla de doble memoria intermedia así como un componente sprite (ojeto móvil), diseñado para integrarse bien con cualquier otro. Puede obtener el paquete para juegos via subversion:\
397	397		`svn co `[`svn://silentcoder.co.za/lazarus/gamepack`](svn://silentcoder.co.za/lazarus/gamepack) Más información, documentación y descargas en la [página principal](http://outkastsolutions.co.za/outkast/index.php?option=com_openwiki&Itemid=&id=gamepack).
398	398
399	399		## Formatos Gráficos y Clases de Imágenes
400	400
401	401		Esta tabla muestra la clase adecuada a utilizar para cada formato de imagen.
402	402
403	403		\| Formato \| Clase de Imagen \| Unidad \|
404	404		\|--------------------------------\|-------------------------\|----------\|
405	405		\| Cursor (cur) \| TCursor \| Graphics \|
406	406		\| Bitmap (bmp) \| TBitmap \| Graphics \|
407	407		\| Windows icon (ico) \| TIcon \| Graphics \|
408	408		\| Mac OS X icon (icns) \| TicnsIcon \| Graphics \|
409	409		\| Pixmap (xpm) \| TPixmap \| Graphics \|
410	410		\| Portable Network Graphic (png) \| TPortableNetworkGraphic \| Graphics \|
411	411		\| JPEG (jpg, jpeg) \| TJpegImage \| Graphics \|
412	412		\| PNM (pnm) \| TPortableAnyMapGraphic \| Graphics \|
413	413
414		-	\
415		-
416	414		## El formato del punto (pixel)
417	415
418	416		### TColor
419	417
420	418		La representación interna de un punto de un TColor en la LCL tiene esta forma XXBBGGRR, que coincide con el formato nativo de Windows y es el inverso del que usan la mayoría de las otras librerías, que utilizan AARRGGBB. La parte XX se utiliza para identificar si el color es un color fijo, cuyo caso XX será 00 o si es un índice a un sistema de colores. No hay espacio reservado para un canal alfa.
421	419
422	420		Para convertir desde un canal separado RGB a TColor podemos usar esto:
423	421
424	422		``` pascal
425	423		RGBToColor(RedVal, GreenVal, BlueVal);
426	424		```
427	425
428	426		Para obtener cada canal de una variable TColor usaremos las fucniones Red, Green y Blue:
429	427
430	428		``` pascal
431	429		RedVal := Red(MyColor);
432	430		GreenVal := Green(MyColor);
433	431		BlueVal := Blue(MyColor);
434	432		```
435	433
436	434		### TFPColor
437	435
438	436		TFPColor utiliza el formato AARRGGBB común en muchas librerías.
439	437
440	438		## Trabajando con el lienzo mediante TCanvas
441	439
442	440		### Usando la fuente predeterminada de la interfaz IGU
443	441
444	442		Esta tarea se puede realizar con este simple código:
445	443
446	444		``` pascal
447	445		SelectObject(Canvas.Handle, GetStockObject(DEFAULT_GUI_FONT));
448	446		```
449	447
450	448		### Dibujando un texto limitado a cierto ancho
451	449
452	450		Usaremos DrawText, primero con DT_CALCRECT y después sin ello.
453	451
454	452		``` pascal
455	453		// Primero calculamos el tamaño del texto para después pintarlo
456	454		TextBox := Rect(0, currentPos.Y, Width, High(Integer));
457	455		DrawText(ACanvas.Handle, PChar(Text), Length(Text),
458	456		TextBox, DT_WORDBREAK or DT_INTERNAL or DT_CALCRECT);
459	457
460	458		DrawText(ACanvas.Handle, PChar(Text), Length(Text),
461	459		TextBox, DT_WORDBREAK or DT_INTERNAL);
462	460		```
463	461
464	462		### Dibujar texto con bordes afilados (no suavizados)
465	463
466	464		Some widgetsets support this via
467	465
468	466		``` pascal
469	467		Canvas.Font.Quality:=fqNonAntialiased
470	468		```
471	469
472	470		Algunos motores gráficos como el gtk2 no soportan esto y pintan siempre suavizando. Aquí tenemos un procedimiento simple para dibujar texto con bordes afilados en GTK2. No tiene en cuenta todos los casos, pero nos da una idea:
473	471
474	472		``` pascal
475	473		procedure PaintAliased(Canvas: TCanvas; x,y: integer; const TheText: string);
476	474		var
477	475		w,h: integer;
478	476		IntfImg: TLazIntfImage;
479	477		Img: TBitmap;
480	478		dy: Integer;
481	479		dx: Integer;
482	480		col: TFPColor;
483	481		FontColor: TColor;
484	482		c: TColor;
485	483		begin
486	484		w:=0;
487	485		h:=0;
488	486		Canvas.GetTextSize(TheText,w,h);
489	487		if (w<=0) or (h<=0) then exit;
490	488		Img:=TBitmap.Create;
491	489		IntfImg:=nil;
492	490		try
493	491		// paint text to a bitmap
494	492		Img.Masked:=true;
495	493		Img.SetSize(w,h);
496	494		Img.Canvas.Brush.Style:=bsSolid;
497	495		Img.Canvas.Brush.Color:=clWhite;
498	496		Img.Canvas.FillRect(0,0,w,h);
499	497		Img.Canvas.Font:=Canvas.Font;
500	498		Img.Canvas.TextOut(0,0,TheText);
501	499		// get memory image
502	500		IntfImg:=Img.CreateIntfImage;
503	501		// replace gray pixels
504	502		FontColor:=ColorToRGB(Canvas.Font.Color);
505	503		for dy:=0 to h-1 do begin
506	504		for dx:=0 to w-1 do begin
507	505		col:=IntfImg.Colors[dx,dy];
508	506		c:=FPColorToTColor(col);
509	507		if c<>FontColor then
510	508		IntfImg.Colors[dx,dy]:=colTransparent;
511	509		end;
512	510		end;
513	511		// create bitmap
514	512		Img.LoadFromIntfImage(IntfImg);
515	513		// paint
516	514		Canvas.Draw(x,y,Img);
517	515		finally
518	516		IntfImg.Free;
519	517		Img.Free;
520	518		end;
521	519		end;
522	520		```
523	521
524	522		## Pintando sin la LCL
525	523
526	524		Podemos dibujar sin usar la LCL. Por ejemplo, un programa que se ejecuta en un servidor web generando gráficos trabajará sin necesidad de ninguna librería visual. Para ello puede utilizar FPImage (alias fcl-image) una muy genérica librería de imagen y dibujo completamente escrita en Pascal. De hecho, la LCL utiliza FPImage mucho y realiza la función de dibujo a través de llamadas al motor gráfico IGU (winapi, gtk, carbon, ...).
527	525
528	526		Este es un ejemplo, sobre como crear una imagen de 200x100, con un fondo blanco y algún texto y guardarla como un .png:
529	527
530	528		``` pascal
531	529
532	530		program fontdraw;
533	531
534	532		{$mode objfpc}{$H+}
535	533
536	534		uses
537	535		Classes, SysUtils, FPimage, FPImgCanv, ftfont, FPWritePNG, FPCanvas;
538	536
539	537		procedure TestFPImgFont;
540	538		var
541	539		Img: TFPMemoryImage;
542	540		Writer: TFPWriterPNG;
543	541		ms: TMemoryStream;
544	542		ImgCanvas: TFPImageCanvas;
545	543		fs: TFileStream;
546	544		AFont: TFreeTypeFont;
547	545		begin
548	546		Img:=nil;
549	547		ImgCanvas:=nil;
550	548		Writer:=nil;
551	549		ms:=nil;
552	550		fs:=nil;
553	551		AFont:=nil;
554	552		try
555	553		// initialize free type font manager
556	554		ftfont.InitEngine;
557	555		FontMgr.SearchPath:='/usr/share/fonts/truetype/ttf-dejavu/';
558	556		AFont:=TFreeTypeFont.Create;
559	557
560	558		// create an image of width 200, height 100
561	559		Img:=TFPMemoryImage.Create(200,100);
562	560		Img.UsePalette:=false;
563	561		// create the canvas with the drawing operations
564	562		ImgCanvas:=TFPImageCanvas.create(Img);
565	563
566	564		// paint white background
567	565		ImgCanvas.Brush.FPColor:=colWhite;
568	566		ImgCanvas.Brush.Style:=bsSolid;
569	567		ImgCanvas.Rectangle(0,0,Img.Width,Img.Height);
570	568
571	569		// paint text
572	570		ImgCanvas.Font:=AFont;
573	571		ImgCanvas.Font.Name:='DejaVuSans';
574	572		ImgCanvas.Font.Size:=20;
575	573		ImgCanvas.TextOut(10,30,'Test');
576	574
577	575		// write image as png to memory stream
578	576		Writer:=TFPWriterPNG.create;
579	577		ms:=TMemoryStream.Create;
580	578		writer.ImageWrite(ms,Img);
581	579		// write memory stream to file
582	580		ms.Position:=0;
583	581		fs:=TFileStream.Create('testfont.png',fmCreate);
584	582		fs.CopyFrom(ms,ms.Size);
585	583		finally
586	584		AFont.Free;
587	585		ms.Free;
588	586		Writer.Free;
589	587		ImgCanvas.Free;
590	588		Img.Free;
591	589		fs.Free;
592	590		end;
593	591		end;
594	592
595	593		begin
596	594		TestFPImgFont;
597	595		end.
598	596		```
599	597
600	598		- [[Basic Pascal Tutorial]] - [Tao Yue's](http://www.taoyue.com/) [Pascal Tutorial](http://www.taoyue.com/tutorials/pascal/)
601	599		- [[Free Pascal videos\|Free Pascal video tutorials]]
602	600
603	601		---
604	602		From the Free Pascal wiki, page "Developing with Graphics/es", as it stood on 2020-03-29 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).

Back to history