Difference between revisions of "BGRABitmap tutorial 12/es"
(update) |
m (Fixed syntax highlighting; deleted category already in page template) |
||
(5 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | {{BGRABitmap_tutorial_12}} | + | {{BGRABitmap_tutorial_12}}[[category:Castellano|C]][[category:Español|C]] |
{{BGRABitmap_tutorial_index/es}} | {{BGRABitmap_tutorial_index/es}} | ||
− | + | Esta tutoría muestra como usar funciones de texto. | |
=== Crear un nuevo proyecto === | === Crear un nuevo proyecto === | ||
− | Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en | + | Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en[[BGRABitmap tutorial/es|la primer tutoríal]]. |
=== Texto simple === | === Texto simple === | ||
Puedes dibujar un texto simple como este : | Puedes dibujar un texto simple como este : | ||
− | < | + | <syntaxhighlight lang="pascal">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; </ | + | 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 : | ||
− | < | + | <syntaxhighlight lang="pascal"> image.TextOut(ClientWidth-5,5,'Hello world',c,taRightJustify); |
− | image.SetPixel(ClientWidth-5,5,c); </ | + | 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 : | ||
− | < | + | <syntaxhighlight lang="pascal"> image.TextOutAngle(30,5,-450,'Hello world',c, taLeftJustify); |
− | image.SetPixel(30,5,c); </ | + | 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 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); </ | + | 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 lang="pascal">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; </ | + | 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 : | ||
− | < | + | <syntaxhighlight lang="pascal">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; </ | + | 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. | ||
− | [[ | + | [[Image:BGRATutorial12f.png]] |
− | [[ | + | [[BGRABitmap tutorial 11/es|Tutoría anterior (combinando transformaciones)]] |
Latest revision as of 10: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.
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.
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.
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
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.
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.