EJERCICIO 5 – Paint
En este ejercicio vamos a crear un espacio donde dibujar y pintar lo que queramos con una serie de colores que predefiniremos. Mediante un componente llamado Lienzo.
Esta aplicación va a constar de tres botones, que se encargarán de definir el color con el que se va a dibujar dentro del Lienzo.
Nos dirigimos a la barra de herramientas y en la pestaña
Proyectos escogemos la opción – Comenzar un proyecto nuevo.
Aparecerá una pantalla en la que has de introducir el nombre para esta App: Paint
Abrimos la Paleta y en la pestaña Disposición seleccionamos la Disposición Horizontal, seguidamente la arrastramos al Visor
Cambiamos tanto el texto que se muestra, como el aspecto visual de los botones. Mediante las propiedades de cada uno de los objetos, vas a modificar el color de fondo y el texto, tal y como se muestra en las imágenes.
Seguidamente agregamos el componente lienzo, desde la Paleta en el apartado de Dibujo y animación. Lo Arrastramos al Visor y establecemos sus dimensiones desde las Propiedades del Lienzo
Ahora abrimos la vista bloques y empezamos a construir nuestro código Lo primero de todo vamos a indicarle al componente lienzo, qué tiene que hacer cuando se arrastra el dedo por encima.
En este caso le diremos que genere una línea a medida que vas arrastrando el dedo por la pantalla.
Para ello selecciona el componente lienzo y busca el bloque que se muestra en la imagen.
Este bloque contiene una serie de parámetros predefinidos que aportan la información necesaria para que en este caso se dibuje una línea.
En este ejercicio vas a tener que utilizar los siguientes parámetros:
Xprevio, Yprevio, Xactual e Yactual (es decir los ejes horizontal y vertical de nuestra pantalla)
A continuación, dentro del bloque, debes escoger la instrucción morada predefinida llamada.
Una vez está agregada dentro del bloque, vas a añadir los parámetros tal y como se ve en la imagen.
Desde los parámetros integrados elegimos el bloque variables y lo arrastramos hacía nuestro bloque morado encajándolo en sus correspondientes huecos:
Por último, vamos a decirle a los botones que hemos agregado anteriormente, que establezcan el color que marca el texto, es decir, al botón Azul le dirás que establezca dicho color para que dibujes.
De este mismo modo repetirás el proceso con los tres botones. Para ellos haz clic en el componente de uno de los botones, y agrega el bloque Cuando Botón .Clic
Una vez agregado este bloque para cada botón, vas a seleccionar el componente lienzo para decirle a los botones el color de la línea específico para cada uno. Tal y como ves en la imagen,
Por último, probamos la aplicación ya sea en el emulador o en el dispositivo móvil a través de Ai companion. Guardamos el proyecto.
