Taller 2: Pizarra de Dibujo

 Hola! Bienvenido a esta segunda realización de un juego. El día de hoy vamos a programar una aplicación móvil que permita dibujar, crear rectas, y circunferencias.

Primer que nada, las imágenes que utilizaremos serán las siguientes:

                         
                          

En esta entrada del blog, se asumirá que ya has revisado las páginas de Instalación, Interfaz y el primer juego programado. Por lo que, si te sientes confundido, te recomiendo revisar las entradas del blog nombradas anteriormente.

Dicho esto, empezemos.

Para comenzar, vamos a necesitar varios componentes, entre ellos, un lienzo, una "SpriteImagen", botones, etiquetas, un deslizador y componentes de disposición para dejar todo ordenado en la pantalla.

En la sección paleta se encuentran los componentes que queremos agregar a nuestra aplicación. Basta arrástralo a screen1 o pantalla de nuestro móvil virtual.

Dibujar en el lienzo.

Todo dibujo de línea o circulo que se realice en el Screen debe estar contenido en un lienzo. Seleccione en Paleta / Dibujo y animación 

Y arrastre el componente lienzo a Screen 1.

En propiedades del Lienzo cambiar el Alto y Ancho por Ajustar al contenedor. El Lienzo es el único que puede dibujar puntos, líneas, círculos o circunferencias, cambiar el color de un objeto, entre otras herramientas que puede modificar.

Para dibujar a mano alzada, es decir, tocar la pantalla del móvil y arrastrar el dedo, basta cargar el bloque Cuando Lienzo .Arrastrado

Luego debemos llamar a que Canvas1 dibuje una línea, para ello cargamos el bloque:

Experimenta con los valores XInicial, YInicial, XActual e YActual  para x1,y1,x2 e y2 respectivamente y observa lo que ocurre. Luego, cambia los valores de XInicial e YInicial por XPrevio e YPrevio.

En el modo de Diseño agrega botones para cambiar el color del lápiz. Los botones deben estar alineados, para ello debemos cargar un contenedor que acomoda los objetos, este se encuentra en Paleta / Disposición. Seleccione el DisposiciónHorizontal y arrástrelo a la parte superior del Screen 1.

Puedes elegir botones para cuantos colores quieras. En este caso, ocuparemos cuatro colores, por lo que, arrastraremos cuatro botones al contenedor que se encuentra en la parte superior de Screen 1. En propiedades puedes cambiar el color de este, nosotros utilizaremos el gris oscuro.

Además, te recomiendo para cada botón, ir a propiedades, cambiar el nombre y el color de fondo, correspondiente al color que hayas elegido. En este caso, ocuparemos rojo, verde, negro y blanco. Lo cual queda de la siguiente manera:

Y en el caso de propiedades:

El algoritmo para cambiar el color mientras dibujamos en el Screen 1 es el siguiente “cuando hacemos clic en el botón, el Lienzo cambia el color de la pintura por el color X”

Puesto que ya sabemos cambiar el color del lápiz, vamos a crear botones para cambiar el color del lienzo. La manera es bastante similar. Primero, agregamos un contenedor de disposición horizontal a Screen 1, arrastramos tanto botones como colores queramos, y nuevamente se recomienda, cambiar los nombres y ColordeFondo en propiedades.

Se vería así:

En el caso de propiedades:

Nótese que para una persona que recién vaya a utilizar la aplicación sera confuso saber que color corresponde a qué, por lo que añadiremos una Etiqueta a cada contenedor. Esta se encuentra Paleta/Interfaz de Usuario. Luego en Propiedades cambiamos el color de fondo y de letra al que nos guste más, y le ponemos un título. La etiqueta del primer contenedor tendrá como título Color Pincel, y la segunda Color Lienzo. Para que los botones de los colores queden sin letra, debes seleccionar en Propiedades, Color de Letra Ninguno.

Recuerda programar los botones de Color Lienzo. El algoritmo para cambiar el color del lienzo es el siguiente “cuando hacemos clic en el botón, el Lienzo cambia el color de fondo por el color X”.

Junto a ello podemos crear un botón aparte para reiniciar el lienzo, es decir, que vuelva a su estado original, de color blanco.

Para ello haremos la diferencia arrastrando un botón a la parte inferior de Screen1, le llamaremos ReseteoBoton. Esperando que ya hayas subido las dos imágenes del principio, ahora debes ir a propiedades del botón y seleccionar la foto correspondiente.

