Botones, colores y figuras en AppInventor
Buenos días o tardes, en donde quiera que se encuentren, en este tutorial vamos a aprender a dibujar en AppInventor, pero no a pulso, sino que con líneas y círculos, cambiando detalles como el color, el grosor, y agregando botones para todo eso, y para borrar todo.
Para esto en la pestaña disposición, tendremos que arrastrar el lienzo a la pantalla del celular, y luego de esto, agregar los botones que usaremos. La forma de poner más de un botón en una misma fila es usando disposiciones horizontales, en las cuales podremos acumular botones, los que queramos hasta que ya no sea posible agregar más por el tamaño. Lo que haremos será poner dos disposiciones horizontales arriba del lienzo, y dentro de ellas pondremos 3 botones en la primera y 4 botones en la segunda. En la primera fila, pondremos los botones línea y circunferencia (que nos permitirán cambiar a ese tipo de figura), borrar (para borrar lo que hayamos hecho); y en la segunda fila pondremos los botones agrandar y achicar (para aumentar o disminuir el grosor del lápiz), color (para cambiar el color del lápiz) y color lienzo (para cambiar el color de fondo). Como este es un tutorial temprano, solo habrá dos opciones de colores para cada uno, pero dejando en claro que si se quiere, se pueden utilizar todos los que se quieran. La pantalla de la aplicación debe quedar de esta forma:
Luego, estamos listos para empezar con los bloques. La dificultad que posee este tutorial básicamente recae en una cosa: la cantidad de variables que posee. Tanto la línea como la circunferencia requieren de un punto de inicio como un punto final, ya que la distancia de eso será la línea en el primer caso, o el radio de la circunferencia en el segundo caso. Es por esto que necesitaremos las coordenadas de dichos puntos, y esas coordenadas las almacenaremos en variables, de la siguiente forma:
Por otro lado, necesitaremos otra variable que nos diga si el click que hacemos en la pantalla es un click inicial o un click final, para almacenarlos en las variables que mencionamos anteriormente. Esto lo haremos con una variable booleana, que partirá en falso, y que al hacerle click por primera vez, se convertirá en verdadero, y por segunda vez volverá a su estado original:
Finalizando la declaración de variables, necesitamos una que almacene la figura que fue presionada anteriormente. Por esto, crearemos la variable figura, que empezará en 1, lo que significa que se dibujará una línea, pero si apretamos el botón de circunferencia, cambie a 2, lo que permita realizarla. Estos bloques quedarán así:
Para seguir con los botones, que es la parte sencilla del trabajo, programaremos los bloques de agrandar y achicar grosor de línea. Estos son muy sencillos, pues solamente tienen un bloque en su interior, y quedan así:
Luego, veremos el botón para borrar, o dejar el lienzo como estaba al principio. Esto lo haremos con el siguiente bloque, nuevamente muy sencillo:
Y por último, los botones de cambio de color. Como dijimos al principio, tendrán una variación de 2 colores, el inicial y uno alternativo. El algoritmo acá comprobará si es un color, y si lo es, cambiará al otro. Ambos quedarán así:
Con eso, tendremos todos los botones utilizables, por lo que podemos empezar a trabajar en el plato fuerte de este tutorial, que es la capacidad de hacer una figura en el lienzo. Como dijimos que la figura iba a ser con dos clicks, el algoritmo se iniciará cuando se presione en el lienzo. Para esto se ocupará:
Y luego se inicializará el algoritmo con las instrucciones que dimos más arriba: si la variable figura es 1, la figura será una línea, y si la variable activado es falsa, es el primer click, si es verdadera, es el segundo, que quedará así:
Pero, nos falta una cosa: ¿qué pasa cuando la figura no era una línea, sino que una circunferencia? Como la variable figura sería 2, no entraría a esta parte del algoritmo, así que entraría al "sino", que tendría que ponerse más abajo que el bloque anterior, y este bloque quedaría así:
Y el bloque del radio, que en la imagen sale cortado, es simplemente una implementación del Teorema de Pitágoras en nuestra aplicación: el radio, será la raíz cuadrada de la suma entre las diferencias de los componentes al cuadrado, o en términos más simples:
Con eso, nuestro tutorial está listo. Si quieres aventurarte más, puedes poner más opciones de colores, o bien tratar de incursionar con más figuras que se hagan a la vez, como ángulos, o con más botones con diferentes funciones. ¡Espero lo hayas disfrutado!
Comentarios
Publicar un comentario