Difference between revisions of "BGRABitmap tutorial 12/es"

From Lazarus wiki
Jump to navigationJump to search
m (Text replace - "delphi>" to "syntaxhighlight>")
m (Fixed syntax highlighting; deleted category already in page template)
 
Line 12: Line 12:
  
 
Puedes dibujar un texto simple como este :
 
Puedes dibujar un texto simple como este :
<syntaxhighlight>procedure TForm1.FormPaint(Sender: TObject);
+
<syntaxhighlight lang="pascal">procedure TForm1.FormPaint(Sender: TObject);
 
var
 
var
 
   image: TBGRABitmap;
 
   image: TBGRABitmap;
Line 39: Line 39:
  
 
Simplemente reemplaza las lineas TextOut y SetPixel con :
 
Simplemente reemplaza las lineas TextOut y SetPixel con :
<syntaxhighlight>  image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);   
+
<syntaxhighlight lang="pascal">  image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify);   
 
   image.SetPixel(ClientWidth-5,5,c);  </syntaxhighlight>
 
   image.SetPixel(ClientWidth-5,5,c);  </syntaxhighlight>
  
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 :
<syntaxhighlight>  image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
+
<syntaxhighlight lang="pascal">  image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify);
 
   image.SetPixel(30,5,c);  </syntaxhighlight>
 
   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 :
<syntaxhighlight>  image.TextRect(rect(5,5,ClientWidth-5,ClientHeight-5),'This is a text that should be word wrapped',taCenter,tlCenter,c);
+
<syntaxhighlight lang="pascal">  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);  </syntaxhighlight>
 
   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 :
  
<syntaxhighlight>var
+
<syntaxhighlight lang="pascal">var
 
   image,txt: TBGRABitmap;
 
   image,txt: TBGRABitmap;
 
   grad: TBGRAGradientScanner;
 
   grad: TBGRAGradientScanner;
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 :
  
<syntaxhighlight>uses BGRAGradientScanner;
+
<syntaxhighlight lang="pascal">uses BGRAGradientScanner;
  
 
var
 
var
Line 135: Line 135:
  
 
[[BGRABitmap tutorial 11/es|Tutoría anterior (combinando transformaciones)]]
 
[[BGRABitmap tutorial 11/es|Tutoría anterior (combinando transformaciones)]]
 
[[Category:Graphics/es]]
 

Latest revision as of 09:27, 9 February 2020

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)