Difference between revisions of "BGRABitmap tutorial 12/es"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
Line 12: Line 12:
  
 
Puedes dibujar un texto simple como este :
 
Puedes dibujar un texto simple como este :
<delphi>procedure TForm1.FormPaint(Sender: TObject);
+
<syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject);
 
var
 
var
 
   image: TBGRABitmap;
 
   image: TBGRABitmap;
Line 28: Line 28:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end;  </delphi>
+
end;  </syntaxhighlight>
  
 
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.
 
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.
Line 39: Line 39:
  
 
Simplemente reemplaza las lineas TextOut y SetPixel con :
 
Simplemente reemplaza las lineas TextOut y SetPixel con :
<delphi>  image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);   
+
<syntaxhighlight>  image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);   
   image.SetPixel(ClientWidth-5,5,c);  </delphi>
+
   image.SetPixel(ClientWidth-5,5,c);  </syntaxhighlight>
  
 
Ahora el origen está en el lado derecho de la forma, y el texto está alineado a la derecha.
 
Ahora el origen está en el lado derecho de la forma, y el texto está alineado a la derecha.
Line 49: Line 49:
  
 
Es también simple dibujar texto rotado. Para hacer esto usa TextOutAngle o determina la propiedad FontOrientation :
 
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);
+
<syntaxhighlight>  image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
   image.SetPixel(30,5,c);  </delphi>
+
   image.SetPixel(30,5,c);  </syntaxhighlight>
 
El ángulo se expresa en décimas de grados y el valor positivo significa que va en sentido antihorario.
 
El ángulo se expresa en décimas de grados y el valor positivo significa que va en sentido antihorario.
  
Line 60: Line 60:
  
 
Esta es una forma fácil para usar TextRect :
 
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);
+
<syntaxhighlight>  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>
+
   image.Rectangle(rect(5,5,ClientWidth-5,ClientHeight-5),c,dmSet);  </syntaxhighlight>
 
Los parámetros son :
 
Los parámetros son :
  
Line 76: Line 76:
 
Puedes hacer un texto sombreado con un efecto de desenfoque :
 
Puedes hacer un texto sombreado con un efecto de desenfoque :
  
<delphi>var
+
<syntaxhighlight>var
 
   image,txt: TBGRABitmap;
 
   image,txt: TBGRABitmap;
 
   grad: TBGRAGradientScanner;
 
   grad: TBGRAGradientScanner;
Line 90: Line 90:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end;  </delphi>
+
end;  </syntaxhighlight>
  
 
El procedimiento TextShadow crea un bitmap que contiene el texto con una sombra. Los parámetros son :
 
El procedimiento TextShadow crea un bitmap que contiene el texto con una sombra. Los parámetros son :
Line 110: Line 110:
 
Como otras funciones de dibujo, puedes proveer de un gradiente o textura para rellenar el texto con el. Aquí hay un ejemplo :
 
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;
+
<syntaxhighlight>uses BGRAGradientScanner;
  
 
var
 
var
Line 128: Line 128:
 
   image.Draw(Canvas,0,0,True);
 
   image.Draw(Canvas,0,0,True);
 
   image.free;
 
   image.free;
end; </delphi>
+
end; </syntaxhighlight>
  
 
Primero se crea un gradiente horizontal, con color amarillo y rojo. Este se usa como textura.
 
Primero se crea un gradiente horizontal, con color amarillo y rojo. Este se usa como textura.

Revision as of 13:52, 24 March 2012

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

Esta tutoría 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 enla primer tutoríal.

Texto simple

Puedes dibujar un texto simple como este :

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;

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 :

  image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);   
  image.SetPixel(ClientWidth-5,5,c);

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 :

  image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
  image.SetPixel(30,5,c);

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 :

  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);

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 :

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;

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 :

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;

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

BGRATutorial12f.png

Tutoría anterior (combinando transformaciones)