Esta tercera práctica está sacada de  la original http://appinventor.mit.edu/explore/ai2/paintpot-part1.html y de su traducción al castellano .  La he adaptado a la versión 2 de App Inventor.

En esta práctica usaremos el componente Canvas, que se para dibujar en una zona de la pantalla. Nuestra aplicación permitirá que el usuario pinte con diferentes colores en la pantalla de su dispositivo móvil empleando los dedos. La imagen que vamos a usar es la misma que en la práctica 1.

  1. Crea el proyecto con el nombre práctica 3

  2. Crea 3 botones que representarán los 3 colores con los que pintaremos, rojo, azul y verde. Cámbiales el color del fondo para que sean fácilmente identificables y renómbralos para poder identificarlos a la hora de programarlos en el editor de bloques.

  3. Vamos a mejorar el aspecto añadiendo un layout horizontal, esto nos permite agrupar los 3 botones y centrarlos horizontalmente.

    1. Añade el layout horizontal desde la paleta / layouts Suéltalo debajo de los 3 botones.

    2. Arrastra los botones encima del layout horizontal para que se coloquen en la misma linea.

    3. Indica al layout que debe llenar toda la pantalla cambiando el width a fill parent y poniendo AlignHorizontal a center

  4. Vamos a añadir un botón para Borrar lo pintado en el pie del canvas.

  5. Mas o menos el aspecto debe ser el que sigue:

Aspecto de la pantalla final

Nos pasamos a programar la aplicación pulsando sobre el edito de bloques.

  1. Primero programamos los botones para que cambien la tinta con la que pintar.
  2. Vamos a agregar interacción con el lienzo para que al tocarlo “pintemos” sobre la foto.
    1. Desde el lienzo, añadimos un evento touchedSprite
    2. Luego le decimos que dibuje un circulo con DrawCircle
    3. Sacamos los valores de x e y. Dejamos el ratón sobre la X con fondo naranja unos segundos y aparecerá la opción de arrastrar get x, lo arrastramos a la derecha de la x con fondo violeta.
    4. Hacemos lo mismo con la y.
    5. Añadimos un valor 5 al ancho de la brocha.
    6. Mas o menos debe quedar como sigue:

  1. Prueba la aplicación y veras que puedes pintar puntos, aunque no puedes hacer lineas aún.
  2. Eventos de arrastre. Con esto podremos hacer líneas sobre la foto.
    1. Añade los eventos Dragged:

Prueba que la aplicación funcione.

Y desde aquí puedes bajarte el proyecto y el apk para probarlo en tu móvil.