En este tutorial se presenta el componente Canvas Canvas (Lienzo), (Lienzo), útil para la creación de senc illos gráficos de dos dimensiones. Vas Vas a construir una aplicación que te permite dibujar en la pa ntalla del teléfono en diferentes colores.
Nota histórica: PaintPot fue uno de los primeros programas desarrollados para demostrar el potencial de los ordenadores personales, ya en la década de 1970.
Lo que estás construyendo 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 la pantalla para dibujar una línea. Tocar la pantalla para hacer puntos. Usar el botón en la parte pa rte inferior para limpiar 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 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 utilizar App Inventor, 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 y haz clic en connect to phone (Conectar con teléfono). Asegúrate teléfono). Asegúrate de que en el teléfono se ha iniciado iniciado la aplicación App Inventor. Inventor.
Título de la pantalla Para empezar, acude a properties (Propiedades) (Propiedades),, en el panel de la derecha del designer (diseñador) (diseñador) y cambia el título de la pantalla a BoteDePintura. Verás BoteDePintura. Verás este 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 trabaja 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.
Configuración 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 limpiar el dibujo. Un canvas canvas (lienzo) (lienzo),, la superficie de dibujo. Esta tela tiene un una imagen de fondo (BackgroundImage (BackgroundImage)) , que es el gatito del tutorial HolaRonronea HolaRonronea.. También puedes dibujar en un canvas canvas en 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) horizontal) para las tres líneas de botones de arriba. Eso hace cinco componentes en total. Vamos Vamos a desarrollar y compilar la aplicación.
Botones de colores Arrastra un componente Button al visor (Viewer (Viewer ) y cambia el atributo texto (text ( text)) del botón, que verás como Button1, Button1 , a "Rojo" y modifica su color de fondo (BackgroundColor (BackgroundColor )) a rojo. Haz clic en Button1 en Button1 en components o components o en el viewer para para resaltarlo (puede que ya se halle resaltado) y pulsa sobre el botón Rename, Rename, situado en la parte inferior de la sección components para 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, diseñador, con los nombres de los botones que aparecen 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 HolaRonronea.. El uso de nombres s ignificativos hace tus proyectos más legibles para a ti mismo y para los demás.
2 de 9
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 encima del otro. El siguiente siguiente paso es hacer que se alineen horizontalmente. Para ello, utiliza un componente HorizontalArrangement HorizontalArrangement.. 1. Desde el panel Palette arrastra Palette arrastra un HorizontalArrangement y colócalo debajo de los botones. Cambia el nombre de este componente de HorizontalArrangement1 a TresBotones. TresBotones. 2. En el panel Properties cambia el ancho (Width) de TresBotones de forma que ocupe todo el ancho de la pantalla (a Fill Parent). Parent ). 3. Mueve los tres botones al interior del HorizontalArrangement TresBotones . 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, sangría, lo que nos indica que son ahora sus sub componentes. Tenga Tenga en cuenta que todos los componentes se insertan debajo de BoteDePintura. BoteDePintura.
3 de 9
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 . 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 crea r sencillos diseños verticales u horizontales. Puedes crear diseños más complejos por la anidación de estos componentes. También 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 Canvas y y el botón de borrar. 1. Desde Palette arrastra un Canvas al Viewer . Cambia su nombre por el Lienzo . Establece su ancho (Width) a fill parent. parent. Establece su altura (Height) altura (Height) a 300 a 300 píxeles. 2. Agregar una imagen de fondo al Lienzo Lienzo.. Haz clic en el campo que contiene None ... junto ... junto a BackgroundImage en las Properties de Properties de Lienzo Lienzo.. Puedes utilizar el archivo kitty.png que usaste en el tutorial de Nuestra primera aplicación, 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
4 de 9
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.
3. Desde Palette, Palette, arrastra otro Button Button a a la pantalla, colocándolo bajo el Lienzo Lienzo.. Cambia su nombre a BotonBorra pulsando el botón Rename situado Rename situado bajo Components. Components . Cambia su atributo text situado en Properties a Properties a Borrar . Borrar . Has completado los pasos para configurar el aspecto de la aplicación. He aquí cómo verás el Designer . 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: 1. Cambia a la columna My Blocks. 2. Abrir el cajón de BotonRojo y arrastra el bloque BotonRojo.Click al área de trabajo. Lienzo. Arrastra el bloque set Lienzo.PaintColor to (puede que tengas que desplazarte por 3. Abre el cajón Lienzo.
5 de 9
la lista de bloques en el cajón para encontrarlo) y colócalo encajado a BotonRojo.Click . Cambia a la columna Built-in. Built-in . Abre el cajón Colors y arrastra el bloque del color Red y Red y ponlo en el set Lienzo.PaintColor Lienzo.PaintColor to que to que llevaste antes al área de trabajo. Un modo más rápido de seleccionar el bloque Red, una Red, una vez has colocado set Lienzo.PaintColor to, 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. Built-in . Seleccionas Colors y Colors y en la lista que aparece seleccionas Red. Red.
4. 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, 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 s ituas 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. 5. El botón para crear al final es el de Borrar . Vuelve a My Blocks. un controlador de Blocks. Haz Haz un eventos BotonBorra,Click arrastrándolo. Desde el cajón de Lienzo arrastra Lienzo arrastra call Lienzo.Clear y y encájalo en en BotonBorrar,Click . Los bloques para los botones deberían tener este aspecto:
6 de 9
Agregar evento táctil controladores Ahora para el siguiente paso: dibujar dibujar en el Lienzo. Lienzo . Vas 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, Lienzo, dibuja una línea. En el Editor de bloques, abrir el cajón para el Lienzo Lienzo y y arrastra el bloque Lienzo.Touched al 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 so bre el clic que no sea que haya sucedido. Otros controladores de eventos, tales como when ...Touched necesita ...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, ...Touched, los dos primeros argumentos X 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 coordenadas x , y . Arrastra una llamada llamada al comando Lienzo.DrawCircle desde Lienzo.DrawCircle desde el cajón del lienzo y colócala en la sección do del bloque Lienzo.Touched. Lienzo.Touched . En el lado derecho del bloque Lienzo.DrawCircle hay 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 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: Lienzo.Touched :
1. Abrir el cajón My Definitions en 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.
2. Arrastra los bloques value x , y value y y conéctalos a los conectores correspondientes en el bloque
Lienzo.DrawCircle. 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 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
7 de 9
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 eventos Lienzo.Touched debe Lienzo.Touched debe quedar:
Prueba lo que tenemos h asta 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 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 e l 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 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 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, Sprite , que de momento vamos a idejar para este tutorial. Ahora posibilitaremos trazar trazar una línea entre la posición anterior anterior y la posición actual del dedo mediante la creación de un manejador de arrastre: 1. Desde el cajón Lienzo, Lienzo , arrastra el bloque Lienzo.Dragged al área de trabajo. 2. También desde el cajón Lienzo, Lienzo , arrastra el bloque de llamada Lienzo.DrawLine y encájalo en el sector do del do del bloque Lienzo.Dragged 3. Haz clic en el cajón My Definitions. Definitions . Verás los bloques de los argumentos que necesitas. Arrastra los
8 de 9
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:
Pon
a prueba tu trabajo, verificándolo en el teléfono: arrastra el dedo por la pantalla para
dibujar líneas y curvas. Toca Toca la pantalla para hacer puntos. Utiliza Borrar para limpiar la pantalla. Resumen Estas son algunas de las ideas que se tratan en este tutorial: Puede utilizar los componentes de alineamiento de la pantalla para especificar formatos de pantalla diferentes a la simple ubicación de los componentes uno debajo del otro. El componente Canvas Canvas te te permite dibujar sobre ella. También También puede detectar toques y arrastres. Algunos controladores de eventos devuelven información sobre el evento, tales como las coordenadas de la pantalla donde se ha tocado con el dedo. Esta información viene contenida en los argumentos. Cuando se selecciona un controlador de eventos que tiene argumentos, App Inventor crea bloques Value para Value para operar ese información y los coloca en el cajón My Definitions. Definitions . En la Parte 2 , verá cómo utilizar variables globales para crear puntos de diferentes tamaños.
Contenidos bajo licencia de C reativ reative e Com mons Reconocimiento-NoComercial-Comparti Reconocimiento-NoComercial-CompartirIg rIgual ual 3.0. 3.0. Buena parte de los contenidos son traducciones y adaptaciones deLearn de Learn,, publicados bajo licencia de Cre ative C ommons ommons Attribution Attribution 3.0 Unported License.
9 de 9
