AppInventor: App dibujando a mano alzada

DIBUJANDO FIGURAS GEOMÉTRICAS

Objetivo: Crear una aplicación que permita dibujar a mano alzada segmentos, círculos y circunferencias, cambiando el color y el ancho de la línea.

Como vimos anteriormente en la sección Dibujar a mano alzada, para poder dibujar debemos incluir un lienzo, el cual ajustamos al contenedor en su alto y ancho.

Para dibujar un segmento de recta es necesario indicar el punto de inicio y punto final. De lo anterior debemos inicializar tres variables: inicio_x, inicio_y y activado.

Las variables inicio_x e inicio_y almacenarán las coordenadas del punto de inicio, que es la posición del punto se obtiene cuando se toca por primera vez la pantalla del móvil. Estas serán variables globales de manera que sean reconocidas por todos los bloques y objetos. Serán inicializados en (0,0) que es el origen correspondiente al extremo superior izquierdo del Screen.

La variable activado cambia su estado a cierto después de hacer el primer toque en la pantalla y volverá a cambiar después de dibujar la línea. Es decir, nos indica si se está en modo de dibujar el segmento o no, o de otro modo, si se comenzó a dibujar el segmento.

Para poder realizar lo anterior debemos dirigirnos a Bloques, para comenzar a programar, pinchamos en variables.

Arrastramos al visor tres veces el bloque Inicializar global. como.

El primero lo nombramos inicio_x, el segundo inicio_y y por último activado.

Luego, en inicio_x y inicio_y enganchamos el valor 0, nos dirigimos Integrados/matemáticas.

En Integrados/Lógica seleccionamos falso para engancharlo en activado.

Así como creamos las variables anteriores, debemos definir la variable fin_x y fin_y, quedando de la siguiente forma:

Al tocar la pantalla del celular para indicar el inicio y fin del segmento agregaremos el bloque cuandoLienzo1 .Tocar que permite ver el rastro en el Screen1.

ALGORITMO: SI la variable activo es falsa entonces estamos realizando el primer toque a la pantalla por lo tanto debemos almacenar las coordenadas en inicio_x e inicio_y y cambiamos el estado de la variable activado, ya entramos en modo de crear el segmento. Si no preguntamos por la variable activado nuevamente para saber si estamos en modo segmento, si es cierta entonces estamos en el segundo toque, por lo tanto debemos almacenar las coordenadas del segundo toque en las variables fin_x y fin_y. Y luego llamar a lienzo para que dibuje la línea. Después de dibujar la línea cambiamos el estado de la variable activado.

En Integrados/Control, seleccionar el bloque si entonces sino

Integrados/Lógica buscar el bloque

el cual debe ser anclado en el bloque anterior en si. En el actual bloque, seleccionamos desde Integrados/Variables tomar global activado para arrastrarlo al lado izquierdo, mientras que el lado derecho ponemos el bloque falso.

En entonces arrastramos los bloques desde Integradudos/Variables poner global inicio_x a tomar x, poner global inicio_y a tomar y y poner global activado a cierto.

Los tomar x, tomar y los seleccionamos desde el bloque CuandoLienzo1.Tocar

En sino anclamos el bloque si entonces, en el si duplicamos el bloque del si anterior, sin embargo, cambiamos el falso por cierto. Duplicamos los bloques poner global inicio_x a tomar x, poner global inicio_y a tomar, lo anclamos en entonces, pero además debemos buscar en Lienzo1 el bloque llamar Lienzo1.DibujarLinea. En x1 anclamos tomar global inicio_x, en x2 tomar global inicio_y, en x2 tomar global fin_x y en y2 tomar global fin_y.

Agregue dos botones para cambiar el tipo de figura geométrica; una para línea y otra para circunferencia, tal como se realizó en el caso anterior para cambiar de color. De igual manera agrega los botones de color.

Para conocer qué tipo de figura geométrica que se dibujará, necesitamos una variable que indique qué botón es el activo. Crear la variable figura e inicializarla en 1 para indicar que se dibujará una línea, en caso de círculo su valor deberá ser 2

Como vimos en la sección anterior con los botones de colores usamos el bloque Llamar Lienzo1.DibujarLinea, para dibujar lineas, pero para realizar circunferencias usaremos el bloque Llamar Lienzo1DibujarCirculo. Además, debemos agregar la variable radio.

En este caso se construye una circunferencia con centro (centerX, centerY) y el radio, que corresponde al punto de inicio (que es el centro) y el radio que es el segmento.

El radio deberá calcularse mediante la distancia entre las coordenadas de punto de inicio y el punto final del radio,

Debemos buscar en Integrados/Matemáticas la raíz, potencia, diferencia y suma.

El bloque nos queda de la siguiente forma:

Agregaremos un botón "Borrar" para cuando hagamos clic en este, se borre cualquier dibujo del lienzo, es decir, empezaremos de cero. Para esto, debemos crear un botón, y en propiedades asignar el nombres "Borrar".

En bloques, seleccionamos botón borrar y arrastramos el bloque cuando Borrar.Clic, luego seleccionamos Lienzo 1 y arrastramos el bloque llamar Lienzo1.Limpiar y lo anclamos con el anterior como muestra la siguiente imagen.

También pondremos un lápiz en nuestro Lienzo1, para esto arrastraremos una SpiteImagen, y desde nuestro ordenador subiremos una imagen de un lápiz a elección. En este caso, modifiqué las propiedades a conveniencia

Para que el lapiz se mueva con el movimiento que hagamos en el touch de nuestros celulares debemos programar que se mueva, para esto nos vamos a bloques. Seleccionamos Lápiz arrastramos el bloque Llamar Lápiz.Mover a

Debemos crear un deslizador para que aumente el grosor del lápiz. En Interfaz de Usuario encontraremos Deslizador, el cual lo arrastraremos a la pantalla. En Bloques, debemos ingresar la nueva variable Grosor. Asignar los bloques como se muestra a continuación.