Paint

Introducción:

Vamos a construir un Paint , una aplicación que te permite dibujar en la pantalla en diferentes colores, y también te permite poner una imagen existente y dibujar sobre ella.

Interfaz:

Comenzaremos haciendo clic en el menú Proyectos > Iniciar un nuevo proyecto ... , que le dará el nombre de Paint.

Una vez dentro del diseñador cambiar el nombre de la pantalla Screen1 por "Paint".

Crea los botones de colores:

Utiliza una disposición horizontal e introduce tres botones: btn_rojo - btn_verde - btn_azul y modifica sus nombres y propiedades para que quede de esta forma:

Añadimos un lienzo para dibujar:

El lienzo es donde dibujaremos círculos y líneas:

• En Paleta > Dibujo y animación > Lienzo , arrastre el Lienzo al componente Visor.

• En Propiedades: en Ancho > Ajustar al contenedor y en Altura > 300 píxeles.

Ahora vamos a colocar los botones inferiores y el componente cámara:

• Ir a la  paleta >  Disposición > DisposiciónHorizontal y coloca el componente bajo el lienzo.

• Luego arrastra cuatro botones más a la pantalla y colócalos en Disposición horizontal2  .

• Cambia el nombre del primer botón a Btn_Foto y su propiedad de texto a " Hacer foto ".

• Cambia el nombre del segundo botón a Btn_Limpar y su propiedad de Texto a " Limpiar ".

• Asigna un nombre a los dos últimos botones, Btn_grande y Btn_peq , y ponga el texto en " Grande " y " Pequeño ", respectivamente.

• Desde la Paleta > Medios , arrastra una cámara de componentes al Visor. Aparecerá en el área de los componentes no visibles.

Programación de los bloques

- Dibujar un punto.

Al tocar el Lienzo queremos dibujar un punto en sobre él.

    - En el Editor de bloques, selecciona Lienzo1 y arrastra el bloque cuando Lienzo1.Tocar en el área de trabajo.

    - Ahora arrastraremos el bloque púrpura Llamar. Lienzo1.DibujarCirculo hasta que encaje dentro del bloque de mostaza anterior. Veremos que para trabajar, necesitamos asociar los tres bloques correctos de información adicional (x, y, r).

    - Para saber dónde dibujar el círculo, el bloque púrpura debe saber que "x" y "y" tienen el punto de la pantalla que estamos tocando. Lo sacaremos del bloque de mostaza. 

    - Al dejar el puntero del ratón sobre el icono de la "x" de mostaza bloque sacaremos una ventana y aparecerá un pequeño bloque tomar x naranja. Tenemos que arrastrarlo a la parte inferior del bloque púrpura para llamarlo. 

    - Haremos lo mismo con la "y". Esto hará que el círculo dibuje la "x" y la "y" que estamos tocando y no en ningún otro punto de la pantalla.

    - Definamos la " r ", que indica el tamaño del círculo que vamos a dibujar (su radio). Para definir el tamaño del radio, en Bloques > Matemáticas, arrastra el bloque azul para indicar el valor 0 (cero) al hueco "r" de nuestro bloque púrpura. Cambia el valor de 0 a 5 , será el valor del radio.

    - Este es el resultado:

    - Ya podemos probar nuestra aplicación en el simulador, por ejemplo, si jugamos dentro del Canvas1, en el teléfono móvil, verás que se dibujan pequeños círculos negros.

- Dibujar líneas.

Sería más interesante si pudieras dibujar líneas en lugar de pintar círculos si arrastras el dedo por la pantalla. Vamos a hacerlo:

En Bloques, habiendo seleccionado Lienzo1 :

• Arrastre el bloque cuando Lienzo1.Arrastrado al área de trabajo.

• Arrastre el bloque púrpura llamar.Lienzo1.DibujarLinea en el bloque anterior.

Para dibujar una línea, especifica el punto de inicio de la línea y el punto final. Por lo tanto, para usar este bloque, debe indicar dos coordenadas "x" y dos "y". El primero (x1, y1) define el punto de inicio de la línea, y el segundo par (x2, y2) define el punto final de la línea.

