Hola chavos! Bueno pues en esta ocasión trabajaremos con algo un poco diferente a lo que habitualmente veníamos haciendo. Por esta vez no utilizaremos el lenguaje de programación C++ sino que utilizaremos el ya conocido C#. Supongo que ya todos deberían haber trabajado alguna vez con C# (casi siempre utilizado con la interfaz Microsoft Visual Studio), es relativamente un lenguaje más sencillo que C++ ya que la interfaz de usuario proporciona muchísima ayuda y es muy amigable con el usuario al momento de compilar y corregir errores ya que siempre muestra en donde se encuentran éstos. Ambos lenguajes son muy parecidos el uno al otro así que no nos será muy difícil poder trabajar en ambos.
Nuestra aplicación lo que hará será probar como se vería el cuerpo de una página HTML con diferentes combinaciones de colores de fondo, color de texto, color de los links dentro de la página, color de los links activos y color de los links ya visitados. Los colores los definiremos con el famoso RGB que ya tantas veces hemos utilizado antes en C++. Una vez que hayamos encontrado la combinación de colores que más nos agrade podremos copiar el código de etiquetas para poder copiarlo dentro de un documento HTML para crear nuestra propia página.
La aplicación contendrá muchos componentes en la Forma, enseguida los enlistamos:
-2 GroupBox
-5 RadioButton
-6 Labels o etiquetas
-3 ScrollBar (TrackBar en C++ Builder)
-2 Panel
-13 TextBox (Edit en C++ Builder)
-2 botones
Al igual que siempre pueden crear el diseño como deseen, en mi caso lo realice de la siguiente manera:
Ahora comenzamos con la codificación de los componentes,para ir al código presionamos F7. Ya estando ahí lo primero que haremos será definir algunas variables y métodos que necesitaremos, comenzamos por declarar las siguiente variables globales en el Form1.cs:
private string HexBG, HexText, HexLink, HexALink, HexVLink;
Enseguida definiremos 2 métodos que utilizaremos para los colores, primero para aplicar los colores:
internal void ApplyColor()
{
HexBG = txtBackground.Text;
HexText = txtText.Text;
HexLink = txtLink.Text;
HexALink = txtActiveLink.Text;
HexVLink = txtVisitedLink.Text;
string strRed = Convert.ToString(255 - scrRed.Value);
string strGreen = Convert.ToString(255 - scrGreen.Value);
string strBlue = Convert.ToString(255 - scrBlue.Value);
txtRed.Text = strRed;
txtGreen.Text = strGreen;
txtBlue.Text = strBlue;
pnlPreview.BackColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
string FmtRed = (255 - scrRed.Value).ToString("X");
if (FmtRed.Length == 1)
FmtRed = String.Concat("0", FmtRed);
string FmtGreen = (255 - scrGreen.Value).ToString("X");
if (FmtGreen.Length == 1)
FmtGreen = String.Concat("0", FmtGreen);
string FmtBlue = (255 - scrBlue.Value).ToString("X");
if (FmtBlue.Length == 1)
FmtBlue = String.Concat("0", FmtBlue);
if (rdoBackground.Checked == true)
{
string BG = "#";
BG = String.Concat(BG, FmtRed);
BG = String.Concat(BG, FmtGreen);
BG = String.Concat(BG, FmtBlue);
txtBackground.Text = BG;
pnlBody.BackColor = pnlPreview.BackColor;
txtTextPreview.BackColor = pnlPreview.BackColor;
txtLinkPreview.BackColor = pnlPreview.BackColor;
txtALinkPreview.BackColor = pnlPreview.BackColor;
txtVLinkPreview.BackColor = pnlPreview.BackColor;
HexBG = txtBackground.Text;
}
else if (rdoText.Checked == true)
{
string Txt = "#";
Txt = String.Concat(Txt, FmtRed);
Txt = String.Concat(Txt, FmtGreen);
Txt = String.Concat(Txt, FmtBlue);
txtText.Text = Txt;
txtTextPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexText = txtText.Text;
}
else if (rdoLink.Checked == true)
{
string TL = "#";
TL = String.Concat(TL, FmtRed);
TL = String.Concat(TL, FmtGreen);
TL = String.Concat(TL, FmtBlue);
txtLink.Text = TL;
txtLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexLink = txtLink.Text;
}
else if (rdoActiveLink.Checked == true)
{
string AL = "#";
AL = String.Concat(AL, FmtRed);
AL = String.Concat(AL, FmtGreen);
AL = String.Concat(AL, FmtBlue);
txtActiveLink.Text = AL;
txtALinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexALink = txtActiveLink.Text;
}
else if (rdoVisitedLink.Checked == true)
{
string VL = "#";
VL = String.Concat(VL, FmtRed);
VL = String.Concat(VL, FmtGreen);
VL = String.Concat(VL, FmtBlue);
txtVisitedLink.Text = VL;
txtVLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexVLink = txtVisitedLink.Text;
}
string BD = "<body bgcolor=\"";
BD = String.Concat(BD, HexBG);
BD = String.Concat(BD, "\" text=\"");
BD = String.Concat(BD, HexText);
BD = String.Concat(BD, "\" link=\"");
BD = String.Concat(BD, HexLink);
BD = String.Concat(BD, "\" alink=\"");
BD = String.Concat(BD, HexALink);
BD = String.Concat(BD, "\" vlink=\"");
BD = String.Concat(BD, HexVLink);
BD = String.Concat(BD, "\">");
txtResult.Text = BD;
}
Ahora para saber que opción tenemos seleccionada actualmente, si el fondo, texto, links, etc.:
internal void ClickOption(System.Drawing.Color Clr, String Result)
{
int red, green, blue;
pnlPreview.BackColor = Clr;
red = 255 - pnlPreview.BackColor.R;
green = 255 - pnlPreview.BackColor.G;
blue = 255 - pnlPreview.BackColor.B;
scrRed.Value = red;
scrGreen.Value = green;
scrBlue.Value = blue;
txtRed.Text = red.ToString();
txtGreen.Text = green.ToString();
txtBlue.Text = blue.ToString();
Result = String.Concat(Result, "#");
Result = String.Concat(Result, red.ToString("X"));
Result = String.Concat(Result, green.ToString("X"));
Result = String.Concat(Result, blue.ToString("X"));
}
Ahora sí empezamos con los componentes los primeros serán los ScrollBar, he aquí el primero:
private void scrRed_Scroll(object sender, ScrollEventArgs e)
{
ApplyColor();
}
Como el código de las 3 ScrollBar es el mismo utilizaremos el mismo evento para todos. Para hacer esto seleccionamos el segundo ScrollBar y en la ventana de Propiedades nos vamos a la pestaña Eventos (es donde está la imágen del relámpago) y en el evento Scroll seleccionamos la opción scrRed_Scroll. Realizamos lo mismo con el ScrollBar restante. Luego sigue la codificación de los RadioButton, damos doble clic en el que dice Background y escribimos el siguiente código en el evento:
private void rdoBackground_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
pnlBody.BackColor = BGColor;
ClickOption(pnlBody.BackColor, txtBackground.Text);
HexBG = txtBackground.Text;
}
Ahora seleccionamos el RadioButton con la etiqueta Text:
private void rdoText_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtTextPreview.BackColor = BGColor;
ClickOption(txtTextPreview.ForeColor, txtText.Text);
HexText = txtText.Text;
}
El que sigue es el RadioButton que tiene la etiqueta Link:
private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}
Enseguida damos doble clic en el que está etiquetado como ActiveLink:
private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}
Finalmente para terminar con los RadioButton damos doble clic en el que está etiquetado como VisitedLink:
private void rdoVisitedLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtVLinkPreview.BackColor = BGColor;
ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
HexVLink = txtVisitedLink.Text;
}
Para terminar codificaremos los botones, primero escribimos el siguiente código en el botón con el texto Copy:
private void btnCopy_Click(object sender, EventArgs e)
{
txtResult.SelectAll();
txtResult.Copy();
}
Y por último escribimos en el botón Close el código que tenemos a continuación:
private void btnClose_Click(object sender, EventArgs e)
{
Close();
}
Y ahora guardan su aplicación y la corren presionando ctrl+F5 o simplemente F5, el resultado será algo como lo siguiente:
Bueno amigos pues eso fue todo, espero que todo haya salido bien y que la aplicación les sirva para poder utilizarla más adelante en el diseño de alguna página web en HTML que quieran realizar. Por hoy me despido y espero que sigamos en contacto para seguir con más aplicaciones gráficas, la mayoría en C++ pero también algunas más en C#. Nos vemos chavos!.
miércoles, 29 de febrero de 2012
martes, 28 de febrero de 2012
Manipulación De Colores Con Corrimientos
Hola chavos! Aquí estoy de nuevo para continuar realizando aplicaciones gráficas con C++ Builder.
Bien pues no se si recuerdan que hace algún tiempo realizamos una aplicación en consola en C++ en la que comprobamos el funcionamiento de los corrimientos de bits. Sino lo recuerdan pues más vale que echen un vistazo unas entradas atrás o a sus aplicaciones guardadas ya que lo utilizaremos para realizar esta aplicación. Nuestra aplicación lo que hará será colorear un PaintBox según el botón que presionemos manipulando los colores por separado y no conjuntamente con el RGB como lo veníamos haciendo anteriormente. Precisamente para poder manipular los colores por separado será para lo que utilizaremos los corrimientos en esta ocasión.
Primeramente prepararemos la Forma, la cual tenemos que cambiar el color a negro (aunque es por gusto, si desean no hacerlo pueden dejarla como esta), cambiando la propiedad color a clBlack. Los componentes que tenemos que tener son los siguientes:
-1 Shape
-1 PaintBox (el cual tenemos que colocar sobre el shape)
-3 botones
-3 Timers
La Forma en mi caso quedo de la siguiente manera (aunque saben que cada quien puede tener su propio diseño):
Bueno pues comenzamos con la programación de los componentes, primeramente lo haremos con el primer botón que contiene la cadena "ROJO", en él colocamos el siguiente código:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer2->Enabled = false;
Timer3->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
Con el anterior código lo que hacemos es refrescar el PaintBox para volver a pintarlo, así mismo habilitamos el primer Timer y deshabilitamos 2 restantes. Ahora continuamos con el segundo botón que contiene la cadena "VERDE" y escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer3->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Al igual que el botón anterior primero refrescamos el PaintBox para volverlo a pintar y habilitamos el segundo Timer mientras deshabilitamos los otros 2. Luego codificamos el tercer y último botón, él cual contiene la leyenda "AZUL", el código es el siguiente:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer2->Enabled = false;
Timer3->Enabled = true;
}
//---------------------------------------------------------------------------
Este último realiza una función similar a los anteriores, refresca el PaintBox y habilita el tercer Timer para deshabilitar los otros 2. Después comenzamos con la codificación de los Timers, a continuación tenemos el Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100) + 155;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Este código como vemos lo que hace es dibujar 10,000 pixeles en algún lugar aleatorio dentro del PaintBox. El color lo definimos con números aleatorios entre 0 y 100 y luego le sumamos 155 para asegurarnos de obtener una tonalidad en rojo. Ahora codificamos el Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 8;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
El código es parecido al anterior ya que igualmente dibujamos pixeles aleatoriamente dentro del PaintBox. Solo que en este botón el color además de definirlo con un número aleatorio y sumarle 155, le realizamos un corrimiento de 8 bits hacia la izquierda, para mover todos los bits hacia la izquierda y de esa manera cambiar todas las tonalidades de rojo a verde. Finalmente codificamos el Timer3:
void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 16;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Con este código se realiza una función similar a la anterior, calculando primero un número aleatorio y luego realizandole un corrimiento de 16 bits a la izquierda para asegurarnos de cambiar todos los colores rojos a azules.
Para terminar solo compilamos el programa y lo corremos y observamos el resultado:
Bien amigos pues por hoy es todo espero que hayan aprendido a manipular los colores de manera independiente. Ahora que conocemos ambas maneras de manejar los colores tendremos la oportunidad de elegir que manera queremos utilizar dependiendo de cual necesitemos o cual se nos haga mas sencillo. Yo los espero en la próxima para continuar con las aplicaciones. Hasta la vista amigos!.
Bien pues no se si recuerdan que hace algún tiempo realizamos una aplicación en consola en C++ en la que comprobamos el funcionamiento de los corrimientos de bits. Sino lo recuerdan pues más vale que echen un vistazo unas entradas atrás o a sus aplicaciones guardadas ya que lo utilizaremos para realizar esta aplicación. Nuestra aplicación lo que hará será colorear un PaintBox según el botón que presionemos manipulando los colores por separado y no conjuntamente con el RGB como lo veníamos haciendo anteriormente. Precisamente para poder manipular los colores por separado será para lo que utilizaremos los corrimientos en esta ocasión.
Primeramente prepararemos la Forma, la cual tenemos que cambiar el color a negro (aunque es por gusto, si desean no hacerlo pueden dejarla como esta), cambiando la propiedad color a clBlack. Los componentes que tenemos que tener son los siguientes:
-1 Shape
-1 PaintBox (el cual tenemos que colocar sobre el shape)
-3 botones
-3 Timers
La Forma en mi caso quedo de la siguiente manera (aunque saben que cada quien puede tener su propio diseño):
Bueno pues comenzamos con la programación de los componentes, primeramente lo haremos con el primer botón que contiene la cadena "ROJO", en él colocamos el siguiente código:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer2->Enabled = false;
Timer3->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
Con el anterior código lo que hacemos es refrescar el PaintBox para volver a pintarlo, así mismo habilitamos el primer Timer y deshabilitamos 2 restantes. Ahora continuamos con el segundo botón que contiene la cadena "VERDE" y escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer3->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Al igual que el botón anterior primero refrescamos el PaintBox para volverlo a pintar y habilitamos el segundo Timer mientras deshabilitamos los otros 2. Luego codificamos el tercer y último botón, él cual contiene la leyenda "AZUL", el código es el siguiente:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer2->Enabled = false;
Timer3->Enabled = true;
}
//---------------------------------------------------------------------------
Este último realiza una función similar a los anteriores, refresca el PaintBox y habilita el tercer Timer para deshabilitar los otros 2. Después comenzamos con la codificación de los Timers, a continuación tenemos el Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100) + 155;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Este código como vemos lo que hace es dibujar 10,000 pixeles en algún lugar aleatorio dentro del PaintBox. El color lo definimos con números aleatorios entre 0 y 100 y luego le sumamos 155 para asegurarnos de obtener una tonalidad en rojo. Ahora codificamos el Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 8;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
El código es parecido al anterior ya que igualmente dibujamos pixeles aleatoriamente dentro del PaintBox. Solo que en este botón el color además de definirlo con un número aleatorio y sumarle 155, le realizamos un corrimiento de 8 bits hacia la izquierda, para mover todos los bits hacia la izquierda y de esa manera cambiar todas las tonalidades de rojo a verde. Finalmente codificamos el Timer3:
void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 16;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Con este código se realiza una función similar a la anterior, calculando primero un número aleatorio y luego realizandole un corrimiento de 16 bits a la izquierda para asegurarnos de cambiar todos los colores rojos a azules.
Para terminar solo compilamos el programa y lo corremos y observamos el resultado:
Bien amigos pues por hoy es todo espero que hayan aprendido a manipular los colores de manera independiente. Ahora que conocemos ambas maneras de manejar los colores tendremos la oportunidad de elegir que manera queremos utilizar dependiendo de cual necesitemos o cual se nos haga mas sencillo. Yo los espero en la próxima para continuar con las aplicaciones. Hasta la vista amigos!.
domingo, 26 de febrero de 2012
Manipulación Y Manejo De Colores
Hola de nuevo amigos, ya estoy de nueva cuenta aquí para seguir realizando más aplicaciones gráficas en C++ Builder.
Bien pues en esta ocasión haremos una aplicación para mostrar un poco más sobre el manejo de los colores en C++. Será bastante sencillo pero muy importante para más adelante usarlo.
Bueno pues comenzamos como siempre con los componentes que necesitamos colocar en la Forma, los cuales los listamos a continuación:
-3 Labels
-3 TrackBar (con valores de 0 a 255)
-1 Panel
-1 Shape
-3 BitBtn (los cuales son como los botones normales pero a estos les podemos colocar una imágen personalizada en su propiedad Glyph)
La Forma en mi caso queda de la siguiente manera, aunque ustedes pueden acomodar sus componentes como gusten:
Ahora comenzamos con la codificación de los componentes correspondientes. El primero que necesitamos será el TrackBar1, damos clic en él y escribimos el siguiente código:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
Panel1->Color=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
//---------------------------------------------------------------------------
Para ahorrar espacio y no escribir tanto código utilizaremos el evento del TrackBar1 para los 2 restantes, ya que para todos el código es el mismo. Lo anterior lo haremos seleccionando uno de los TrackBar que no tienen código, luego en el Object Inspector que se encuentra en la parte inferior izquierda cambiamos a la pestaña Events y en la lista desplegable del evento OnChange seleccionamos la opción TrackBar1Change. Hacemos lo mismo con el último TrackBar.
Ahora damos doble clic en el botón que dice "Rojo", y escribimos el siguiente código:
void __fastcall TForm1::BitBtn1Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(255,0,0);
}
//---------------------------------------------------------------------------
Con lo anterior dibujamos 15,000 puntos de color rojo en un lugar aleatorio dentro del área del Shape. Luego damos doble clic en el botón "Verde" y escribimos el código siguiente:
void __fastcall TForm1::BitBtn2Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,255,0);
}
//---------------------------------------------------------------------------
Con esto lo que hacemos es dibujar en posiciones aleatorias 15,000 puntos de color verde dentro del área del Shape. Ahora en el ultimo BitbBtn que dice "Azul", escribimos este código:
void __fastcall TForm1::BitBtn3Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,0,255);
}
//---------------------------------------------------------------------------
Esto lo que hará sera dibujar 15,000 puntos en algún lugar aleatorio dentro del área del Shape.
Finalmente abrimos el evento OnCreate de la forma y en él escribimos el siguiente código que nos servirá para evitar el parpadeo al momento de repintar los componentes:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
this->DoubleBuffered=true;
Randomize();
}
//---------------------------------------------------------------------------
Ya para terminar compilan y corren su aplicación y el resultado debe ser algo como lo siguiente:
Bueno amigos pues por hoy eso es todo, nos vemos la próxima ocasión para realizar otra aplicación de graficación en C++ Builder. Hasta la próxima chavos.
Bien pues en esta ocasión haremos una aplicación para mostrar un poco más sobre el manejo de los colores en C++. Será bastante sencillo pero muy importante para más adelante usarlo.
Bueno pues comenzamos como siempre con los componentes que necesitamos colocar en la Forma, los cuales los listamos a continuación:
-3 Labels
-3 TrackBar (con valores de 0 a 255)
-1 Panel
-1 Shape
-3 BitBtn (los cuales son como los botones normales pero a estos les podemos colocar una imágen personalizada en su propiedad Glyph)
La Forma en mi caso queda de la siguiente manera, aunque ustedes pueden acomodar sus componentes como gusten:
Ahora comenzamos con la codificación de los componentes correspondientes. El primero que necesitamos será el TrackBar1, damos clic en él y escribimos el siguiente código:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
Panel1->Color=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
//---------------------------------------------------------------------------
Para ahorrar espacio y no escribir tanto código utilizaremos el evento del TrackBar1 para los 2 restantes, ya que para todos el código es el mismo. Lo anterior lo haremos seleccionando uno de los TrackBar que no tienen código, luego en el Object Inspector que se encuentra en la parte inferior izquierda cambiamos a la pestaña Events y en la lista desplegable del evento OnChange seleccionamos la opción TrackBar1Change. Hacemos lo mismo con el último TrackBar.
Ahora damos doble clic en el botón que dice "Rojo", y escribimos el siguiente código:
void __fastcall TForm1::BitBtn1Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(255,0,0);
}
//---------------------------------------------------------------------------
Con lo anterior dibujamos 15,000 puntos de color rojo en un lugar aleatorio dentro del área del Shape. Luego damos doble clic en el botón "Verde" y escribimos el código siguiente:
void __fastcall TForm1::BitBtn2Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,255,0);
}
//---------------------------------------------------------------------------
Con esto lo que hacemos es dibujar en posiciones aleatorias 15,000 puntos de color verde dentro del área del Shape. Ahora en el ultimo BitbBtn que dice "Azul", escribimos este código:
void __fastcall TForm1::BitBtn3Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,0,255);
}
//---------------------------------------------------------------------------
Esto lo que hará sera dibujar 15,000 puntos en algún lugar aleatorio dentro del área del Shape.
Finalmente abrimos el evento OnCreate de la forma y en él escribimos el siguiente código que nos servirá para evitar el parpadeo al momento de repintar los componentes:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
this->DoubleBuffered=true;
Randomize();
}
//---------------------------------------------------------------------------
Ya para terminar compilan y corren su aplicación y el resultado debe ser algo como lo siguiente:
Bueno amigos pues por hoy eso es todo, nos vemos la próxima ocasión para realizar otra aplicación de graficación en C++ Builder. Hasta la próxima chavos.
sábado, 25 de febrero de 2012
Pixel En Movimiento
Hola amigos! Aquí ando de nueva cuenta para seguir mostrándoles ejemplos de aplicaciones gráficas en C++ Builder y así seguir aprendiendo cada vez más cosas nuevas.
Bueno pues en esta ocasión realizaremos una aplicación para crear un pixel y moverlo alrededor del perímetro de la forma, y cada vez que complete la vuelta volverá a hacer los mismo pero cada vez más hacia el centro, formando el llamado efecto serpiente.
Para realizar esta aplicación lo que necesitamos es pintar la forma de color negro cambiando la propiedad Color a clBlack. Por esta vez el único componente que necesitaremos en la forma será un Timer.
Ahora nos vamos al archivo H y en las declaraciones de usuario declaramos lo siguiente:
private: // User declarations
POINTS Puntos[1000];
int inicioX;
int inicioY;
int fin;
Bien, habiendo realizado lo anterior procedemos con la codificación de el único componente que tenemos en la forma, es decir, el Timer, en él escribimos el siguiente código:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
if(Puntos[0].x <= ClientWidth && Puntos[0].y == inicioY)
{
Puntos[0].x++;
}
if(Puntos[0].x == ClientWidth - fin)
{
Puntos[0].y++;
}
if(Puntos[0].y == ClientHeight - fin)
{
Puntos[0].x--;
if(Puntos[0].x == inicioY + 2)
{
inicioY = inicioY + 2;
}
}
if(Puntos[0].x == inicioY)
{
Puntos[0].y--;
if(Puntos[0].y == inicioX+2)
{
inicioX = inicioX + 2;
fin = fin + 2;
}
}
Canvas->Pixels[Puntos[0].x][Puntos[0].y] = clYellow;
}
//---------------------------------------------------------------------------
En la línea final del código podemos notar que el color lo tenemos siempre que corramos el programa en amarillo, ustedes pueden cambiar esa parte del código y poner el color que más les guste si así lo desean.
Ahora necesitamos 2 eventos, el primero de ellos es el evento OnCreate de la forma, lo abrimos y colocamos el siguiente código:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
inicioX = 0;
inicioY = 0;
fin = 1;
}
//---------------------------------------------------------------------------
Con este código lo que hacemos es inicializar las variables, ahora el segundo evento que necesitamos es el llamado OnResize, también de la forma, una vez que lo hayamos abierto colocamos el siguiente código en él:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto redimensionamos todo en caso de que la forma cambie de tamaño.
Y pues ya saben lo que sigue chavos, compilan y corren su aplicación y debería verse de la siguiente manera:
Espero que pueda notarse el efecto del movimiento del pixel en la parte superior e izquierda de la forma, sino es así pues ya verán en su aplicación el efecto que genera al ir simulando el movimiento.
Pues en esta ocasión fue todo amigos, continúen practicando lo que hemos aprendido hasta ahora y nos vemos en la próxima para seguir realizando más aplicaciones en C++ Builder. Nos vemos amigos!
Bueno pues en esta ocasión realizaremos una aplicación para crear un pixel y moverlo alrededor del perímetro de la forma, y cada vez que complete la vuelta volverá a hacer los mismo pero cada vez más hacia el centro, formando el llamado efecto serpiente.
Para realizar esta aplicación lo que necesitamos es pintar la forma de color negro cambiando la propiedad Color a clBlack. Por esta vez el único componente que necesitaremos en la forma será un Timer.
Ahora nos vamos al archivo H y en las declaraciones de usuario declaramos lo siguiente:
private: // User declarations
POINTS Puntos[1000];
int inicioX;
int inicioY;
int fin;
Bien, habiendo realizado lo anterior procedemos con la codificación de el único componente que tenemos en la forma, es decir, el Timer, en él escribimos el siguiente código:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
if(Puntos[0].x <= ClientWidth && Puntos[0].y == inicioY)
{
Puntos[0].x++;
}
if(Puntos[0].x == ClientWidth - fin)
{
Puntos[0].y++;
}
if(Puntos[0].y == ClientHeight - fin)
{
Puntos[0].x--;
if(Puntos[0].x == inicioY + 2)
{
inicioY = inicioY + 2;
}
}
if(Puntos[0].x == inicioY)
{
Puntos[0].y--;
if(Puntos[0].y == inicioX+2)
{
inicioX = inicioX + 2;
fin = fin + 2;
}
}
Canvas->Pixels[Puntos[0].x][Puntos[0].y] = clYellow;
}
//---------------------------------------------------------------------------
En la línea final del código podemos notar que el color lo tenemos siempre que corramos el programa en amarillo, ustedes pueden cambiar esa parte del código y poner el color que más les guste si así lo desean.
Ahora necesitamos 2 eventos, el primero de ellos es el evento OnCreate de la forma, lo abrimos y colocamos el siguiente código:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
inicioX = 0;
inicioY = 0;
fin = 1;
}
//---------------------------------------------------------------------------
Con este código lo que hacemos es inicializar las variables, ahora el segundo evento que necesitamos es el llamado OnResize, también de la forma, una vez que lo hayamos abierto colocamos el siguiente código en él:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto redimensionamos todo en caso de que la forma cambie de tamaño.
Y pues ya saben lo que sigue chavos, compilan y corren su aplicación y debería verse de la siguiente manera:
Espero que pueda notarse el efecto del movimiento del pixel en la parte superior e izquierda de la forma, sino es así pues ya verán en su aplicación el efecto que genera al ir simulando el movimiento.
Pues en esta ocasión fue todo amigos, continúen practicando lo que hemos aprendido hasta ahora y nos vemos en la próxima para seguir realizando más aplicaciones en C++ Builder. Nos vemos amigos!
jueves, 23 de febrero de 2012
Efecto Spray
Hola de nuevo amigos! Me alegro de saludarlos y pues en esta ocasión continuaremos con las aplicaciones gráficas en C++ Builder. El programa que realizaremos en esta ocasión será el famoso efecto de spray que puede tomar la brocha en el programa paint de Windows, ya alguna vez debieron de haberlo utilizado.
Pues empezamos con nuestra aplicación y lo primero que necesitamos es cambiar el color de la forma a blanco en su propiedad Color cambiamos el valor por defecto a clWhite. Después colocamos los siguientes componentes en la forma:
-1 GroupBox
-4 etiquetas o Labels
-3 TrackBar
-1 Edit o caja de texto
-1 UpDown
La forma debe quedar de la siguiente manera:
Lo primero que necesitamos es asociar al UpDown con el Edit. Luego configuramos los valores del UpDown en 0 como mínimo y 100 como máximo.
Bien pues en esta aplicación trabajaremos sobre los eventos de la forma, especialmente en 2. El primero de ellos es el evento OnMouseDown de dicha forma, en él escribimos el siguiente código:
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
for(int N = 0; N < 100; N++)
{
Puntos[N].x = random(Edit1->Text.ToInt()) + X;
Puntos[N].y = random(Edit1->Text.ToInt()) + Y;
Canvas->Pixels[Puntos[N].x][Puntos[N].y]=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
}
//---------------------------------------------------------------------------
El código anterior nos sirve para dibujar de manera aleatoria los pixeles y simular el efecto spray de la brocha con el color dependiendo de las posiciones de los TrackBar, siendo cada una de éstas uno de los valores del RGB. Ahora abrimos el evento OnMouseMove de la forma y tecleamos el código que tenemos a continuación:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
{
FormMouseDown(Sender, mbLeft, Shift, X, Y);
}
}
//---------------------------------------------------------------------------
En el evento anterior lo que hacemos es llamar al evento FormMouseMove cada vez que se mueve el cursor del mouse sobre la forma, dibujando los pixeles aleatorios por cada parte de la forma por la que se mueve el mouse.
Ahora compilamos nuestra aplicación y la corremos para observar nuestro resultado:
De ésta manera descubrimos que los efectos que se generan en programas como el paint de Windows no son por obra de magia sino que son efectos que nosotros podemos programar. Y bueno pues por esta ocasión es todo por mi parte, espero que hayamos aprendido un poco más de lo que ya sabíamos y nos vemos en la siguiente ocasión para seguir con más aplicaciones. Hasta luego amigos!
Pues empezamos con nuestra aplicación y lo primero que necesitamos es cambiar el color de la forma a blanco en su propiedad Color cambiamos el valor por defecto a clWhite. Después colocamos los siguientes componentes en la forma:
-1 GroupBox
-4 etiquetas o Labels
-3 TrackBar
-1 Edit o caja de texto
-1 UpDown
La forma debe quedar de la siguiente manera:
Lo primero que necesitamos es asociar al UpDown con el Edit. Luego configuramos los valores del UpDown en 0 como mínimo y 100 como máximo.
Bien pues en esta aplicación trabajaremos sobre los eventos de la forma, especialmente en 2. El primero de ellos es el evento OnMouseDown de dicha forma, en él escribimos el siguiente código:
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
for(int N = 0; N < 100; N++)
{
Puntos[N].x = random(Edit1->Text.ToInt()) + X;
Puntos[N].y = random(Edit1->Text.ToInt()) + Y;
Canvas->Pixels[Puntos[N].x][Puntos[N].y]=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
}
//---------------------------------------------------------------------------
El código anterior nos sirve para dibujar de manera aleatoria los pixeles y simular el efecto spray de la brocha con el color dependiendo de las posiciones de los TrackBar, siendo cada una de éstas uno de los valores del RGB. Ahora abrimos el evento OnMouseMove de la forma y tecleamos el código que tenemos a continuación:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
{
FormMouseDown(Sender, mbLeft, Shift, X, Y);
}
}
//---------------------------------------------------------------------------
En el evento anterior lo que hacemos es llamar al evento FormMouseMove cada vez que se mueve el cursor del mouse sobre la forma, dibujando los pixeles aleatorios por cada parte de la forma por la que se mueve el mouse.
Ahora compilamos nuestra aplicación y la corremos para observar nuestro resultado:
De ésta manera descubrimos que los efectos que se generan en programas como el paint de Windows no son por obra de magia sino que son efectos que nosotros podemos programar. Y bueno pues por esta ocasión es todo por mi parte, espero que hayamos aprendido un poco más de lo que ya sabíamos y nos vemos en la siguiente ocasión para seguir con más aplicaciones. Hasta luego amigos!
miércoles, 22 de febrero de 2012
Corrimientos En Consola
Hola amigos, por esta ocasión tengo un poco de prisa así que haremos otra aplicación sencilla pero que nos servirá para realizar aplicaciones más adelante.
Lo que vamos a ver en esta ocasión serán las operaciones con bits llamadas corrimientos. Se preguntarán ustedes, ¿qué son los corrimientos?. Bueno pues son operaciones a nivel de bits representadas con los operadores "<<" (corrimiento a la izquierda) y ">>" (corrimiento a la derecha). Ambos operadores lo único que hacen es mover los bits del operando de la izquierda el número de posiciones indicadas por el operador de la derecha. Dichos desplazamientos ocurren en la dirección indicada por el mismo operador.
Pues ahora realizaremos una aplicación para mostrar un ejemplo de corrimientos con bits. La diferencia con las aplicaciones pasadas es que esta vez no la realizaremos en el modo visual sino en el modo consola.
Primeramente abrimos el C++ Builder 6 y le damos clic a la opción "File" de la barra de menús, después seleccionamos "Other..." y en la nueva ventana que se abre buscamos la opción "Console Wizard". Al darle clic en "OK" se abrirá otra ventana, en ella seleccionamos la opción C++ y damos "OK".
Ahora tendremos el método main con una linea de código por default, lo primero que tenemos que hacer es borrar dicha línea de código y escribir las siguientes:
int main(int argc, char* argv[])
{
int a=1;
cout<<"Valor de a: "<<a;
a=a<<8;
cout<<"\nValor de a: "<<a;
cin.get();
}
//---------------------------------------------------------------------------
Bueno pues vemos que primero le asignamos a la variable "a" el valor de 1, luego imprimimos en pantalla ese valor, después aplicamos el corrimiento de dicho valor 8 bits a la izquierda e imprimimos de nuevo el valor en pantalla.
Compilamos nuestra aplicación y la corremos y tendremos lo siguiente:
Bueno chavos por hoy es todo, espero que comprendan, la próxima ocasión realizaremos otra aplicación en modo visual de graficación con C++. Hasta la vista amigos!.
Ahora tendremos el método main con una linea de código por default, lo primero que tenemos que hacer es borrar dicha línea de código y escribir las siguientes:
int main(int argc, char* argv[])
{
int a=1;
cout<<"Valor de a: "<<a;
a=a<<8;
cout<<"\nValor de a: "<<a;
cin.get();
}
//---------------------------------------------------------------------------
Bueno pues vemos que primero le asignamos a la variable "a" el valor de 1, luego imprimimos en pantalla ese valor, después aplicamos el corrimiento de dicho valor 8 bits a la izquierda e imprimimos de nuevo el valor en pantalla.
Compilamos nuestra aplicación y la corremos y tendremos lo siguiente:
Bueno chavos por hoy es todo, espero que comprendan, la próxima ocasión realizaremos otra aplicación en modo visual de graficación con C++. Hasta la vista amigos!.
lunes, 20 de febrero de 2012
Copiar Texto
Hola chavos! Espero que sigan practicando mucho con el C++ Builder y que ya se consideren todos unos buenos programadores de aplicaciones gráficas en C++.
Pues en esta ocasión mostraremos algo muy sencillo y muy rápido de hacer, esto es bastante simple en comparación con aplicaciones pasadas, pero siempre es bueno mostrar otras maneras diferentes de hacer las cosas. En este aplicación les enseñare 2 distintas maneras de copiar texto, primero de un Edit (o textBox como se le conoce en C#) a un label y después de un Edit a otro Edit.
Para realizar esta aplicación necesitaremos colocar los siguientes componentes en la forma:
-2 botones
-3 cajas de texto (Edit)
- 1 etiqueta (label)
Los podemos acomodar de la siguiente manera:
Bueno pues comenzamos con el código que es bastante sencillo y simple, primero colocamos el siguiente código en el evento clic del primer botón, el cual nos servirá para copiar el texto del primer Edit al label que tenemos:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
char *cad = new char[Edit1->Text.Length()];
strcpy(cad, Edit1->Text.c_str());
Label1->Caption = cad;
}
//---------------------------------------------------------------------------
En el código anterior podemos notar que utilizamos un arreglo de char llamado *cad, que es un puntero. Utilizamos la función strcpy() para poder copiar el texto del Edit en el arreglo de char, finalmente asignamos el arreglo a la propiedad Caption del label para escribirlo en la etiqueta.
Ahora escribimos el código del segundo botón:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
int n = Edit2->Text.ToIntDef(30);
if( n>29 && n<100)
Edit3->Text = Edit2->Text;
}
//---------------------------------------------------------------------------
Bueno pues en este botón lo primero transformamos el texto escrito en el Edit2 en variables enteras y finalmente verificamos si son letras y si esto es así copiamos el texto del Edit2 al Edit3.
Por último la aplicación corriendo debería ser algo como lo siguiente:
Bueno amigos por hoy fue todo, solo realizamos esta simple aplicación pero pues todo nos sirve para algo, así que nos vemos en la próxima. Hasta luego!.
Pues en esta ocasión mostraremos algo muy sencillo y muy rápido de hacer, esto es bastante simple en comparación con aplicaciones pasadas, pero siempre es bueno mostrar otras maneras diferentes de hacer las cosas. En este aplicación les enseñare 2 distintas maneras de copiar texto, primero de un Edit (o textBox como se le conoce en C#) a un label y después de un Edit a otro Edit.
Para realizar esta aplicación necesitaremos colocar los siguientes componentes en la forma:
-2 botones
-3 cajas de texto (Edit)
- 1 etiqueta (label)
Los podemos acomodar de la siguiente manera:
Bueno pues comenzamos con el código que es bastante sencillo y simple, primero colocamos el siguiente código en el evento clic del primer botón, el cual nos servirá para copiar el texto del primer Edit al label que tenemos:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
char *cad = new char[Edit1->Text.Length()];
strcpy(cad, Edit1->Text.c_str());
Label1->Caption = cad;
}
//---------------------------------------------------------------------------
En el código anterior podemos notar que utilizamos un arreglo de char llamado *cad, que es un puntero. Utilizamos la función strcpy() para poder copiar el texto del Edit en el arreglo de char, finalmente asignamos el arreglo a la propiedad Caption del label para escribirlo en la etiqueta.
Ahora escribimos el código del segundo botón:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
int n = Edit2->Text.ToIntDef(30);
if( n>29 && n<100)
Edit3->Text = Edit2->Text;
}
//---------------------------------------------------------------------------
Bueno pues en este botón lo primero transformamos el texto escrito en el Edit2 en variables enteras y finalmente verificamos si son letras y si esto es así copiamos el texto del Edit2 al Edit3.
Por último la aplicación corriendo debería ser algo como lo siguiente:
Bueno amigos por hoy fue todo, solo realizamos esta simple aplicación pero pues todo nos sirve para algo, así que nos vemos en la próxima. Hasta luego!.
domingo, 19 de febrero de 2012
Diseño De Un ScreenSaver
Hola de nuevo chavos! Es hora de continuar con la creación de aplicaciones de graficación en C++ Builder y para esta ocasión lo que haremos será mostrar como de manera simple se puede crear un protector de pantalla en el cual se irán dibujando de manera aleatoria figuras que tendremos contenidas en archivos bmp, para hacer esto utilizaremos un arreglo de objetos de tipo TBitmap.
Las 10 imágenes bmp que utilizaremos pueden ser diseñadas por uno mismo o pueden ser descargadas de internet como se desee.
Bueno pues para comenzar lo único que necesitamos de componentes en la forma es un Timer:
Una vez echo esto vamos a la propiedad WndowState de la forma y cambiamos su valor por: wsMaximized. Y en la propiedad BorderStyle de la forma elegimos lo siguiente: bsNone.
Ahora declaramos el arreglo en el que tendremos las imágenes que se mostraran en el protector de pantalla, para esto vamos a el archivo H de la forma y declaramos el arreglo, a estas alturas ya deberíamos de saber cómo hacerlo:
class TForm1 : public TForm
{
__published: // IDE-managed Components
TTimer *Timer1;
void __fastcall Timer1Timer(TObject *Sender);
void __fastcall FormCreate(TObject *Sender);
void __fastcall FormKeyPress(TObject *Sender, char &Key);
void __fastcall FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y);
private: // User declarations
Graphics::TBitmap *ImageObject[10];
public: // User declarations
__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
El siguiente código lo escribimos en el siguiente evento: __fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner), éste es el pequeño código que se crea cuando iniciamos una nueva aplicación visual en C++ Builder, dentro de él escribimos el código:
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
ImageObject[0] = new Graphics::TBitmap;
ImageObject[0]->LoadFromFile("Image1.bmp");
ImageObject[0]->Transparent = True;
ImageObject[1] = new Graphics::TBitmap;
ImageObject[1]->LoadFromFile("Image2.bmp");
ImageObject[1]->Transparent = True;
ImageObject[2] = new Graphics::TBitmap;
ImageObject[2]->LoadFromFile("Image3.bmp");
ImageObject[2]->Transparent = True;
ImageObject[3] = new Graphics::TBitmap;
ImageObject[3]->LoadFromFile("Image4.bmp");
ImageObject[3]->Transparent = True;
ImageObject[4] = new Graphics::TBitmap;
ImageObject[4]->LoadFromFile("Image5.bmp");
ImageObject[4]->Transparent = True;
ImageObject[5] = new Graphics::TBitmap;
ImageObject[5]->LoadFromFile("Image6.bmp");
ImageObject[5]->Transparent = True;
ImageObject[6] = new Graphics::TBitmap;
ImageObject[6]->LoadFromFile("Image7.bmp");
ImageObject[6]->Transparent = True;
ImageObject[7] = new Graphics::TBitmap;
ImageObject[7]->LoadFromFile("Image8.bmp");
ImageObject[7]->Transparent = True;
ImageObject[8] = new Graphics::TBitmap;
ImageObject[8]->LoadFromFile("Image9.bmp");
ImageObject[8]->Transparent = True;
ImageObject[9] = new Graphics::TBitmap;
ImageObject[9]->LoadFromFile("Image10.bmp");
ImageObject[9]->Transparent = True;
}
//---------------------------------------------------------------------------
Después viene el código que escribiremos en el evento del Timer que colocamos en la forma:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int x = random(Width-100);
int y = random(Height-150);
Canvas->Draw(x-60, y-60, ImageObject[random(10)]);
}
//---------------------------------------------------------------------------
El código anterior nos sirve para calcular de forma aleatoria el lugar donde se colocara la imágen cuando aparezca en el protector de pantalla.
Luego abrimos el evento OnCreate de la forma y en el escribimos el código para mantener el cursor oculto mientras este activo el protector de pantalla:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
ShowCursor(FALSE);
}
//---------------------------------------------------------------------------
Ahora abrimos el evento OnKeyPress también de la forma para que el protector de pantalla se cierre si presionamos alguna tecla:
void __fastcall TForm1::FormKeyPress(TObject *Sender, char &Key)
{
Close();
}
//---------------------------------------------------------------------------
Finalmente abrimos otro evento de la forma que sería el OnMouseMove en el cual colocamos el código para que cuando se mueva el cursor del mouse se cierre el protector de pantalla:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
static int MoveCounter = 0;
if( MoveCounter >= 15 )
Close();
MoveCounter++;
}
//---------------------------------------------------------------------------
Y pues eso es todo, ¿muy fácil verdad? pues lo siguiente es compilar y correr nuestro programa y deberíamos obtener algo como lo siguiente:
Bueno amigos pues por esta ocasión sería todo pero ya saben, nos vemos más adelante para seguir mostrando ejemplos de aplicaciones en C++ Builder. Hasta la próxima chavos!
Las 10 imágenes bmp que utilizaremos pueden ser diseñadas por uno mismo o pueden ser descargadas de internet como se desee.
Bueno pues para comenzar lo único que necesitamos de componentes en la forma es un Timer:
Una vez echo esto vamos a la propiedad WndowState de la forma y cambiamos su valor por: wsMaximized. Y en la propiedad BorderStyle de la forma elegimos lo siguiente: bsNone.
Ahora declaramos el arreglo en el que tendremos las imágenes que se mostraran en el protector de pantalla, para esto vamos a el archivo H de la forma y declaramos el arreglo, a estas alturas ya deberíamos de saber cómo hacerlo:
class TForm1 : public TForm
{
__published: // IDE-managed Components
TTimer *Timer1;
void __fastcall Timer1Timer(TObject *Sender);
void __fastcall FormCreate(TObject *Sender);
void __fastcall FormKeyPress(TObject *Sender, char &Key);
void __fastcall FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y);
private: // User declarations
Graphics::TBitmap *ImageObject[10];
public: // User declarations
__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
El siguiente código lo escribimos en el siguiente evento: __fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner), éste es el pequeño código que se crea cuando iniciamos una nueva aplicación visual en C++ Builder, dentro de él escribimos el código:
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
ImageObject[0] = new Graphics::TBitmap;
ImageObject[0]->LoadFromFile("Image1.bmp");
ImageObject[0]->Transparent = True;
ImageObject[1] = new Graphics::TBitmap;
ImageObject[1]->LoadFromFile("Image2.bmp");
ImageObject[1]->Transparent = True;
ImageObject[2] = new Graphics::TBitmap;
ImageObject[2]->LoadFromFile("Image3.bmp");
ImageObject[2]->Transparent = True;
ImageObject[3] = new Graphics::TBitmap;
ImageObject[3]->LoadFromFile("Image4.bmp");
ImageObject[3]->Transparent = True;
ImageObject[4] = new Graphics::TBitmap;
ImageObject[4]->LoadFromFile("Image5.bmp");
ImageObject[4]->Transparent = True;
ImageObject[5] = new Graphics::TBitmap;
ImageObject[5]->LoadFromFile("Image6.bmp");
ImageObject[5]->Transparent = True;
ImageObject[6] = new Graphics::TBitmap;
ImageObject[6]->LoadFromFile("Image7.bmp");
ImageObject[6]->Transparent = True;
ImageObject[7] = new Graphics::TBitmap;
ImageObject[7]->LoadFromFile("Image8.bmp");
ImageObject[7]->Transparent = True;
ImageObject[8] = new Graphics::TBitmap;
ImageObject[8]->LoadFromFile("Image9.bmp");
ImageObject[8]->Transparent = True;
ImageObject[9] = new Graphics::TBitmap;
ImageObject[9]->LoadFromFile("Image10.bmp");
ImageObject[9]->Transparent = True;
}
//---------------------------------------------------------------------------
Después viene el código que escribiremos en el evento del Timer que colocamos en la forma:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int x = random(Width-100);
int y = random(Height-150);
Canvas->Draw(x-60, y-60, ImageObject[random(10)]);
}
//---------------------------------------------------------------------------
El código anterior nos sirve para calcular de forma aleatoria el lugar donde se colocara la imágen cuando aparezca en el protector de pantalla.
Luego abrimos el evento OnCreate de la forma y en el escribimos el código para mantener el cursor oculto mientras este activo el protector de pantalla:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
ShowCursor(FALSE);
}
//---------------------------------------------------------------------------
Ahora abrimos el evento OnKeyPress también de la forma para que el protector de pantalla se cierre si presionamos alguna tecla:
void __fastcall TForm1::FormKeyPress(TObject *Sender, char &Key)
{
Close();
}
//---------------------------------------------------------------------------
Finalmente abrimos otro evento de la forma que sería el OnMouseMove en el cual colocamos el código para que cuando se mueva el cursor del mouse se cierre el protector de pantalla:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
static int MoveCounter = 0;
if( MoveCounter >= 15 )
Close();
MoveCounter++;
}
//---------------------------------------------------------------------------
Y pues eso es todo, ¿muy fácil verdad? pues lo siguiente es compilar y correr nuestro programa y deberíamos obtener algo como lo siguiente:
Bueno amigos pues por esta ocasión sería todo pero ya saben, nos vemos más adelante para seguir mostrando ejemplos de aplicaciones en C++ Builder. Hasta la próxima chavos!
sábado, 18 de febrero de 2012
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.
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.
jueves, 16 de febrero de 2012
Escribir Texto Con Angulo De Rotación (Versión 2)
Hola amigos!!! Espero que estén de lo mejor y pues es hora de continuar con más aplicaciones de graficación en C++ Builder. Creo que aun recuerdan la aplicación que realizamos la ocasión pasada en la cual escribiamos una cadena de texto en la forma. Bueno pues ahora trabajaremos con esa misma aplicación como base y la modificaremos de manera que el texto gire en su propio eje en el sentido de las manecillas del reloj y en sentido contrario, además de poder girarlo en el ángulo que nosotros deseemos.
Para comenzar con la aplicación debemos modificar la forma de manera que debemos de tener los siguientes componentes:
-2 botones (los mismos que teníamos en la aplicación pasada)
-1 label
-1 TrackBar (con valor mínimo de 0 y máximo de 255)
-2 timers
Los componentes pueden acomodarlos con el diseño que quieran, en este caso yo los acomodé de la siguiente manera:
Ahora empezamos con la codificación de la aplicación, primeramente abrimos el archivo H del programa y declaramos las siguientes variables (ya vimos como y dónde hacerlo en aplicaciones pasadas):
private: // User declarations
int n, n2;
A continuación escribimos el código del botón para cerrar la aplicación, ya lo hemos visto antes muchas veces, y sabemos que es bastante sencillo:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------
Enseguida escribimos el código del botón para mostrar texto:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = n*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = n2*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(ClientWidth/2,ClientHeight/2, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------
Notamos que las modificaciones que tiene respecto a la aplicación pasada es que el ángulo en que está escrito el texto y la orientación ahora tienen unos valores variables, los cuales declaramos en el archivo H.
A continuación tenemos el código del TrackBar:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
n = TrackBar1->Position;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
Notamos que lo único que realiza el TrackBar es cambiar el valor de la variable n asignandole el valor de la posición que tiene el TrackBar y después mandamos llamar al evento Button1Click(Sender) para mostrar de nuevo el texto pero ahora con el nuevo ángulo del texto.
Ahora escribimos el código de los 2 timers, primero el código del Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
n++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
Luego el código del Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
n--;
n2++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
El código de los Timers lo que hará será girar el texto en sentido de las manecillas del reloj y en el sentido contrario. Los Timers se habilitan y se deshabilitan dando clic o doble clic en la forma, para esto utilizamos el código que tenemos a continuación:
void __fastcall TForm1::FormClick(TObject *Sender)
{
Timer2->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDblClick(TObject *Sender)
{
Timer1->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Como podemos ver en el código al dar un clic en la forma deshabilitamos el Timer2 y habilitamos el Timer1 con lo que el texto girará en sentido contrario a las manecillas del reloj. Por el contrario si damos doble clic en la forma deshabilitamos el Timer1 y habilitamos el Timer2 con lo que el texto girará en sentido de las manecillas del reloj.
Compilamos nuestro programa y lo corremos, si hicimos todo de manera correcta nuestra aplicación se verá de la siguiente manera:
El texto podemos moverlo automáticamente desde el TrackBar o automáticamente dando clic o doble clic en la forma.
Y pues eso es todo por hoy chavos, espero que todo haya quedado claro y que hayamos aprendido algo. Nos vemos en la próxima ocasión para realizar una aplicación diferente y seguir aprendiendo cosas nuevas en C++ Builder. Hasta la próxima amigos!.
Para comenzar con la aplicación debemos modificar la forma de manera que debemos de tener los siguientes componentes:
-2 botones (los mismos que teníamos en la aplicación pasada)
-1 label
-1 TrackBar (con valor mínimo de 0 y máximo de 255)
-2 timers
Los componentes pueden acomodarlos con el diseño que quieran, en este caso yo los acomodé de la siguiente manera:
Ahora empezamos con la codificación de la aplicación, primeramente abrimos el archivo H del programa y declaramos las siguientes variables (ya vimos como y dónde hacerlo en aplicaciones pasadas):
private: // User declarations
int n, n2;
A continuación escribimos el código del botón para cerrar la aplicación, ya lo hemos visto antes muchas veces, y sabemos que es bastante sencillo:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------
Enseguida escribimos el código del botón para mostrar texto:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = n*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = n2*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(ClientWidth/2,ClientHeight/2, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------
Notamos que las modificaciones que tiene respecto a la aplicación pasada es que el ángulo en que está escrito el texto y la orientación ahora tienen unos valores variables, los cuales declaramos en el archivo H.
A continuación tenemos el código del TrackBar:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
n = TrackBar1->Position;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
Notamos que lo único que realiza el TrackBar es cambiar el valor de la variable n asignandole el valor de la posición que tiene el TrackBar y después mandamos llamar al evento Button1Click(Sender) para mostrar de nuevo el texto pero ahora con el nuevo ángulo del texto.
Ahora escribimos el código de los 2 timers, primero el código del Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
n++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
Luego el código del Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
n--;
n2++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------
El código de los Timers lo que hará será girar el texto en sentido de las manecillas del reloj y en el sentido contrario. Los Timers se habilitan y se deshabilitan dando clic o doble clic en la forma, para esto utilizamos el código que tenemos a continuación:
void __fastcall TForm1::FormClick(TObject *Sender)
{
Timer2->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDblClick(TObject *Sender)
{
Timer1->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Como podemos ver en el código al dar un clic en la forma deshabilitamos el Timer2 y habilitamos el Timer1 con lo que el texto girará en sentido contrario a las manecillas del reloj. Por el contrario si damos doble clic en la forma deshabilitamos el Timer1 y habilitamos el Timer2 con lo que el texto girará en sentido de las manecillas del reloj.
Compilamos nuestro programa y lo corremos, si hicimos todo de manera correcta nuestra aplicación se verá de la siguiente manera:
El texto podemos moverlo automáticamente desde el TrackBar o automáticamente dando clic o doble clic en la forma.
Y pues eso es todo por hoy chavos, espero que todo haya quedado claro y que hayamos aprendido algo. Nos vemos en la próxima ocasión para realizar una aplicación diferente y seguir aprendiendo cosas nuevas en C++ Builder. Hasta la próxima amigos!.
miércoles, 15 de febrero de 2012
Escribir Texto Con Angulo De Rotación
Hola de nuevo chavos!! Espero que estén de lo mejor y preparados para seguir con los ejercicios de graficación en C++ Builder.
Bueno pues en esta ocasión realizaremos algo rápido y simple pero que nos puede llegar a ser útil más adelante en otras aplicaciones. Nuestro ejemplo de hoy se tratará de escribir texto en la forma. Para realizar esto no necesitaremos de muchos componentes así que lo único que haremos será colocar 2 botones en la forma, la cual debería quedar así:
En el primer botón escribiremos el código para dibujar el texto en la forma y el segundo botón solo nos servirá para cerrar la forma.
Empezamos con el código y en el botón de Mostrar Texto escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(0,310, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------
Como vemos en el código podemos modificar el color, el tamaño y el tipo de letra del texto que vamos a escribir en la forma, además podemos elegir que cadena es la que imprimiremos en pantalla.
En el segundo botón lo único que haremos será cerrar la aplicación, por lo tanto el código será el que se muestra a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------
Bueno pues ahora compilamos nuestra aplicación y corremos el programa y al dar clic en el botón con la leyenda "Mostrar Texto" nos tiene que dar algo como lo siguiente:
Bueno amigos pues esta aplicación nos podría servir en un futuro para crear presentaciones de nuestro programa y cosas así. En la próxima práctica que hagamos veremos como mover el texto, es decir que gire automáticamente, así que guarden su aplicación para realizar la siguiente y pues hasta entonces chavos!
Bueno pues en esta ocasión realizaremos algo rápido y simple pero que nos puede llegar a ser útil más adelante en otras aplicaciones. Nuestro ejemplo de hoy se tratará de escribir texto en la forma. Para realizar esto no necesitaremos de muchos componentes así que lo único que haremos será colocar 2 botones en la forma, la cual debería quedar así:
En el primer botón escribiremos el código para dibujar el texto en la forma y el segundo botón solo nos servirá para cerrar la forma.
Empezamos con el código y en el botón de Mostrar Texto escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(0,310, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------
Como vemos en el código podemos modificar el color, el tamaño y el tipo de letra del texto que vamos a escribir en la forma, además podemos elegir que cadena es la que imprimiremos en pantalla.
En el segundo botón lo único que haremos será cerrar la aplicación, por lo tanto el código será el que se muestra a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------
Bueno pues ahora compilamos nuestra aplicación y corremos el programa y al dar clic en el botón con la leyenda "Mostrar Texto" nos tiene que dar algo como lo siguiente:
Bueno amigos pues esta aplicación nos podría servir en un futuro para crear presentaciones de nuestro programa y cosas así. En la próxima práctica que hagamos veremos como mover el texto, es decir que gire automáticamente, así que guarden su aplicación para realizar la siguiente y pues hasta entonces chavos!
martes, 14 de febrero de 2012
Efecto Con Lineas (Versión 2)
Hola amigos! Pues vamos a continuar con las aplicaciones en C++ Builder. Y pues en esta ocasión será algo tan rápido como la aplicación que realizamos la vez anterior y de hecho como les mencione en el post pasado utilizaremos la aplicación anterior como base para realizar la de ahora. Las modificaciones que le haremos a nuestra aplicación anterior será que ahora el centro del dibujo en lugar de estar en el centro de la forma, estará en el lugar en donde coloquemos el cursor del mouse.
Bueno pues al igual que la ocasión pasada en la forma no tenemos ningún componente ya que solo trabajaremos sobre eventos de la forma.
Bueno pues para ésta aplicación abrimos el archivo H de la aplicación y en la parte de las declaraciones de usuario privadas declaramos 2 enteros, en mi caso los llamé "x" y "y", debe quedar de la siguiente manera:
private: // User declarations
int x, y;
Bueno pues ahora abrimos el evento OnPaint de la forma y colocamos el código que se muestra a continuación:
void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = x;
CentroY = y;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 10; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 10; // Incrementar el contador
}
Invalidate(); //sirve para el movimiento del centro con el mouse
this->DoubleBuffered=true; //reduce el parpadeo
}
//---------------------------------------------------------------------------
Bueno pues los únicos cambios que tenemos en el código es que al momento de calcular el centro del área de dibujo, en lugar de que sean el centro del ancho y alto de la forma serán unos valores X y Y, que es donde está ubicado el cursor del mouse. Así mismo podemos notar que al final tenemos 2 lineas de código más; la primera línea sirve para refrescar la imágen cuando se mueva el cursor dentro de la forma, y la segunda línea de código nos sirve para reducir notablemente el parpadeo, ya que sin ésta se vería de la imágen parpadearía cada vez que movamos el cursor al estarse redibujando.
Ahora abrimos el evento OnResize de la forma y escribimos lo siguiente:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Esto nos sirve para redimensionar las lineas trazadas en caso de que la ventana donde está ejecutándose la aplicación sea maximizada o cambiada de tamaño.
Finalmente abrimos el evento OnMouseMove y dentro del evento escribimos el código que a continuación tenemos:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
x = X;
y = Y;
}
//---------------------------------------------------------------------------
Con este evento lo que hacemos es obtener la posición del cursor del ratón cuando se mueve por encima de la forma y le asignamos esas posiciones a los valores enteros que antes ya habiamos declarado, después esos valores entero se asignan a el centro del área de dibujo para que se muevan las lineas cada vez que se mueve el cursor.
Ahora finalmente compilamos y corremos nuestra aplicación y debe verse algo por el estilo:
Bueno amigos pues analizen el código y entiendanlo ya que es importante que sepan que es lo que se está haciendo y porqué se esta haciendo, y pues piensen en que otras modificaciones podrían hacerse a la aplicación y traten de hacerlo. Eso es todo por hoy y nos vemos la próxima ocasión para continuar con más aplicaciones en C++ Builder, hasta la próxima amigos!!!.
Bueno pues al igual que la ocasión pasada en la forma no tenemos ningún componente ya que solo trabajaremos sobre eventos de la forma.
Bueno pues para ésta aplicación abrimos el archivo H de la aplicación y en la parte de las declaraciones de usuario privadas declaramos 2 enteros, en mi caso los llamé "x" y "y", debe quedar de la siguiente manera:
private: // User declarations
int x, y;
Bueno pues ahora abrimos el evento OnPaint de la forma y colocamos el código que se muestra a continuación:
void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = x;
CentroY = y;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 10; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 10; // Incrementar el contador
}
Invalidate(); //sirve para el movimiento del centro con el mouse
this->DoubleBuffered=true; //reduce el parpadeo
}
//---------------------------------------------------------------------------
Bueno pues los únicos cambios que tenemos en el código es que al momento de calcular el centro del área de dibujo, en lugar de que sean el centro del ancho y alto de la forma serán unos valores X y Y, que es donde está ubicado el cursor del mouse. Así mismo podemos notar que al final tenemos 2 lineas de código más; la primera línea sirve para refrescar la imágen cuando se mueva el cursor dentro de la forma, y la segunda línea de código nos sirve para reducir notablemente el parpadeo, ya que sin ésta se vería de la imágen parpadearía cada vez que movamos el cursor al estarse redibujando.
Ahora abrimos el evento OnResize de la forma y escribimos lo siguiente:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Esto nos sirve para redimensionar las lineas trazadas en caso de que la ventana donde está ejecutándose la aplicación sea maximizada o cambiada de tamaño.
Finalmente abrimos el evento OnMouseMove y dentro del evento escribimos el código que a continuación tenemos:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
x = X;
y = Y;
}
//---------------------------------------------------------------------------
Con este evento lo que hacemos es obtener la posición del cursor del ratón cuando se mueve por encima de la forma y le asignamos esas posiciones a los valores enteros que antes ya habiamos declarado, después esos valores entero se asignan a el centro del área de dibujo para que se muevan las lineas cada vez que se mueve el cursor.
Ahora finalmente compilamos y corremos nuestra aplicación y debe verse algo por el estilo:
Bueno amigos pues analizen el código y entiendanlo ya que es importante que sepan que es lo que se está haciendo y porqué se esta haciendo, y pues piensen en que otras modificaciones podrían hacerse a la aplicación y traten de hacerlo. Eso es todo por hoy y nos vemos la próxima ocasión para continuar con más aplicaciones en C++ Builder, hasta la próxima amigos!!!.
lunes, 13 de febrero de 2012
Efecto Con Lineas
Hola de nuevo amigos!! Bueno pues es hora de continuar con más aplicaciones en C++ Builder, en esta ocasión realizaremos una aplicación bastante sencilla y muy rápida.
Para este programa no utilizaremos ningún componente aparte de la forma, ya que todo lo que haremos será trazar lineas y aprovechar el escalonamiento que se produce en el trazo de las mismas para obtener un efecto en la salida.
Bueno pues lo primero es después de haber creado una nueva aplicación, abrir el evento OnPaint de la forma y en el escribir el siguiente código:
void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = ClientWidth / 2;
CentroY = ClientHeight / 2;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 4; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 4; // Incrementar el contador
}
}
//---------------------------------------------------------------------------
De esta manera dibujamos las lineas con el efecto que deseamos.
Ahora abrimos el evento OnResize también de la forma y colocamos el código que tenemos a continuación:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto se redimensionan las lineas que dibujamos en la forma en caso de que esta se maximíze o se cambie de tamaño.
Finalmente compilamos y corremos nuestra aplicación y tenemos que tener como resultado algo como lo que enseguida se muestra:
Bueno pues por esta ocasión es todo, ¿verdad que estuvo muy fácil?. Pues así poco a poco iremos aprendiendo cosas más difíciles. Por ultimo guarden la aplicación que realizaron porque la necesitaremos para la próxima ocasión trabajar sobre ella y hacerle unas pequeñas modificaciones para obtener resultados diferentes. Hasta pronto y sigan practicando programación chavos.
Para este programa no utilizaremos ningún componente aparte de la forma, ya que todo lo que haremos será trazar lineas y aprovechar el escalonamiento que se produce en el trazo de las mismas para obtener un efecto en la salida.
Bueno pues lo primero es después de haber creado una nueva aplicación, abrir el evento OnPaint de la forma y en el escribir el siguiente código:
void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = ClientWidth / 2;
CentroY = ClientHeight / 2;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 4; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 4; // Incrementar el contador
}
}
//---------------------------------------------------------------------------
De esta manera dibujamos las lineas con el efecto que deseamos.
Ahora abrimos el evento OnResize también de la forma y colocamos el código que tenemos a continuación:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto se redimensionan las lineas que dibujamos en la forma en caso de que esta se maximíze o se cambie de tamaño.
Finalmente compilamos y corremos nuestra aplicación y tenemos que tener como resultado algo como lo que enseguida se muestra:
Bueno pues por esta ocasión es todo, ¿verdad que estuvo muy fácil?. Pues así poco a poco iremos aprendiendo cosas más difíciles. Por ultimo guarden la aplicación que realizaron porque la necesitaremos para la próxima ocasión trabajar sobre ella y hacerle unas pequeñas modificaciones para obtener resultados diferentes. Hasta pronto y sigan practicando programación chavos.
Suscribirse a:
Entradas (Atom)