Dibujar con AppInventor Objetivo: Dibujar figuras geométricas con el Lienzo o Canvas en una aplicación de appinventor. Desarrollar una aplicación básica que permita dibujar segmentos, círculos y circunferencias.
Dibujando a mano alzada Todo dibujo de línea o circulo que se realice en el Screen debe estar contenido en un lienzo. Seleccione en Paleta / Dibujo y animación
Arrate el Lienzo al Screen1.
En propiedades del Lienzo cambiar el Alto y Ancho por Ajustar por Ajustar al contenedor .
Nótese que el contenedor en la pantalla es nuestro celular virtual. El Lienzo es el único que puede dibujar puntos, líneas, círculos o circunferencias, cambiar el color de un objeto, entre otras herramientas que puede modificar. Para dibujar a mano alzada, es decir, tocar la pantalla del móvil y arrastrar el dedo, basta cargar el bloque Cuando Canvas1 .Arrastrado
Luego debemos llamar a que Canvas1 dibuje una línea, para ello cargamos el bloque
Experimenta con los valores XInicial valores XInicial,, YInicial, XActual e YActual para x1,y1,x2 x1,y1,x2 e y2 respectivamente y observa lo que ocurre
Cambia nuevamente los valores de XInicial de XInicial e YInicial YInicial por por XPrevio XPrevio e YPrevio YPrevio y y observa lo que ocurre. En el modo de Diseño agrega dos botones para cambiar el colora 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 Screen 1
Luego arrastra dos botones , que se encuentran en Interfaz de usuario , al contenedor DisposiciónHorizontal. En propiedades cambiar el color de los botones y agregar texto correspondiente a cada color.
El algoritmo para cambiar el color mientras dibujamos en el Screen 1 es el siguiente “cuando hacemos clic en el botón , el Lienzo cambia el color de la pintura por el color X ” Ir a modo Bloques para cargar los bloques correspondientes.
El resultado es el siguiente
Ejercicio: Crear una aplicación que permita dibujar a mano alzada, cambiando el color y el ancho de la línea. Subir la aplicación al buzón con nombre tu apellido
Dibujando segmentos de rectas Todo dibujo de línea o circulo que se realice en el Screen debe estar contenido en un Lienzo. Seleccione en Paleta / Dibujo y animación en el modo Diseño
Arrate el Lienzo al Screen1.
En propiedades del Lienzo cambiar el Alto y Ancho por Ajustar por Ajustar al contenedor .
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 como se indica en la siguiente figura
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 .Tocar que permite capturar el evento de tocar el Screen
El algoritmo para dibujar una línea será el siguiente: SI la variable activo es activo es falsa falsa entonces entonces estamos realizando el primer toque a la pantalla por lo tanto debemos almacenar las coordenadas en inicio_x e inicio_y y cambiamos cambiamos el estado de la variable activado, 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 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
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 botón este cambia el valor por la figura correspondiente correspondiente
Agregar el código correspondiente para dibujar un segmento o una circunferencia. El algoritmo de la circunferencia circunferencia es análogo al de la línea solo cambia cambia la llamar Canvas1. DibujarCirculo
En este caso se construye una circunferencia con centro (centerX, centerY) y el radio, que corresponde al punto de inicio 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,
= √ ( ( − − )2 + ( ( − )2
es decir,
Busca la raíz cuadrada, potencia, diferencia y suma en el boque de Matemática. El resultado final es el siguiente
