Usuario:ManuelRomero/DAW/moviles/Paint

De WikiEducator
Saltar a: navegación, buscar




Paint pot

Especificacioens

  1. Una aplicación para que el usuario pueda hacer fotos y pintar sobre ella.
  2. Se podrán hacer puntos tocando con el dedo
  3. Se podrán hacer líneas arrastrando con el dedo.
  4. Se podrá quitar lo que hemos pintado y restablecer la foto original
  5. Líneas y puntos pueden ser de tres colores que seleccinaremos con botones.
  6. Los puntos podrán ser de dos tamaños gruesos y delgados, también seleccionados con botones.

Diseño

  • Primero hacemos un boceto de la aplicación
  • Abrimos app inventor y realizamos el diseño gráfico
  • Por defecto podremos la fotito del gatito

Boceto Paint.png

Objetos del diseño y propiedades

  • Tenemos los 3 botones de colores en la parte superior en un contenedor horizontal
  1. Botón rojo
  2. Botón azul
  3. Botoón verde
  • Los 4 botones inferiores en la parte inferior en un contenedor horizontal
  1. Hacer foto
  2. Borrar (reestablece la imagen inicial)
  3. Puntos pequeños
  4. Puntos grandes
  • Un canvas en la parte central del dispositivo donde se ubicará la imagen

Describimos el comportamiento

Observamos que el comportamiento de la aplicación ha de seguir las siguientes acciones
  1. Dibujar un punto al tocar con el dedo
  2. Dibujar una línea al arrastrar el dedo
  3. Cambiar los colores al seleccionar un botón correspondiente de colores (rojo, azul' verde)
  4. Hacer una foto al presionar el botón foto
  5. Restablecer la imagen original con el botón reset
  6. Cambiar el grosor del punto (botones small y big)


1.- Dibujar un punto

Queremos que al tocar la pantalla salga un punto

Evento tocar con el dedo en la pantalla touched
ObjetoCanvas.Touched

EventoTouched.png

Parámetros
x ,y posición donde el usuario tocó la pantalla.
    • La posición 0,0 es la esquina superior izquierda de la pantalla.
touchedSprite booleano que indica si en la posición x,y había un sprite
Accion dibujar un punto
  • Dibujar un punto es dibujar un circulo de un determinado radio
ObjetoCanvas.DrawCircle

MetodoDrawCircle.png

Parámetros
x ,y posición donde queremos dibujar el círculo en la pantalla.
r numero entero Radio del circulo

2.- Dibujar una línea

Evento arrastrar el dedo sobre la pantalla dragged

EventoDragged.png

Parametros
tiene seis argumentos
startx, starty, cooredenadas primer punto donde se inició el evento
currentx, currenty: coordenadas posición actual del dedo
prevx, prevy Ultima posición del dedo
daggedSprite booleano que indica si se ha deslizado el dedo sobre una imagen sprite
  • Las coordenadas siempre son dos enteros con referencia 0,0 a la esquina superior izquierda del canvas sobre el que actúa la aplicación.
Acción dibujar la línea

MetodoDrawLine.png]]

  • Dibuja una línea al arrastrar el dedo sobre el lienzo.
Parametros
x1,y1 coordenada inicio de la línea
x2,y2 coordenada fin de la línea
  • En nuestro caso queremos que se dibuje la línea desde la posición actual del dedo hasta la última posición

EventoAccionDibujaLinea.png

3.- Cambiar los colores

  • Para ello tenemos tres botones
  1. bAzul
  2. bVerde
  3. bRojo
  • Lo que queremos es que cuando hagamos click sobre ellos Evento click, cambie el color de pintar sobre el canvas Porpiedad PaintColor'
  • Representamos el de uno de ellos, y los demás son iguales

EventoClick.png

  • Obervamos como accedemos a la propiedad del objeto del canvas y lo modificamos

EventoAccionClick.png

  • El color lo tenemos disponible en la paleta Built-in - Color
  • También podemos acceder directamente escribiendo el color correspondiente.

Hacemos lo mismo con los tres botones

4.- Hacer una foto

  • El evento que dispara esta acción es también el click sobre el botón foto
  • El componenete Camera tiene dos componentes importantes
  1. TakePicture Métoodo Abre la aplicación de la cámara del dispositivo
  2. AfterPicture Evento que se dispara cuando el usuario ha hecho la fotografía.
  • En nuestro caso queremos que
Evento click sobre botón foto ==> abrir la aplicación de cámara
Evento foto hecha ==> Cambiar la imagen de fondo del lienzo por la foto hecha (propiedad BackgroudImage
  • Es decir debemos programar dos eventos:

EventoClickFoto.png EventoFotoHecha.png

Evento AfterPiicutre
Tiene como marámetro image que es la imagen de la fotografía
  • Este valor es el que queremos dejar de fondo del lienzo

4.- Restablecer la imagen original

  • Al hacer click en el botón reset lo que hacemos es invocar al método del lienzo Clear
Método Clear
No tiene parámetros y limpia la pantalla respetando el contenido de la propiedad BackgroundImage
  • Con esto conseguimos dejar la última imagen en el lienzo

ClickReset.png

5.- Cambiar el grosor del punto

  • Para esta nueva acción necesitamos una variable
  • Para definir una variable vamos a la opción Built-in-Definition
  • Aquí vemos los elementos que nos podemos crear

Definiciones.png

  • En app inventor todas las variables son globales
  • Al definir una variable hay que inicializarla
  • En este caso nos creamos la variable radio
  • Posteriormente al hacer click sobre los botones small, big modificaremos el valor de la variable.

ClickBigSmall.png

  • Al presionar el botón big le damos el valor 8, y con el botón small, le damos el valor 2
  • Ahora lo único que nos queda es se establezca este radio como el diámetro del punto que queremos dibujar
  • Cogemos en el evento Touched y le pasamos como parámetro el radio

DibujaPunto.png