En una ventana se puede dibujar, pero también se puede crear una área de dibujo dentro de la ventana, y dibujar allí
Un área de dibujo es un área en la ventana donde se pueden dibujar gráficos, o colocar imágenes
Para esto se usa el nuevo tipo de dato drawing:
drawing d
Para crear una nueva área de dibujo se utiliza la función: newdrawings
drawing newdrawing(rect r, drawfn fn);
Donde r es el rectángulo que define la nueva
área de dibujo y
fn es un procedimiento que debe ser creado por
el cliente. Especifica que "tarea" ejecutar cuando se cree la nueva area de dibujo
Este procedimiento debe recibir la nueva área de dibujo y el rectángulo de dicha área
Área solo de Dibujo
Hay muchas mas funciones, para trabajar con rectángulos y puntos, revisemos las mas importantes
Todo objeto esta encerrado en un rectángulo. Para encontrar el rectángulo de un objeto r = getrect(obj)
Para crear un rectángulo justo en el centro de otro r = insetr(r,1)
Encontrar el punto medio entre dos puntos p = midpt(p1,p2)
Centrar un rectángulo en otro con r = rcenter(z,r)
Puntos y Rectángulos
Ejemplo: Área De Dibujo
#include "graphapp.h"
void DibujarEnAD(drawing d, rect r);
void main(){
window w;
drawing d;
rect r;
w = newwindow("Rectangles", rect(50,50,150,200),
StandardWindow);
setbackground(w, LightGrey);
r = rect(10,10,100,100);
d = newdrawing(r, DibujarEnAD);
show(w);
mainloop();
}
void DibujarEnAD(drawing d, rect r){
setcolour(Red);
drawrect(r);
setcolour(Blue);
fillrect(rect(10,40,80,10));
}
Se desea crear un ventana con nombre "Mi Dibujo".
El color de fondo de dicha ventana debe ser gris.
En un área de dibujo de 100 x 100, cuyo fondo debe ser rojo, se desea dibujar un circulo de color azul.
En las diagonales del área de dibujo se debe dibujar dos líneas de color verde.
Un Dibujo más Elaborado
La Solución
#include "graphapp.h"
void DibujarEnAD(drawing d, rect r);
void main(){
window w;
drawing d;
rect r;
w = newwindow("Rectangles", rect(50,50,150,200),StandardWindow);
setbackground(w, LightGrey);
r = rect(10,10,100,100);
d = newdrawing(r, DibujarEnAD);
show(w);
mainloop();
}
void DibujarEnAD(drawing d, rect r){
setcolour(Red);
fillrect(r);
setcolour(Blue);
fillellipse(insetr(r,4));
setcolour(Green);
drawline(pt(r.x,r.y),
pt(r.x+r.width,r.y+r.height));
drawline(pt(r.x,r.y+r.height),
pt(r.x+r.width,r.y));
}
Cambiar color del fondo de la ventana w
Se crea y dibuja en la nueva área de dibujo d, de tamaño dado por r
Para acceder a las coordenadas x y y de un rectángulo r se usa r.x y r.y
Para acceder al ancho y alto r.width y r.height
Insetr(r,4) crea un rectángulo dentro de r, con 4 píxeles de espacio de separación
fillellipse rellena la elipse dentro de este nuevo rectángulo
Hemos visto que hay ocasiones en las que se condiciona la ejecución de una "tarea".
En el caso de la ventana, dijimos que si se deseaba ejecutar una "tarea" cuando se dibuje una ventana se usaba setredraw
En el evento de redibujar ventana, se debe ejecutar esa tarea
Existen muchos eventos, un evento popular es hacer click con el mouse sobre alguna ventana
Otro evento es arrastrar el mouse, u aplastar una tecla del teclado
La librería graphapp permite a través de funciones, asociar "tareas" a estos eventos
Cuando el evento se "dispare", es decir, se de, se ejecutara dicha tarea
Eventos
Al trabajar con el mouse, se pueden "disparar" varios eventos
mousedown, se refiere a cuando se aplasta un botón del mouse pero aun no se suelta.
mousedrag, se refiere a cuando se mueve el puntero del mouse mientras se tiene un botón aplastado.
mousemove, cuando se "pasa" el puntero del mouse por una zona
mouseup, cuando se suelta el botón del mouse.
mouserpeat, cuando se mantiene aplastado un cierto tiempo, un botón del mouse.
Dibuje una ventana con un área de dibujo. En esa área se dibujara usando el mouse:
Al usar el botón izquierdo, se dibujara con Rojo
Al usar el botón derecho, se dibujara con Azul
Eventos Del Mouse
Para asignar una "tarea" a los eventos al usar el mouse, existen respectivamente:
void setmousedown(control c, mousefn fn);
void setmousemove(control c, mousefn fn);
void setmousedrag(control c, mousefn fn);
void setmouseup(control c, mousefn fn);
void setmouserepeat(control c, mousefn fn);
Donde c es cualquier ventana o área de dibujo o control y
fn es la función que representa la "tarea" que se va a ejecutar cuando se dispare el evento.
Debe ser un procedimiento y recibe el dibujo sobre el que se trabaja, el botón que se aplasto y el punto en el que se dio el evento.
Usando el Mouse
Solución
#include "graphapp.h"
void DibujarPunto(drawing d, int buttons, point p);
void main()
{
window w;
drawing d;
w = newwindow("Dots", rect(50,50,200,200), StandardWindow);
d = newdrawing(rect(10,10,180,180), NULL);
setbackground(w, LightGrey);
setmousedown(d, DibujarPunto);
setmousedrag(d, DibujarPunto);
show(w);
mainloop();
}
void DibujarPunto(drawing d, int buttons, point p){
if (buttons & LeftButton)
setcolour(Red);
else if (buttons & MiddleButton)
setcolour(Green);
else if (buttons & RightButton)
setcolour(Blue);
drawpoint(p);
}
Cuando se aplasta un botón del mouse, ejecute DibujarPunto
Cuando se arrastre el puntero del mouse, ejecute DibujarPunto
Si se aplasto el botón Izquierdo, cambie a color Rojo
Dibuje el punto
Al trabajar con el teclado, también se pueden disparar eventos:
"Aplastar" una tecla de un carácter ASCII(keydown).
"Aplastar" una tecla no ASCII(las teclas para flechas, o las teclas funcionales).
Para poder asignar tareas a cada uno de estos eventos graphapp tiene a disposición las siguientes funciones:
void setkeydown(control c, keyfn fn);
void setkeyaction(control c, keyfn fn);
Donde c es cualquier ventana, área de dibujo o control sobre la cual se esta trabajando y
fn es el procedimiento que representa la tarea que debe ejecutarse cuando se "dispare" el evento.
Este procedimiento debe recibir un control y el entero que representa la tecla "aplastada".
Eventos del Teclado
Dibuje un área de dibujo dentro de una ventana.
"Sense" cada carácter que se teclea y lo dibuje en la area de dibujo
Usando el Teclado
Para poder resolver este ejercicio, debemos aumentar nuestros conocimientos de ciertas librerías
En una ventana se puede dibujar texto usando
int drawstr(point p,string s);
Cuando se "aplaste" una tecla, sabremos el codigo ascii de la misma, este habra que convertirlo a texto
Podemos usar la función CharToString(char c) de la librería strlib
Para poder dibujar las letras tecleadas una tras otra, debemos mover la coord en x, pero cuanto?
Lo ideal seria, moverla dependiendo del ancho de la ultima letra dibujada
Esto se puede saber con
int strwidth(font f, string s);
Antes De Solucionar
Solución
#include < graphapp.h>
#include < genlib.h>
#include < strlib.h>
void Dibujar(drawing d, int key);
point pactual;
main(){
window w,w2;
drawing d;
w = newwindow("Press a Key", rect(50,50,200,200),
StandardWindow);
d = newdrawing(rect(10,10,180,180), NULL);
pactual = pt(0,0);
setbackground(w, LightGrey);
setkeydown(d, Dibujar);
show(w);
mainloop();
}
void Dibujar(drawing d, int key){
string s;
int w;
s = CharToString(key);
w = strwidth(currentfont(),s);
if (pactual.x + w >= getwidth(d)){
pactual.x = 0;
pactual.y = pactual.y +getheight(currentfont());
}
drawstr(pactual,s);
pactual.x = pactual.x+w;
}
Pactual es un dato "global", valido en todas las funciónes del programa
Cada vez que se "digite" una tecla, se ejecutara el procedimiento Dibujar
Se cambia el código ascii, a una cadena
Tomamos el ancho de esta letra, usando la fuente actual (currentfont())
Se dibuja la letra en el punto actual usando drawstr
Los controles en Windows, son todos aquellos objetos que nos permiten "controlar" nuestra ambiente de trabajo:
Cajas de texto, permiten ingreso de información
Botones, para confirmación o ejecución de procesos
Checkboxes, pequeñas cajas, que permiten elegir una o mas opciones
Radiobuttons, permiten elegir entre varias, una sola opción
Menús, nos muestran las opciones mas generales que ofrece una aplicación
Entre otros. existen muchos mas controles
Para graphapp, una ventana, y un área de dibujo, representan controles también
Controles
Cada control para graphapp es un nuevo tipo de dato
label, para declarar una nueva "etiqueta", texto que el usuario no podra editar:
label l;
checkbox, para declarar una nueva cajita en la que se puede elegir o no una opción
checkbox ch;
field, para declarar un área en la que se puede escribir solo una línea de texto
field fl;
textbox, para declarar un área de texto, mas de una línea
textbox tx;
button, para declarar un botón
button bt;
radiobutton, para declarar una opción que puede ser elegida entre otras
radiobutton r;
Usando Controles
funciones para añadir controles a una ventana
label newlabel(string text, rect r, int alignment);
Crea una etiqueta con texto text, dentro del rectángulo r
checkbox newcheckbox(string text, rect r, actionfn fn);
Crea una checkbox detro de r, y junto a este, un texto
fn representa la "tarea" que debe ejecutarse cuando se de click sobre la caja de texto
button newbutton(string text, rect r, actionfn fn);
Crea un botón con un texto, dentro de r
fn representa la "tarea" que debe ejecutarse cuando se de click sobre el boton
radiobutton newradiobutton (char *text, rect r, actionfn fn);
Crea un radiobutton dentro del rectángulo r, y junto un texto text
fn representa la "tarea" que debe ejrcutarse cuando se de click sobre el radiobutton
Las siguientes crean áreas de "escritura", en un rectangulo r,y con un texto inicial text
field newfield (string text, rect r);
textbox newtextbox (string text, rect r);
textbox newtextarea (string text, rect r);
Para Crear Controles
Para checkbox y radiobutton
Este tipo de controles sirven para elegir opciones, podemos saber si estan "elegidos"(ischecked), podemos elegirlos(check), o cambiar de opinion(uncheck)
int ischecked(checkbox c);
int ischecked(radiobutton r);
void check(checkbox c);
void check(radiobutton r);
void uncheck(checkbox c);
void uncheck(radiobutton r);
Para checkbox, radiobutton, textbox, field, label y button
Estos controles van acompañados de algun texto, este puede ser modificado, o consultado
void settext(control c, string newtext);
string gettext(control c);
Controlando Los Controles
Crear la siguiente ventana
Al elegir una opción, debe mostrarse en la parte superior de la ventana
Al dar click sobre el botón quit, el programa debe terminar
Ejemplo: Uso De Controles
#include < graphapp.h>
#include < genlib.h>
#include < strlib.h>
void MostrarEleccion(checkbox c);
void Salir(void);
label l;
main()
{
window w;
checkbox c1, c2;
button b;
w = newwindow("Pizza", rect(0,0,200,200), StandardWindow);
c1 = newcheckbox("Jamon", rect(10,50,160,25), MostrarEleccion);
c2 = newcheckbox("Hongos", rect(10,90,160,25), MostrarEleccion);
b = newbutton("Quit", rect(10,170,80,30), Salir);
l = newlabel("",rect(0,0,100,50),AlignTop);
show(w);
mainloop();
}
void MostrarEleccion(checkbox c){
if (ischecked(c)){
settext(l,Concat("Desea ", gettext(c)));
}
else{
settext(l,Concat("Ya no desea ", gettext(c)));
}
}
void Salir(button b){
exitapp();
}
Cuando se de click sobre c2 y c1 se ejecutara el procedimiento MostrarEleccion
Se cambia el texto del label l, para que muestre la nueva elección
Termina la aplicación Grafica
 Página anterior | Volver al principio del trabajo | Página siguiente  |