Paint Pic (3)

Este proyecto extiende la parte 1 del tutorial para crear dos puntos grandes y pequeños, como una demostración de cómo utilizar las variables globales.

Comienzo

Asegúrese de que ha completado el Set Up proceso y tienes tu Pic Paint proyecto cargado.

Empieza donde lo dejó al final de la Sección 2, con el proyecto abierto en el App Inventor. Utilice el botón Guardar comopara hacer una copia de PaintPot para que pueda trabajar en la nueva versión sin afectar a la versión original. Nombre de la copia "PaintPicV2" (sin espacios). Después de guardar una copia, usted debe ver PaintPicV2 en el Diseñador.

Creación de variables

El tamaño de los puntos dibujados en la tela se determina en el controlador de eventos cuando DrawingCanvas.Toucheddonde llamar Drawing.DrawCircle se llama con r, el radio del círculo, igual a 5. Para cambiar el grosor, lo único que tienes que hacer es usar diferentes valores para r. Utilice r = 2 para pequeños puntos y 8 r = para los puntos grandes.

Comience por crear nombres para estos valores:

• 1. Abra el Editor de bloques, si no está ya abierto y conectar el teléfono. El teléfono debe mostrar los botones y la tela que previamente construido.

  2. En el Editor de bloques, en la columna Built-In, abra el cajón Definiciones. Arrastra un bloque variable def. Cambiar el texto que dice "variable" por "pequeño". Un signo de exclamación amarillo de advertencia aparecerá en el bloque. Si pasa el ratón sobre este verá un mensaje de advertencia explicando que el bloque tiene una cuenca vacía.

  3. Es necesario llenar el zócalo con un bloque numérico que especifica el valor de "pequeño" - el uso 2 como valor. Para crear el bloque numérico, escriba el número 2. Aparecerá un menú, que muestra todos los bloques posibles que incluyen "2" en su nombre. Haga clic en el primero, que es el número 2 en sí, y un número de bloque con el valor 2 debe aparecer. Plug que en la definición de bloque variable. La marca amarilla de advertencia desaparecerá, porque el socket vacío ha sido llenado. (El segundo valor aparece en el menú es el atan2 bloque matemático que no utilizará aquí.)

Estos son los pasos en el siguiente orden:

Ahora usted ha definido una variable llamada mundial pequeño cuyo valor es el número 2.

Similar a los pequeños, defina una variable de gran mundial, cuyo valor es de 8.

Por último, defina un tamaño de gota variable global y darle un valor inicial de 2.

Usted podría preguntarse si no sería mejor estilo de programación para que el valor inicial de tamaño de punto es el valor de los pequeños en lugar de 2. Eso sería verdad, a excepción de un punto de programación sutil: hacerlo sería basándose en la suposición de que los pequeños ya tendrá un valor en el punto en el tiempo cuando tamaño de punto se le asigna su valor. En App Inventor, no se puede hacer suposiciones sobre el orden en que los diferentes bloques definición será procesada. En general, por supuesto, usted realmente desea especificar el orden en el que las variables se les asigna. Usted puede hacer esto mediante la asignación de todos los valores cuando la aplicación se inicia, utilizando el evento Initialize de pantalla. El Quiz Me tutorial ofrece un ejemplo de inicialización.

El uso de variables

Ahora vuelve al controlador de eventos toque de configurar en la parte 1 y cambiar la llamada a drawCircle bloque para que utilice el valor de tamaño de punto en lugar de utilizar siempre 5.

En el Editor de bloques, cambiar a la columna My Blocks, y abrir el cajón de mi Definiciones. Usted debe ver seis nuevos bloques, dos para cada una de las tres variables definidas:

• • un bloque global ... que produce el valor de la variable

  • un conjunto global ... bloque que establece la variable a un valor nuevo.

Estos bloques fueron creados automáticamente, de manera similar a la forma en que los bloques de x e y se crea al definir el manejador de evento cuando DrawingCanvas.Touched en la parte 1 de este tutorial. "Global" significa "variable global", en contraste con los argumentos de controladores de eventos, cuyos bloques están etiquetados como "valor". La diferencia es que los valores de los argumentos son accesibles solamente dentro del cuerpo del controlador de eventos, mientras que las variables globales son accesibles a lo largo de todo el programa.

• • Ir al controlador de eventos cuando MyCanvas.Touched y reemplazar el número 5 en el llamado bloque drawCirclecon el bloque de tamaño de gota mundial del cajón MyDefinitions.

Cambio de los valores de las variables

Ahora configure una manera de cambiar tamaño de gota a ser pequeños (2) o grande (8). Haga esto con botones.

• 1. En el diseñador, arrastre un componente HorizontalArrangement en el panel del visor debajo del componenteDrawingCanvas. Nombre de los componentes "BottomButtons".

  2. Arrastre el ButtonWipe existente en BottomButtons.

  3. Arrastre dos componentes más botones de la paleta en BottomButtons, colocándolos junto a ButtonWipe.

  4. Nombre de los botones "ButtonBig" y "ButtonSmall", así como su texto por "puntos grandes" y "pequeños puntos", respectivamente.

  5. En el Editor de bloques en Mis Bloques, cree una cuando ... Evento Clicked controlador para que los cambios detamaño de gota ButtonSmall como el valor de los pequeños. Para cambiar el tamaño de gota utilizar el tamaño de gota conjunto global de bloquear el cajón MyDefinitions y conecte el pequeño bloque global.

  6. Haga un controlador de eventos similares para ButtonBig.

Los dos controladores de eventos Click debería tener este aspecto:

¡Ya está! Puede dibujar en PaintPot y utilizar los nuevos botones para dibujar puntos, ya sea grandes o pequeños puntos.Tenga en cuenta que al arrastrar el dedo todavía produce una delgada línea. Esto se debe a los cambios que acaba de realizar no afectan Canvas.DrawLine se llama. ¿Puede pensar en cómo cambiar el grosor de la línea? Sugerencia: puedes ver los bloques de setter en el cajón Canvas.

Aquí está el programa completo en el Diseñador:

y en el Editor de bloques:

Revise

Para crear variables globales mediante el uso de bloques de definición del cajón Definiciones.

Para cada variable global se define, App Inventor proporciona automáticamente un bloque global que da el valor de la variable, y un mundial establecido ... para bloquear para cambiar el valor de la variable. Estos bloques se pueden encontrar en el cajón de mi Definiciones.

• • La primera vez que toque la pantalla sin seleccionar el color, ¿por qué una línea / punto aparecen en negro? ¿Se puede cambiar el color de rosa en vez de negro? (Pista: ¿dónde controlar las propiedades de los componentes)

  • Añadir otras opciones de color a la paleta de pintura.

  • Añadir un ajuste grueso / delgado que cambia el tamaño de las líneas.

  • Sugerencias para una mayor exploración

  • Piense en la manera de extender esta aplicación! Añadir un mezclador de color, permiten al usuario especificar qué colores quiere en su paleta, o permitir la navegación de una selección de imágenes para utilizar como fondo. Aquí hay una buena explicación de la manera de salvar el lienzo como un archivo de forma que los usuarios pueden preservar su obra: http://puravidaapps.com/snippets.php # lienzo