APP INVENTOR, UNA HERRAMIENTA PARA APLICACIONES MÓVILES: Segmento y Circunferencia

Como ya sabemos dibujar a mano alzada, probemos dibujando segmentos de recta y una circunferencia.

Comencemos creando nuestro proyecto:

Arrastramos un Lienzo al Screen1 para dibujar, como en el caso de la Linea a mano alzada.

En el modo de Diseño agrega dos botones para cambiar el color la aplicación. Previamente los botones deben estar alineados, para ello debemos cargar un contenedor que acomoda los objetos, este se encuentra en Paleta / Disposición. Seleccione el DisposiciónHorizontal y arrástrelo a la parte superior del Screen1

Luego arrastra dos botones , que se encuentran en Interfaz de usuario, al contenedor DisposiciónHorizontal.

En propiedades cambiar el color de los botones.

Cámbiale el nombre a los botones, esto debes hacerlo en Propiedades el botón y cambiar texto para botón por los nombres de los colores.

Además agregaremos un desplazador para regular el ancho del trazo. Los valores de este son desde el 1 al 20.

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 crear las variables ir al modo Bloques y seleccionar Variables. Cargar e inicializar.

Crearemos las variables fin_x y fin_y para guardar las coordenadas del segundo toque o del fin del segmento.

Como debemos tocar la pantalla del movil para indicar el inicio y fin del segmento agregaremos el bloque cuando Canvas1 .Tocarque permite capturar el evento de tocar el Screen.

El algoritmo para dibujar una línea será el siguiente:

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. Sino 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 Canvas o lienzo para que dibuje la línea. Después de dibujar la línea cambiamos el estado de la variable activado.

La siguiente figura muestra el código

Para cargar el Si / entonces /si no ir a Control y seleccionar Si. Hacer clic en la tuerca azul para agregar si no. Arrastre el bloque si no dentro del Si en la misma caja

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.

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

Cada vez que se hace clic en un botón este cambia el valor por la figura correspondiente

Agregar el código correspondiente para dibujar un segmento o una circunferencia. El algoritmo de la circunferencia es análogo al de la línea solo cambia la llamar Canvas1.DibujarCirculo