Será una aplicación para que el usuario pinte con diferentes colores la pantalla de su dispositivo móvil empleando los dedos.

Iniciamos un proyecto nuevo llamado PaintPot. Cambiar el título de la pantalla que aparece en la barra de título del teléfono. Su valor inicial será Screen1 pero lo cambiamos por PaintPot.

Para construir esta app utilizaremos los siguientes componentes:

  1. Tres componentes Botón para seleccionar la pintura roja, azul o verde y uno DisposiciónHorizontal para organizarlos. Arrastramos el componente Botón y cambiamos su atributo Text a Rojo, el color de fondo también ha de ser rojo. Cambiar el nombre Botón1 por BotónRojo. Crear dos botones más para los colores azul y gris. Vamos a alinear los botones en la parte superior de la pantalla. en disposición arrastramos el componente DisposiciónHorizontal hasta colocarlos debajo de los botones anteriores. Modificar el ancho a Ajustar el contenedor. Movemos los tres botones hasta ponerlos dentro del componente DisposiciónHorizontal.
  2. Un componente Botón para limpiar el lienzo y otros dos para cambiar el tamaño del trazo.
  3. Un componente Lienzo que tiene una propiedad ImagendeFondo a la que asignaremos el archivo gato.jpg de la aplicación anterior. el lienzo será donde dibujemos los círculos y las líneas. Arrastramos el componente lienzo, cambiamos su nombre a LienzoDibujo. Le asignamos altura de 300 pixeles y en ancho escogemos Ajustar al contenedor. Poner como imagen de fondo a un gato. Escogemos como color de fondo el rojo. Arrastramos un nuevo componente DisposiciónHorizontal debajo del lienzo. Desplazamos cuatro componentes botón al interior de DisposiciónHorizontal. Les llamamos BotónFoto, BotónLimpiar, BotónGrande y Botón pequeño con sus respectivos textos: Foto, Limpiar, Punto grande y Punto pequeño. Desde la paleta Medios arrastramos el componente Cámara.

Pasamos a asignar comportamientos a los componentes:

  1. Lo primero que hacemos es prepararlo todo para que cuando el usuario toque la pantalla (el lienzo de dibujo) la aplicación dibuje un punto. Nos situamos en Bloques, seleccionamos LienzoDibujo y arrastramos el bloque «Cuando lienzo dibujo Tocar». X e y indicarán el punto de la pantalla que ha tocado el usuarioArrastra ahora el bloque «Llamar lienzo dibujo Dibuja círculo». Center x y center y indican donde se dibujará el círculo y radius su radio. en x e y de LienzoDibujo, situarse en la x, escoger Tomar x y arrastrarlo a center x. hacer lo mismo con la y.
  2. Tendremos que determinar el radio del círculo que trazará la aplicación. Como unidad de medida usaremos el pixel, que es el punto más pequeño que se puede dibujar en una pantalla. Le asignamos el valor 5. en matemáticas arrastramos el primer botón y le damos el valor 5.