Difference between revisions of "BGRABitmap tutorial 12/es"

From Lazarus wiki
Jump to navigationJump to search
(New page: {{BGRABitmap_tutorial_12}} {{BGRABitmap_tutorial_index/es}} Este tutorial muestra como usar funciones de texto. === Crear un nuevo proyecto === Crea un nuevo proyecto y añade referenc...)
 
(update)
Line 54: Line 54:
  
 
[[Image:BGRATutorial12c.png]]
 
[[Image:BGRATutorial12c.png]]
 +
 +
Fíjate donde está el origen del texto (en el píxel agregado).
  
 
=== Texto ajustado ===
 
=== Texto ajustado ===
Line 102: Line 104:
  
 
[[Image:BGRATutorial12e.png]]
 
[[Image:BGRATutorial12e.png]]
 +
 +
=== Texto con gradiente ===
 +
 +
 +
Como otras funciones de dibujo, puedes proveer de un gradiente o textura para rellenar el texto con el. Aquí hay un ejemplo :
 +
 +
<delphi>uses BGRAGradientScanner;
 +
 +
var
 +
  image: TBGRABitmap;
 +
  grad: TBGRAGradientScanner;
 +
begin
 +
  image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
 +
 +
  grad := TBGRAGradientScanner.Create(BGRA(255,255,0),BGRA(255,0,0),gtLinear,PointF(0,0),PointF(0,35),True,True);
 +
  image.FontHeight := 30;
 +
  image.FontAntialias := true;
 +
  image.FontStyle := [fsBold];
 +
  image.TextOut(6,6,'Hello world',BGRABlack);  //dibuja un borde negro
 +
  image.TextOut(5,5,'Hello world',grad);      //dibuja texto degradado
 +
  grad.free;
 +
 +
  image.Draw(Canvas,0,0,True);
 +
  image.free;
 +
end; </delphi>
 +
 +
Primero se crea un gradiente horizontal, con color amarillo y rojo. Este se usa como textura.
  
 
[[BGRABitmap tutorial 11/es|Tutorial anterior (combinando transformaciones)]]
 
[[BGRABitmap tutorial 11/es|Tutorial anterior (combinando transformaciones)]]
  
 
[[Category:Graphics]]
 
[[Category:Graphics]]

Revision as of 23:30, 16 April 2011

Deutsch (de) English (en) español (es) français (fr)


Home | Tutorial 1 | Tutorial 2 | Tutorial 3 | Tutorial 4 | Tutorial 5 | Tutorial 6 | Tutorial 7 | Tutorial 8 | Tutorial 9 | Tutorial 10 | Tutorial 11 | Tutorial 12 | Edit

Este tutorial muestra como usar funciones de texto.

Crear un nuevo proyecto

Crea un nuevo proyecto y añade referencia a BGRABitmap, de la misma forma que en el primer tutorial.

Texto simple

Puedes dibujar un texto simple como este : <delphi>procedure TForm1.FormPaint(Sender: TObject); var

 image: TBGRABitmap;
 c: TBGRAPixel;

begin

 image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
 c := ColorToBGRA(ColorToRGB(clBtnText)); //devuelve el color de texto predeterminado
 image.FontHeight := 30;
 image.FontAntialias := true;
 image.FontStyle := [fsBold];
 image.TextOut(ClientWidth-5,5,'Hello world',c,);
 image.SetPixel(5,5,c);
 image.Draw(Canvas,0,0,True);
 image.free;

end; </delphi>

Aquí el tamaño de la fuente está establecido a 30 píxeles, con antiafilado. Usar antiafilado de fuentes es mas lento pero es mas hermoso.

La esquina superior izquierda del texto está en (5,5). Este origen es mostrado con SetPixel.

BGRATutorial12a.png

Usar alineamiento

Simplemente reemplaza las lineas TextOut y SetPixel con : <delphi> image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);

 image.SetPixel(ClientWidth-5,5,c);  </delphi>

Ahora el origen está en el lado derecho de la forma, y el texto está alineado a la derecha.

BGRATutorial12b.png

Texto rotado

Es también simple dibujar texto rotado. Para hacer esto usa TextOutAngle o determina la propiedad FontOrientation : <delphi> image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);

 image.SetPixel(30,5,c);  </delphi>

El ángulo se expresa en décimas de grados y el valor positivo significa que va en sentido antihorario.

BGRATutorial12c.png

Fíjate donde está el origen del texto (en el píxel agregado).

Texto ajustado

Esta es una forma fácil para usar TextRect : <delphi> image.TextRect(rect(5,5,ClientWidth-5,ClientHeight-5),'This is a text that should be word wrapped',taCenter,tlCenter,c);

 image.Rectangle(rect(5,5,ClientWidth-5,ClientHeight-5),c,dmSet);  </delphi>

Los parámetros son :

  • el rectángulo delimitador
  • el texto
  • alineación horizontal
  • alineación vertical
  • color

BGRATutorial12d.png

Texto con sombra

Puedes hacer un texto sombreado con un efecto de desenfoque :

<delphi>var

 image,txt: TBGRABitmap;
 grad: TBGRAGradientScanner;
 c: TBGRAPixel;

begin

 image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
 c := ColorToBGRA(ColorToRGB(clBtnText));
 txt := TextShadow(ClientWidth,ClientHeight,'Hello world',30,c,BGRABlack,5,5,5);
 image.PutImage(0,0,txt,dmDrawWithTransparency);
 txt.Free;
 image.Draw(Canvas,0,0,True);
 image.free;

end; </delphi>

El procedimiento TextShadow crea un bitmap que contiene el texto con una sombra. Los parámetros son :

  • El tamaño del bitmap
  • El texto
  • Alto de la Fuente
  • Color de la Fuente
  • Color de la sombra
  • Desplazamiento de la sombra y tamaño del desenfoque

No olvides liberar el bitmap luego de utilizarlo.

BGRATutorial12e.png

Texto con gradiente

Como otras funciones de dibujo, puedes proveer de un gradiente o textura para rellenar el texto con el. Aquí hay un ejemplo :

<delphi>uses BGRAGradientScanner;

var

 image: TBGRABitmap;
 grad: TBGRAGradientScanner;

begin

 image := TBGRABitmap.Create(ClientWidth,ClientHeight, ColorToBGRA(ColorToRGB(clBtnFace)) );
 grad := TBGRAGradientScanner.Create(BGRA(255,255,0),BGRA(255,0,0),gtLinear,PointF(0,0),PointF(0,35),True,True);
 image.FontHeight := 30;
 image.FontAntialias := true;
 image.FontStyle := [fsBold];
 image.TextOut(6,6,'Hello world',BGRABlack);  //dibuja un borde negro
 image.TextOut(5,5,'Hello world',grad);       //dibuja texto degradado
 grad.free;
 image.Draw(Canvas,0,0,True);
 image.free;

end; </delphi>

Primero se crea un gradiente horizontal, con color amarillo y rojo. Este se usa como textura.

Tutorial anterior (combinando transformaciones)