Difference between revisions of "BGRABitmap tutorial 7/es"

From Free Pascal wiki
Jump to navigationJump to search
(New page: {{BGRABitmap_tutorial_7}} {{BGRABitmap_tutorial_index/es}} Este tutorial muestra como usar splines. === Crear un nuevo proyecto === Crea un nuevo proyecto y añade referencia a [[BGRAB...)
 
m (Fixed syntax highlighting; deleted category already in page template)
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{BGRABitmap_tutorial_7}}
+
{{BGRABitmap_tutorial_7}}[[category:Castellano|C]][[category:Español|C]]
  
 
{{BGRABitmap_tutorial_index/es}}
 
{{BGRABitmap_tutorial_index/es}}
  
Este tutorial muestra como usar splines.
+
Esta tutoría muestra como usar splines.
  
 
=== Crear un nuevo proyecto ===
 
=== Crear un nuevo proyecto ===
  
Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en el [[BGRABitmap tutorial/es|primer tutorial]].
+
Crea un nuevo proyecto y añade referencia a [[BGRABitmap]], de la misma forma que en [[BGRABitmap tutorial/es|la primer tutoría]].
  
 
=== Dibuja una spline abierta ===
 
=== Dibuja una spline abierta ===
  
 
Con el inspector de objetos, añade un manejador OnPaint y escribe :
 
Con el inspector de objetos, añade un manejador OnPaint y escribe :
<delphi>procedure TForm1.FormPaint(Sender: TObject);
+
<syntaxhighlight lang="pascal">procedure TForm1.FormPaint(Sender: TObject);
 
var
 
var
 
   image: TBGRABitmap;
 
   image: TBGRABitmap;
Line 37: Line 37:
 
     image.Draw(Canvas,0,0,True);
 
     image.Draw(Canvas,0,0,True);
 
     image.free;   
 
     image.free;   
end;</delphi>
+
end;</syntaxhighlight>
  
 
Hay dos líneas que dibuja spline. La primer línea computa los puntos spline, y la segunda los dibuja. Ten en cuenta que es una función específica para splines abiertas.
 
Hay dos líneas que dibuja spline. La primer línea computa los puntos spline, y la segunda los dibuja. Ten en cuenta que es una función específica para splines abiertas.
Line 44: Line 44:
  
 
Antes de image.Draw, agrega estas líneas :
 
Antes de image.Draw, agrega estas líneas :
<delphi>    for i := 0 to 3 do
+
<syntaxhighlight lang="pascal">    for i := 0 to 3 do
 
       pts[i].x += 200;
 
       pts[i].x += 200;
 
     image.DrawPolylineAntialias(pts,BGRA(255,0,0,150),1);
 
     image.DrawPolylineAntialias(pts,BGRA(255,0,0,150),1);
  
 
     storedSpline := image.ComputeClosedSpline(pts);
 
     storedSpline := image.ComputeClosedSpline(pts);
     image.DrawPolygonAntialias(storedSpline,c,1);</delphi>
+
     image.DrawPolygonAntialias(storedSpline,c,1);</syntaxhighlight>
  
 
Ve con el cursor en el identificador 'i' y presiona Ctrl-Shift-C para agregar la declaración de la variable. El loop desplaza los puntos hacia la derecha.
 
Ve con el cursor en el identificador 'i' y presiona Ctrl-Shift-C para agregar la declaración de la variable. El loop desplaza los puntos hacia la derecha.
Line 56: Line 56:
  
 
Puedes evitar usar una variable para guardar los puntos de la spline como esta :
 
Puedes evitar usar una variable para guardar los puntos de la spline como esta :
<delphi>image.DrawPolygonAntialias(image.ComputeClosedSpline(pts),c,1);</delphi>
+
<syntaxhighlight lang="pascal">image.DrawPolygonAntialias(image.ComputeClosedSpline(pts),c,1);</syntaxhighlight>
 
De todas formas, si haces eso, no puedes usar los puntos computados mas de una vez, estos deben ser calculados cada vez que los usas.
 
De todas formas, si haces eso, no puedes usar los puntos computados mas de una vez, estos deben ser calculados cada vez que los usas.
  
Line 70: Line 70:
  
 
Antes de image.Draw, agrega estas líneas :
 
Antes de image.Draw, agrega estas líneas :
<delphi>
+
<syntaxhighlight lang="pascal">
 
     storedSpline := image.ComputeBezierSpline([BezierCurve(PointF(50,50),PointF(150,50),PointF(150,100)),
 
     storedSpline := image.ComputeBezierSpline([BezierCurve(PointF(50,50),PointF(150,50),PointF(150,100)),
 
                                               BezierCurve(PointF(150,100),PointF(150,150),PointF(50,150))]);
 
                                               BezierCurve(PointF(150,100),PointF(150,150),PointF(50,150))]);
 
     image.DrawPolylineAntialias(storedSpline,c,2);  
 
     image.DrawPolylineAntialias(storedSpline,c,2);  
</delphi>
+
</syntaxhighlight>
  
 
La función BezierCurve define una curva con un orígen y un destino, y uno o dos puntos de control. Aquí solo hay un punto de control. Aquí los puntos de control están definidos, entonces la curva es tangente al rectángulo definido antes.
 
La función BezierCurve define una curva con un orígen y un destino, y uno o dos puntos de control. Aquí solo hay un punto de control. Aquí los puntos de control están definidos, entonces la curva es tangente al rectángulo definido antes.
Line 86: Line 86:
 
[[Image:BGRATutorial7b.png]]
 
[[Image:BGRATutorial7b.png]]
  
[[BGRABitmap tutorial 6/es|Tutorial anterior (estilos de línea)]] | [[BGRABitmap tutorial 8/es|Siguiente tutorial (texturas)]]
+
[[BGRABitmap tutorial 6/es|Tutoría anterior (estilos de línea)]] | [[BGRABitmap tutorial 8/es|Siguiente tutoría (texturas)]]
 
 
[[Category:Graphics]]
 

Latest revision as of 06:12, 10 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 splines.

Crear un nuevo proyecto

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

Dibuja una spline abierta

Con el inspector de objetos, añade un manejador OnPaint y escribe :

procedure TForm1.FormPaint(Sender: TObject);
var
  image: TBGRABitmap;
  pts: array of TPointF;
  storedSpline: array of TPointF;
  c: TBGRAPixel;

begin
    image := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToBGRA(ColorToRGB(clBtnFace)));
    c := ColorToBGRA(ColorToRGB(clWindowText));

    //rectangular polyline
    setlength(pts,4);
    pts[0] := PointF(50,50);
    pts[1] := PointF(150,50);
    pts[2] := PointF(150,150);
    pts[3] := PointF(50,150);
    image.DrawPolylineAntialias(pts,BGRA(255,0,0,150),1);

    //compute spline points and draw as a polyline
    storedSpline := image.ComputeOpenedSpline(pts);
    image.DrawPolylineAntialias(storedSpline,c,1);

    image.Draw(Canvas,0,0,True);
    image.free;  
