Objetos Gráficos

Hola chavos aquí de nuevo saludándolos y  comenzando con una nueva aplicación de graficación en C++ Builder. Bueno pues en esta ocasión realizaremos una aplicación para mostrar como dibujar los objetos gráficos más comunes como lo son: rectángulo, elipse, pie, arco, trazo de lineas, entre otros. Además también veremos cómo modificar el color y estilo de la brocha así como el color y estilo de la pluma.

Bueno pues esta aplicación contiene muchos componentes en la forma, así que empezemos por ir colocándolos, tales componentes son los siguientes:

-Un panel con la propiedad Caption en "cadena vacía" y el color clTeal.
-Un label que su propiedad Caption sea "Objeto Gráfico"
-Un ComboBox en el cual su propiedad Texto se la borramos, y en la colección de items escribimos la siguiente lista:
          *Línea
          *Rectángulo
          *Rectángulo Redondeado
          *Elipse
          *Circulo
          *Pie
          *Arco
-Otro panel dentro del panel anterior con la propiedad Caption como cadena vacía.
-Un label dentro del segundo panel con la propiedad Caption con la cadena "Brocha"
-Otro label dentro del segundo panel con la palabra "Estilo" en la propiedad Caption
-Un ComboBox también dentro del segundo panel también con la propiedad Texto borrada, y en su lista de items escribimos la siguiente:
          *Sólido
          *Transparente
          *Horizontal
          *Vertical
          *Diagonal Derecha
          *Diagonal Izquierda
          *Cuadrícula
          *Cuadrícula Diagonal
-Otro label más dentro del segundo panel con el valor "Color" en su propiedad Caption
-Un SpeedButton en el cual colocamos en su propiedad Glyph un archivo bmp que hayamos creado nosotros mismos (lo anterior lo podemos realizar desde el Image Editor, accesible desde el menú Tools del C++ Builder 6)
-Colocamor un tercer panel dentro del panel principal que habíamos colocado al principio al igual que los anteriores con la propiedad Caption vacía.
-Dentro de éste último panel colocamos un label cuya propiedad Caption sea "Pluma"
-Otro label dentro del mismo panel que el anterior con la propiedad Caption "Estilo"
-Un ComboBox dentro del tercer panel con la propiedad Caption vacía y en su lista de ítems agregamos los siguientes elementos:
          *Sólido
          *Dash
          *Dot
          *DashDot
          *DashDotDot
          *Clear
          *InsideFrame
-Un label más con la palabra "Color" en su propiedad Caption
-También dentro del tercer panel un SpeedButton con una imágen bmp personalizada en su propiedad Gylph
-Finalmente dentro del panel principal que habíamos puesto al principio colocamos un ColorDialog

Como siempre todos estos componentes pueden ser acomodados de la manera que ustedes quieran pero en mi caso yo los acomode de la manera siguiente:

Enseguida comenzamos con la codificación de los componentes, realmente el código no es tan grande, ya que la mayoría de los componentes que pusimos fueron más que nada para cuestiones de diseño y de buena presentación de la aplicación.

Primeramente colocamos en el primer ComboBox que pusimos el código siguiente, el cual nos servirá para dibujar los objetos gráficos en la forma:


void __fastcall TForm1::ComboBox1Change(TObject *Sender)
{
        Repaint();
        switch(ComboBox1->ItemIndex)
        {
                case 0: Canvas->MoveTo(100,100);
                Canvas->LineTo(300,200);//Linea
                break;
                case 1: Canvas->Rectangle(250,100,450,200);//Rectangulo
                break;
                case 2: Canvas->RoundRect(250,100,450,200,10,10);//Rectangulo Redondeado
                break;
                case 3: Canvas->Ellipse(250,100,450,200);//Elipse
                break;
                case 4: Canvas->Ellipse(250,50,450,250);//Circulo
                break;
                case 5: Canvas->Pie(250,50,450,250,350,50,450,100);//Pie
                break;
                case 6: Canvas->Arc(250,100,450,200,420,180,350,100);//Arco
                break;
        }
}
//---------------------------------------------------------------------------


Ahora colocamos el código en el segundo ComboBox que pusimos, este código servirá para cambiar el estilo de la brocha, es decir, del relleno del objeto, y después redibujará automáticamente el objeto gráfico con el nuevo estilo de brocha:


void __fastcall TForm1::ComboBox2Change(TObject *Sender)
{
        switch(ComboBox2->ItemIndex)
        {
                case 0: Canvas->Brush->Style = bsSolid;
                break;
                case 1: Canvas->Brush->Style = bsClear;
                break;
                case 2: Canvas->Brush->Style = bsHorizontal;
                break;
                case 3: Canvas->Brush->Style = bsVertical;
                break;
                case 4: Canvas->Brush->Style = bsFDiagonal;
                break;
                case 5: Canvas->Brush->Style = bsBDiagonal;
                break;
                case 6: Canvas->Brush->Style = bsCross;
                break;
                case 7: Canvas->Brush->Style = bsDiagCross;
                break;
        }
        ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------


Después colocamos el código que tenemos a continuación en el tercer ComboBox que colocamos, con él podremos cambiar el estilo de la pluma, es decir del contorno de el objeto, para después redibujar automáticamente el objeto gráfico en la forma con el nuevo estilo de pluma:


void __fastcall TForm1::ComboBox3Change(TObject *Sender)
{
        switch(ComboBox3->ItemIndex)
        {
                case 0: Canvas->Pen->Style = psSolid;
                break;
                case 1: Canvas->Pen->Style = psDash;
                break;
                case 2: Canvas->Pen->Style = psDot;
                break;
                case 3: Canvas->Pen->Style = psDashDot;
                break;
                case 4: Canvas->Pen->Style = psDashDotDot;
                break;
                case 5: Canvas->Pen->Style = psClear;
                break;
                case 6: Canvas->Pen->Style = psInsideFrame;
                break;
        }
        ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------


Luego damos doble clic en el primer SpeedButton que colocamos y escribimos el siguiente código, con el cual cambiaremos el color a la brocha y después se redibujará el objeto gráfico con el nuevo color elegido:


void __fastcall TForm1::SpeedButton1Click(TObject *Sender)
{
        if(ColorDialog1->Execute())
                Canvas->Brush->Color = ColorDialog1->Color;
        ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------


Finalmente codificamos el último SpeedButton que colocamos, para esto utilizaremos el siguiente código con el cual cambiaremos el color de la pluma para que al igual que los componentes anteriores se redibuje el objeto gráfico en la forma con el nuevo color de pluma elegido:


void __fastcall TForm1::SpeedButton2Click(TObject *Sender)
{
        if(ColorDialog1->Execute())
                Canvas->Pen->Color = ColorDialog1->Color;
        ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------


Pues ese fue todo el código que necesitamos amigos, ahora compilamos y corremos nuestra aplicación y debe de funcionar de maravilla:

Pues si funcionó su aplicación felicidades chavos!! y si no fue así pues revisen bien para ver que errores pueden haber cometido. Por mi parte esto fue todo por hoy y nos vemos en la siguiente ocasión para continuar con aplicaciones de graficación en el C++ Builder.