Dibujando ejes para mostrar un gráfico con Delphi

Muchas veces nos encontraremos con el diseño de diversas aplicaciones dónde tendremos que mostrar algún gráfico sobre un Canvas. Para hacer el gráfico más interesante y sin tener que recurrir a componentes de terceros como el TChart (que ya os explicaré un día como funciona éste componente), lo podemos hacer nosotros mismos, a mano!. En éste ejemplo, utilizaré un TImage (como siempre) para jugar con nuestro amigo TCanvas y dibujar las líneas horizontales y verticales. Dentro de las líneas centrales dibujaremos las marcas para cada valor y los valores múltiples de 5 los marcaremos con una marca de eje diferente. El ejemplo que vamos a realizar quedará como el que os muestro a continuación:


Si os fijáis, aparecen una serie de líneas verticales y horizontales en forma de parrilla y luego en el eje central aparecen las marcas diferenciando los números múltiples de 5. Mediante el Script que os muestro a continuación podemos ajustar todos éstos parámetros como queramos. Aquí os dejo el código fuente:

procedure TForm3.Button1Click(Sender: TObject);
begin
    DrawAxes();
end;

procedure TForm3.DrawAxes;

  procedure DrawLine(p1, p2: TPoint; color: TColor);
  begin
      Image2.Canvas.Pen.Width := 1;
      Image2.Canvas.Pen.Color := color;
      Image2.Canvas.MoveTo(p1.x, p1.y);
      Image2.Canvas.LineTo(p2.x, p2.y);
  end;

var
    i, partH: integer;
    partW : double;
    Center: TPoint;
begin
    partH := Image2.Height div 8;
    partW := Image2.Width / 100;
    Center := Point(image2.Height div 2, Image2.Width div 2);

    //Horizontal line --------------------------------
    for i := 1 to 8 do
        DrawLine(Point(0, i * partH), Point(Width, i * partH), clBlack);

    for i := 1 to 99 do
        if (i mod 5) = 0 then
            DrawLine(Point(Center.y - 4, i * 4), Point(Center.y + 5, i * 4), clRed)
        else
            DrawLine(Point(Center.y - 2, i * 4), Point(Center.y + 3, i * 4), clBlack);

    //Vertical line -----------------------------
    for i := 1 to 9 do
        DrawLine(Point(round(i * partW * 10), 0), Point(round(i * partW * 10), width), clBlack);

    for i := 1 to 110 do
        if (i mod 5) = 0 then
            DrawLine(Point(round(i * partW), Center.x - 4), Point(round(i * partW), Center.x + 5), clRed)
        else
            DrawLine(Point(round(i * partW), Center.x - 2), Point(round(i * partW), Center.x + 3), clBlack);
end;

Una vez configurada la parrilla, podemos dibujar cualquier cosa encima y referenciarnos a través de los ejes dibujados. Además podemos utilizar el código para crear un componente o algo por el estilo. vosotros mismos!.

Comments

Popular Posts