.
BOTE DE PINTURA
En este tutorial se presenta el componente Canvas (Lienzo), útil para la creación de sencillos gráficos de dos dimensiones. Vas a construir una aplicación que te permite dibujar en la pantalla del teléfono en diferentes colores.
Con la aplicación BoteDePintura, puedes:
Sumergir el dedo en un bote de pintura virtual para dibujar en ese color.
Arrastrar el dedo por la pantalla para dibujar una línea.
Tocar la pantalla para hacer puntos.
Usar el botón en la parte inferior para borrar la pantalla.
Incluir una imagen como fondo del dibujo.
Este tutorial asume que has completado el tutorial HolaRonronea
introduce los conceptos siguientes de la aplicación Inventor:
El componente canvas para el dibujo.
El Designer para la disposición de los componentes.
Los controladores de eventos, que toman argumentos.
Variables.
Antes de comenzar.
Asegúrate que tu ordenador y teléfono se han configurado correctamente para utilizar App Inventor, y de navegar por el sitio web de App Inventor en http://beta.appinventor.mit.edu/ . Inicia un nuevo proyecto en el Designer , y asígnale el nombre de BoteDePintura . Abre el Blocks Editor y haz clic en connect to phone (Conectar con teléfono). Asegúrate de que en el teléfono se ha iniciado la aplicación App Inventor.
Titulo de la pantalla.
Para empezar, acude a properties (Propiedades), en el panel de la derecha del designer (diseñador) y cambia el título de la pantalla a BoteDePintura. Verás este cambio en el teléfono, con el nuevo título que se muestra en la barra de título.
Hay tres nombres en App Inventor que se pueden confundir:
1).El nombre que elijas para el proyecto, a medida que se avanza en él. Este será también el nombre de la aplicación del paquete para el teléfono.
2).El nombre de "Screen1", que verá en el panel que muestra los componentes de la aplicación. No se puede cambiar este nombre en la versión actual de App Inventor.
3).El título de la pantalla, que es lo que verás en la barra de título del teléfono. Esto empieza siendo "Screen1", que es lo que has utilizado en HolaRonronea. Pero se puede cambiar, pues ya lo has hecho en BoteDePintura.
Configuracion de los componentes.
Vamos a usar estos componentes para hacer BoteDePintura:
Tres botones para la selección de pintura roja, azul o verde, y otro botón para quitar la pintura del dibujo.
Un canvas (lienzo), la superficie de dibujo. Esta tela tiene un una imagen de fondo (BackgroundImage) , que es el gatito del tutorial HolaRonronea. También puedes dibujar en un canvas en blanco. Eso es sólo un canvas sin una imagen de fondo.
También hay un componente que no se ve: se utiliza un HorizontalArrangement (alineamiento horizontal) para las tres líneas de botones de arriba.
Eso hace cinco componentes en total. Vamos a desarrollar y compilar la aplicación.
Botones de colores
Arrastra un componente Button al visor (Viewer) y cambia el atributo texto (text) del botón, que verás como Button1, a "Rojo" y modifica su color de fondo (BackgroundColor) a rojo.
Haz clic en Button1 en components o en el viewer para resaltarlo (puede que ya se halle resaltado) y pulsa sobre el botón Rename, situado en la parte inferior de la sección components para cambiar su nombre de Button1 a BotonRojo .
Del mismo modo, hacer dos botones más para el azul y el verde, con el nombre BotonAzul y BotonVerde , que quedarán colocándolos verticalmente respecto al botón rojo.
Así se vera en el diseñador, con los nombres de los botones que aparecen en la lista de los componentes del proyecto. En este proyecto estamos cambiando los nombres de los componentes, en lugar de dejarlos con los nombres por defecto, como lo hicimos en HolaRonronea. El uso de nombres significativos hace tus proyectos más legibles para a ti mismo y para los demás.
Si lanzas el editor de bloques y conectas el teléfono o el emulador, también verás los botones en la pantalla de los mismos.
Diseño con alineamiento de pantalla
Ahora debes tener tres botones, uno encima del otro. El siguiente paso es hacer que se alineen horizontalmente. Para ello, utiliza un componente HorizontalArrangement.
Desde el panel Palette arrastra un HorizontalArrangement y colócalo debajo de los botones. Cambia el nombre de este componente de HorizontalArrangement1 a TresBotones.
En el panel Properties cambia el ancho (Width) de TresBotones de forma que ocupe todo el ancho de la pantalla (a Fill Parent).
Mueve los tres botones al interior del HorizontalArrangement TresBotones . Sugerencia: Verás una línea azul vertical cuando estes colocando en un elemento de alineamiento, que nos indica donde caerá el botón.
Si nos fijamos en la lista de los componentes del proyecto, podrá ver los tres botones debajo de TresBotones con sangría, lo que nos indica que son ahora sus subcomponentes. Tenga en cuenta que todos los componentes se insertan debajo de BoteDePintura.
También puedes ver la línea de tres botones en una fila en la pantalla del teléfono, aunque las cosas podrían no ser exactamente igual que en el Designer . Por ejemplo, la línea periférica del horizontalArrangement se muestra en el Designer, pero no en el teléfono.
En general, se utiliza alineamiento de pantalla para crear sencillos diseños verticales u horizontales. Puedes crear diseños más complejos por la anidación de estos componentes. También hay un componente TableArrangement (que no se incluye en este tutorial).
Lienzo y botón de borrar
Los dos últimos componentes son el Canvas y el botón de borrar.
Desde Palette arrastra un Canvas al Viewer. Cambia su nombre por el Lienzo . Establece su ancho (Width) a fill parent. Establece su altura (Height) a 300 píxeles.
Agregar una imagen de fondo al Lienzo. Haz clic en el campo que contiene None ... junto a BackgroundImage en las Properties de Lienzo. Puedes utilizar el archivo kitty.png que usaste en el tutorial de Nuestra primera aplicación, si todavía lo tienes almacenado. O puedes utilizar otra imagen.
Puede utilizar cualquier imagen que quieras, pero obtendrá los mejores resultados si el tamaño de la imagen (en píxeles) está cerca del tamaño en el que se le de muestra en el teléfono. Además, las imágenes grandes se tardan mucho en cargar, y podría superar la capacidad de memoria que los teléfonos asignan para las aplicaciones.
Desde Palette, arrastra otro Button a la pantalla, colocándolo bajo el Lienzo. Cambia su nombre a BotonBorra pulsando el botón Rename situado bajo Components. Cambia su atributo text situado en Properties a Borrar .
Has completado los pasos para configurar el aspecto de la aplicación. He aquí cómo verás el Designer . A continuación, vamos a definir el comportamiento de los componentes.
Añadir comportamientos a los componentes
Si no has abierto ya el editor de bloques, hazlo ahora pulsando sobre el boton Open the Blocks Editor. En primer lugar vamos a configurar los botones que cambian el color de la pintura.
Agregar controladores de eventos de botón
En el Blocks editor:
Cambia a la columna My Blocks.
Abrir el cajón de BotonRojo y arrastra el bloque BotonRojo.Click al área de trabajo.
Abre el cajón Lienzo. Arrastra el bloque set Lienzo.PaintColor to (puede que tengas que desplazarte por la lista de bloques en el cajón para encontrarlo) y colócalo encajado a BotonRojo.Click . Cambia a la columna Built-in. Abre el cajón Colors y arrastra el bloque del color Red y ponlo en el set Lienzo.PaintColor to que llevaste antes al área de trabajo.
Un modo más rápido de seleccionar el bloque Red, una vez has colocado set Lienzo.PaintColor to, todavía en My Blocks pulsas en una zona vacía del área de trabajo, y verás que te apareces los mismos cajones que te aparecerían al pulsar Built-in. Seleccionas Colors y en la lista que aparece seleccionas Red.
Repita los pasos 1-3 para los botones de color azul y verde. Fíjate que, para tu comodidad, puedes tomar el bloque set Lienzo.PaintColor to, tal como se indica en el paso 3, o bien puedes copiarlo desde el área de trabajo, seleccionando con el ratón el que pusiste antes y pulsando (en Windows) las teclas Ctrl+c (Ctrl y c a la vez, que es copiar) y, posteriormente Ctrl+v (que es pegar). Lo copias 2 veces y encajas en los bloques BotonAzul.Click y BotonVerde.Click
También puedes copiar y pegar los bloques Lienzo.PaintColor to Red ya unidos y encajarlos, ya que posteriormente puedes modificar el color del bloque Red. Si situas el ratón sobre el mismo verás que aparece un indicador de lista desplegable que, si lo pulsas, te permite cambiar el color del bloque a azul y a verde, según tus necesidades.
El botón para crear al final es el de Borrar. Vuelve a My Blocks. Haz un controlador de eventos BotonBorra,Click arrastrándolo. Desde el cajón de Lienzo arrastra call Lienzo.Clear y encájalo en BotonBorrar,Click .
Los bloques para los botones deberían tener este aspecto: imagen
Agregar evento táctil controladores
Ahora para el siguiente paso: dibujar en el Lienzo. Vas a arreglar las cosas de manera que al tocar el Lienzo, se obtienga un punto en el lugar donde se toca. Si se arrastra el dedo lentamente por el Lienzo, dibuja una línea.
En el Editor de bloques, abrir el cajón para el Lienzo y arrastra el bloque Lienzo.Touched al área de trabajo.
Tan pronto como se arrastra el bloque al área de trabajo, los tres conectores de su lado derecho se rellenar automáticamente con los bloques llamados x , y , y touchedSprite .
Ya hemos visto eventos de botón clic. Clicks son simples, porque no hay nada que saber sobre el clic que no sea que haya sucedido. Otros controladores de eventos, tales como when ...Touched necesita información sobre el evento. En App Inventor, esta información se expresa como el valor de los argumentos relacionados con el controlador de eventos. Para el caso de when ...Touched, los dos primeros argumentos X e Y representan las coordenadas del lugar donde ocurrió el contacto. Vamos a dejar el argumento touchedSprite para un tutorial más adelante.
Para este evento haremos que el lienzo dibuje un pequeño círculo en el punto situado en las coordenadas x , y .
Arrastra una llamada al comando Lienzo.DrawCircle desde el cajón del lienzo y colócala en la sección do del bloque Lienzo.Touched. En el lado derecho del bloque Lienzo.DrawCircle hay 3 conectores donde especificar los valores para x e y, las coordenadas donde el círculo se dibujará, y r , que es el radio del círculo.
Para x e y vamos a usar los valores de los argumentos que fueron suministrados al tocar la pantalla y que fueron recogidos por el controlador Lienzo.Touched:
Abrir el cajón My Definitions en la parte superior de la columna My Blocks y localiza los bloques de value x , y value y. Los bloques se crearon automáticamente cuando arrastaste el controlador Lienzo.Touched.
Arrastra los bloques value x , y value y y conéctalos a los conectores correspondientes en el bloque Lienzo.DrawCircle. Asegúrate de arrastrar los bloques Value x e y, no los correspondientes bloques Name x e y, que se ven muy similares.
También tendrás que especificar el radio del círculo a dibujar. Cinco (píxeles) es un buen valor para esta aplicación:
Haga clic en un área vacía de la pantalla para abrir el menú activable y seleccionar Math (verde). Selecciona 123 de la lista desplegable que aparece, para crear un bloque de Number. Pulsa sobre el 123 contenido dentro del bloque Number, y cámbialo a 5. Finalmente encájalo en el conector r, del radio.
También puedes simplemente escribir 5 seguido de retorno, para crear un bloque de números con un valor de 5. Este es un ejemplo de typeblocking : si usted comienza a escribir, el editor de bloques muestra una lista de bloques cuyos nombres coincidan con lo que está escribiendo, y si se escribe un número se crea un bloque de números.
Así es como el controlador de eventos Lienzo.Touched debe quedar: imagen
Prueba lo que tenemos hasta ahora en el teléfono. Toca un botón de color. Ahora toca el lienzo, y el dedo debe dejar una mancha en cada lugar que toque. Al tocar el botón borrar debe desaparecer el dibujo.
Añadir eventos de arrastre
Por último, agregar el controlador de evento de arrastre. Aquí está la diferencia entre un toque y arrastre:
Tocar es cuando se coloca el dedo sobre el lienzo y la levanta sin moverlo.
Arrastrar es cuando se coloca el dedo sobre el lienzo y de mueve el dedo mientras se mantiene en contacto.
Al arrastrar el dedo por la pantalla, parece trazar una línea larga, que se curva donde se movió el dedo. En realidad estamos pintando cientos de pequeñas líneas rectas: cada vez que mueves el dedo, aunque sea un poco, se extiende la línea desde la posición inmediata anterior del dedo a su nueva posición.
Un evento de arrastre viene con 6 argumentos. Se trata de tres pares de coordenadas x e y que son:
La posición del dedo donde comenzó el arrastre.
La posición actual del dedo.
La posición inmediatamente anterior del dedo.
También hay un objeto Sprite, que de momento vamos a idejar para este tutorial.
Ahora posibilitaremos trazar una línea entre la posición anterior y la posición actual del dedo mediante la creación de un manejador de arrastre:
Desde el cajón Lienzo, arrastra el bloque Lienzo.Dragged al área de trabajo..
También desde el cajón Lienzo, arrastra el bloque de llamada Lienzo.DrawLine y encájalo en el sector do del bloque Lienzo.Dragged
Haz clic en el cajón My Definitions. Verás los bloques de los argumentos que necesitas. Arrastra los valores de los bloques a los conectores correspondientes Lienzo.Dragged: x1 e y1 debe ser prevx y prevY , x2 e y2 debe ser CurrentX y CurrentY
Aquí está el resultado: imagen
Pon a prueba tu trabajo, verificándolo en el teléfono: arrastra el dedo por la pantalla para dibujar líneas y curvas. Toca la pantalla para hacer puntos. Utiliza Borrar para que limpie la pantalla.
https://sites.google.com/site/aprendeappinventor/tutoriales/botedepintura
0 comentarios:
Publicar un comentario