end;

Hay dos líneas que dibuja spline. La primer línea computa los puntos spline, y la segunda los dibuja. Ten en cuenta que es una función específica para splines abiertas.

Dibuja una spline cerrada

Antes de image.Draw, agrega estas líneas :

    for i := 0 to 3 do
      pts[i].x += 200;
    image.DrawPolylineAntialias(pts,BGRA(255,0,0,150),1);

    storedSpline := image.ComputeClosedSpline(pts);
    image.DrawPolygonAntialias(storedSpline,c,1);

Ve con el cursor en el identificador 'i' y presiona Ctrl-Shift-C para agregar la declaración de la variable. El loop desplaza los puntos hacia la derecha.

Dos nuevas lineas dibujan una spline cerrada. Ten en cuenta la función específica que computa splines cerradas y la llamada a DrawPolygonAntialias.

Puedes evitar usar una variable para guardar los puntos de la spline como esta :

image.DrawPolygonAntialias(image.ComputeClosedSpline(pts),c,1);

De todas formas, si haces eso, no puedes usar los puntos computados mas de una vez, estos deben ser calculados cada vez que los usas.

Ejecuta el programa

Esto debería dibujar dos splines, uno abierto a la izquierda y uno cerrado a la derecha.

BGRATutorial7.png

Ten en cuenta que la spline va a través de cada punto. Si quieres que la curva permanezca dentro o definir tangentes, necesitas usar puntos de control, que están displonibles en curvas Bézier.

Usando curvas Bézier

Antes de image.Draw, agrega estas líneas :

    storedSpline := image.ComputeBezierSpline([BezierCurve(PointF(50,50),PointF(150,50),PointF(150,100)),
                                               BezierCurve(PointF(150,100),PointF(150,150),PointF(50,150))]);
    image.DrawPolylineAntialias(storedSpline,c,2);

La función BezierCurve define una curva con un orígen y un destino, y uno o dos puntos de control. Aquí solo hay un punto de control. Aquí los puntos de control están definidos, entonces la curva es tangente al rectángulo definido antes.

Una spline Bézier es simplemente una serie de curvas Bézier. Por lo tanto, la función ComputeBezierSpline concatena un array de curvas Bézier. Aquí construimos una bonita U-girada con dos curvas.

Ejecuta el programa

Deberías ver una curva Bézier en negrita dentro del rectángulo izquierdo.

BGRATutorial7b.png

Tutoría anterior (estilos de línea) | Siguiente tutoría (texturas)