Al hacer clic en el lienzo, sin levantar el dedo, el programa guardará la memoria de la "x" y la "y" del punto que tocamos (determinado por XPrevio y YPrevio ). A medida que avanzamos el dedo, el programa detectará el cambio de posición y dibujará una línea desde ese punto guardado hasta el punto que estamos tocando actualmente (determinado por XActual y YActual ).

Este segundo bloque, debe quedar así:

Ahora prueba tu aplicación. Prueba este comportamiento, arrastra el dedo por la pantalla para dibujar líneas y curvas y toca la pantalla para hacer puntos.

- Programar botones de colores.

A continuación, agregaremos controladores de eventos para botones de colores para que los usuarios puedan cambiar el color de la pintura, y otro para que puedan borrar la pantalla y comenzar de nuevo.

- Seleccionamos el botón rojo, y elegimos Cuando el botón rojo haga clic. Después, seleccionamos el Lienzo1 y elegimos el bloque "poner Lienzo1.ColorDePintura.como" y le asociaremos el color rojo. De igual forma lo haremos con los otros dos botones de colores azul y verde:

 - Ahora vamos a configurar el botón Eliminar:  arrastra cuando.btn_limpiar.clic, luego selecciona Lienzo1 y arrastra llamar.Lienzo1.Limpiar

- Tomar una foto.

    Vamos a programar dos bloques para que la cámara del móvil pueda tomar una foto:

    Como puedes ver, al hacer clic en el botón "Hacer foto", la cámara de nuestro móvil obtendrá una imagen y la pondrá como fondo.

- Cómo cambiar el tamaño de los puntos.

    En el diseño de la app, hemos puesto dos botones: Grande y Pequeño. Esto es para poder cambiar el tamaño del punto que, por defecto, es de 5 puntos. Vamos a configurar el botón Grande para 8 puntos y el Pequeño para 2 puntos.

Cuando la aplicación tiene que usar algo que no es una propiedad, se debe definir una variable.

Comenzamos por definir un tamaño de punto variable:

• En el bloque de Variables, arrastra inicializar.nombre.global como. Cambia el texto "nombre" a " Punto de medida ".

• Ahora tenemos que modificar el primer bloque, de tal forma que quede así: fíjate que hemos cambiado el número 5:

    Finalmente, solo nos queda programar los botones Grande y Pequeño:

- MEJORAS.

- Guardar el archivo de imagen.

Cuando termines de hacer un dibujo interesante, seguramente te gustaría guardarlo en la memoria permanente del teléfono.

Para poder ofrecer esta posibilidad tendremos que indicar a nuestro programa cómo almacenar en la memoria el contenido actual del lienzo. En primer lugar, es necesario incluir en la interfaz un botón Guardar que al presionar ejecutará el código correspondiente. 

En la vista de diseñador, agrega un nuevo botón, con el nombre btn_guardar y el texto Guardar. Colócalo dentro de una disposición horizontal en la parte inferior.

Es conveniente añadir un componente Etiqueta, que llamaremos Nombre_archivo, a la derecha del botón Guardar. Definiremos que su propiedad de Texto está inicialmente en blanco.

Para programarlo, debe quedar así:

- Borrar la foto capturada.

Cuando capturas la foto, la retocas, pero imagina que quieres dejar un fondo totalmente blanco, listo para tomar una nueva foto o solo para pintar en ese fondo. Modifica la app, de tal forma que al pulsar un botón se borre la imagen capturada y aparezca un fondo totalmente blanco.

- Evaluación:

    - Como mínimo, la app quede terminada hasta la programación de los botones Grande y pequeño y se incluirá el icono que dispones en una carpeta comprimida abajo en esta página. Eso se corresponderá con una nota de 8 puntos.

   - Tendrá hasta dos puntos más, si se realizan las dos mejoras que se proponen. Además, también se tendrá en cuenta las modificaciones estéticas que se realicen.