Dibujar con AppInventor

Objetivo: Dibujar figuras geométricas con el Lienzo o Canvas en una aplicación de app-
inventor.

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 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, YInicial, XActual e YActual para x1,y1,x2 e y2
respectivamente y observa lo que ocurre

Cambia nuevamente los valores de XInicial e YInicial por XPrevio e YPrevio 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 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 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 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 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
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, 𝑟𝑎𝑑𝑖𝑜 = √(𝑖𝑛𝑖𝑐𝑖𝑜𝑥 − 𝑓𝑖𝑛𝑥 )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