Taller 2: Creacion de dibujos

En esta actividad aprenderás a crear un aplicación, que nos permita dibujar y realizar figuras con él.

Para crear nuestro aplicación vamos a abrir un nuevo proyecto qué le pondremos dibujo luego cambiamos el idioma y comenzamos a crear, para ello insertamos disposición horizontal a la pantalla del el teléfono luego le cambiamos ancho ajustar contenedor.

Luego de haber ajustado el ancho insertamos tres botones en la disposición horizontal le cambiaremos el nombre a cada botón por un color correspondiente es decir amarillo, rojo y azul al cambiar el nombre de los botones nos iremos a la parte de propiedades y ajustaremos el color de fondo, que sería el color que correspondiente a cada nombre y cambiamos el texto( texto para botón 1) a el nombre del color.

Luego insertamos un deslizador lo buscamos en la columna izquierda donde está la paleta y todo lo interfaces y ajustamos el ancho a ancho de contenedor cambiamos el nombre de deslizador por tamaño de pincel.

Insertamos un lienzo el cual será donde dibujaremos, luego ajustamos ancho a ajustar al contenedor y largo 250 pixeles.

Agregamos una disposición tabular y tres botones extra a la parte de abajo de nuestro Lienzo los cuales le cambiaremos los nombres por sello guardar y limpiar , nos servirán para tener las posibilidad de borrar lo que hemos dibujado o guardar, también ajustamos el nombre del botón en las propiedades tal como lo hicimos anteriormente.

Agregaremos una etiqueta uno y un selector de imagen, donde a este le cambiaremos el nombre por fondo y en las propiedades a agregar imagen, donde podremos insertar una imagen desde la galería del celular y dibujar sobre ella.

Teniendo listo ya todos los componentes que formaran nuestro lienzo de dibujo, procederemos a programar los bloques que nos ayudarán a que estos componentes funcionen.

Primero seleccionamos el bloque cuando lienzo 1 tocar, y le encajamos el bloque de llamar Lienzo1 dibujar círculo.

Procedemos a apretar x y encajamos el bloque encajar x en el primer espacio que nos sale, repetimos este paso con el y, en radio agregamos bloque matemático 10 y por último agregamos bloque de lógica con cierto

No olvides guardar el proyecto para que no se borre

Ahora, programamos  los bloques del color, para qué cuando se dibuje sea con el color a preferencia, para ello agregamos un bloque cuando(color) clic, y agregamos luego poner lienzo 1 y color de pintura y luego agregamos el color correspondiente al nombre, luego le damos duplicar y editamos y agregamos los otros colores.

Procedemos a programar el pincel, que nos permitirá cambiar el grosor para poder dibujar para ello seleccionamos cuando tamaño_pincel posición cambiada,y adjuntamos poner lienzo 1, ancho de línea, como tomar posición del pulgar

 

Ahora haremos que nuestros botones de guardar limpiar y sello funcionen, para ello seleccionamos la función cuando y luego poner, tal como sale en la siguiente imagen, como observación en botón limpiar que es para borrar y arreglar lo que hemos dibujado debemos realizar algo similar como hicimos con los colores del pincel.

Luego procedemos a adjuntar los bloques para formar sello, para ello agregamos cuando sello clic y luego adjuntamos un bloque de condición SI ENTONCES (es decir si pasa esto resulta esto otro) luego agregamos un SI NO

Y por último agregamos los bloques que permiten dibujar en el lienzo 1, guíate por la siguiente imagen:

Y con esto terminamos de hacer nuestra aplicación para dibujar, más abajo te enseñaré a cómo poder realizar figuras geométricas usando los mismos componentes y agregando unos nuevos.

Para está segunda parte, podemos crear un nuevo juego o agregar una ventana al proyecto que ya estábamos construyendo, para ello vamos a instalar en la pantalla diseñador, un lienzo con ancho ajustado al contenedor y alto en 250 pixeles, una disposición horizontal en la parte superior de la pantalla, con botones de color y limpiar (tal como lo hicimos más arriba), y en la parte inferior colocaremos una disposición horizontal con los botones circunferencia y línea, no olvides cambiar los nombres y tamaños de cada uno, tanto en propiedades, cómo el nombre del componente. Más agregaremos un deslizador que cambiará el tamaño de nuestro lápiz; dentro del lienzo colocarás una sprite-imagen que será nuestro lápiz y puedes adjuntarle una imagen en las propiedades y debes adaptar su tamaño a menos de 50 pixeles.

Luego procedemos a bloques para poder programar las funciones, empezaremos creando las variables que serán útiles para los inicios y que funcione cada cosa, añadiremos 3 bloques de inicializar global, donde le pondremos por nombre inicio_x, inicio_y e activado. Adjuntando bloques matemáticos en 0 en los dos primeros, y en activado un bloque lógica de falso.

Luego a estos bloques de inicio claramente debemos adjuntar uno de final.

Ahora para que el botón línea funcione, debemos tomar estos elementos creados e insertarlos en bloques de condición, si sucede esto, debe pasar está cosa, si no, debe suceder esta otra. Para ello tomamos el primer bloque de cuando lienzo1. Tocar luego adjuntamos el si entonces, y los bloques que salen a continuación, posterior a eso un si no adjuntado con un nuevo si entonces, con los demás bloques, y luego llamar a lienzo 1 y dibujar línea que será cuando se active propiamente tal está función; para el caso de la circunferencia le daremos duplicar pero solo el bloque de color morado cambiaremos dibujar lineal por dibujar círculo.

Para hacer funcionar el radio de este bloque, debemos realizar unos ciertos ajustes a iniciar global, debemos dejar 1 para línea y 2 para circunferencia, para que se puedan distinguir los procesos, luego crear bloque de iniciar global radio y debemos usar la siguiente fórmula ( para efecto de calculo de distancias desde el punto inicio y el punto final: 

Si programamos estos bloques nos debería quedar así:

Ahora procedemos a realizar la programación de los botones de color y limpiar, se realiza tal cual cómo está indicado más arriba con la diferencia de que en limpiar en vez de color de pintura, lo dejamos como color de fondo para que quede la pantalla borrada completamente

Por último agregaremos la función del deslizador (tal como se hizo más arriba en la primera parte)y para ello sigue la imagen para que tú puedas programarlo

Ya teniendo todo esto, ya estas listo para ir a emular la aplicación, recuerda que en cada proceso vayas guardando el trabajo para que así no debas comenzar de nuevo por algún imprevisto.

Si tienes alguna duda haz clic AQUÍ donde te llevará al formato aia, donde al descargarlo y abrirlo en mit app inventor, podrás revisar lo que se realizó en esta actividad.