El algoritmo si no te has dado cuenta es el mismo que en el de cambiar color de fondo del lienzo.

Hasta ahora podemos dibujar, cambiar el color del pincel, y del lienzo. Asi que vamos a añadirle una imagen de un lápiz para que al arrastrar el dedo por la pantalla del celular, el lápiz nos siga.

En Paleta / Dibujo y Animación arrastrar SpriteImagen a Lienzo1. Subir la foto del lápiz en Medios, y luego en Propiedades cargar la foto.

Para que el lápiz siga a nuestro dedo debemos ir a Bloques, y seleccionar llamar SpriteImagen1 .MoverA, además en x debe ir XActual y en y debe ir YActual.

Luego, aquellos bloques deben ir en cuando Lienzo1 .Arrastrado.

Antes de pasar a la creación de líneas y circunferencias. Podemos hacer que el pincel tenga varios grosores. Para ello ir a Paleta / Interfaz de Usuario y arrastrar el deslizador a la parte inferior de Screen1, bajo el lienzo.

Una vez arrastrado, podemos cambiar sus colores en priopedades y además cambiar el intervalo del grosor del lápiz. El seleccionado aqui fue de Valor mínimo 1 y valor Máximo 30.

El algoritmo para que el grosor aumente o disminuye con el deslizador es "Cuando deslizador posición cambiada, poner lienzo ancho de linea como tomar posición del pulgar".

 

Ahora vamos con la creación de segmentos de rectas:

Para crear un segmento hay que tocar dos veces la pantalla, para asi marcar un punto de inicio y un punto final. Para esto debemos crear tres variables: incio_x, incio_y y activado.

Las variables de inicio guardaran las coordenadas en donde toquemos por primeva vez la pantalla. Serán inicializados en (0,0) que es el origen correspondiente al extremo superior izquierdo del Screen.

La variable activado cambia su estado a cierto después de hacer el primer toque en la pantalla y volverá a cambiar después de dibujar la línea. Es decir, nos indica si se está en modo de dibujar el segmento o no, o de otro modo, si se comenzó a dibujar el segmento.

Para crear las variables ir al modo Bloques y seleccionar Variables. Cargar e inicializar como se indica en la siguiente figura

 

Crearemos las variables fin_x y fin_y para guardar las coordenadas del segundo toque o del fin del segmento.

 

Como debemos tocar la pantalla del movil para indicar el inicio y fin del segmento agregaremos el bloque cuando Lienzo1 .Tocar que permite capturar el evento de tocar el Screen

 

El algoritmo para dibujar una línea será el siguiente:

SI la variable activo es falsa entonces estamos realizando el primer toque a la pantalla por lo tanto debemos almacenar las coordenadas en inicio_x e inicio_y  y cambiamos el estado de la variable activado, ya entramos en modo de crear el segmento.  Si no preguntamos por la variable activado nuevamente para saber si estamos en modo segmento, si es cierta entonces estamos en el segundo toque, por lo tanto debemos almacenar las coordenadas del segundo toque en las variables fin_x y fin_y. Y luego llamar a Lienzo o lienzo para que dibuje la línea. Después de dibujar la línea cambiamos el estado de la variable activado.

La siguiente figura muestra el código

Agregue dos botones para cambiar el tipo de figura geométrica; una para línea y otra para circunferencia, tal como se realizó en el caso anterior para cambiar de color.

Para conocer qué tipo de figura geométrica que se dibujará, necesitamos una variable que indique qué botón es el activo. Crear la variable figura e inicializarla en 1 para indicar que se dibujará una línea, en caso de círculo su valor deberá ser 2

 Cada vez que se hace clic en un botón este cambia el valor por la figura correspondiente

Agregar el código correspondiente para dibujar un segmento o una circunferencia. El algoritmo de la circunferencia  es análogo al de la línea solo cambia la llamar Canvas1. DibujarCirculo

En este caso se construye una circunferencia con centro (centerX, centerY)  y el radio, que corresponde al punto de inicio (que es el centro)  y el radio que es el segmento.

El radio deberá calcularse mediante la distancia entre las coordenadas de punto de inicio y el punto final.

Los bloques deberían quedar así:

Luego aquellos bloques debes encajarlos junto al de los segmentos. Quedando de la siguiente manera:

Finalmente lo que obtenemos como aplicación de dibujo es: