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 siguiente |