8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 1/13

1

SESIÓN A5NOMBRE DE LA SESIÓN: DIBUJANDO EN EL LIENZO

Objetivo: Dibujar figuras en el dispositivo móvil. 

CONTENIDO DE LA SESIÓN

EL PLANO CARTESIANO

El plano cartesiano está formado por dos rectas numéricas perpendiculares, u

horizontal y otra vertical que se cortan en un punto. La recta horizontal es llama

eje de las abscisas o de las equis (x),

la vertical, eje de las ordenadas o de l

yes, (y); el punto donde se cort

recibe el nombre de origen.

El plano cartesiano tiene como finalid

describir la posición de puntos, l

cuales se representan por s

coordenadas o pares ordenados.

Las coordenadas se forman asocian

un valor del eje de las equis a uno

las yes, respectivamente, esto indi

que un punto (P) se puede ubicar en

plano cartesiano tomando como ba

sus coordenadas, lo cual se represen

como:

P (x, y)

GEOMETRÍA

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 2/13

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 3/13

3

El diámetro de un círculo es la distancia entre dos puntos cualesquiera de la cur

cerrada y que pasa por el centro y tiene longitud d = 2r y divide a un círculo e

dos partes iguales.

El área de un círculo, es la medida de la superficie limitada por la circunferenc

del círculo dado.

CANVAS

El elemento canvas es un lienzo o área de trabajo donde se pueden dibuj

elementos. Este lienzo tiene un ancho y un alto que pueden ser establecidos p

el programador.

El canvas es como un plano cartesiano, tiene unas posiciones en x y otras en y,

este tiempo de elemento también se le suele llamar matriz.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 4/13

4

Como pueden ver la posición 0,0 del canvas se ubica en la equina superi

izquierda.

Para añadir un lienzo (canvas) a nuestra aplicación, simplemente hay q

arrastrar el componente al área de trabajo.

TRABAJO EN GRUPO – DIBUJANDO

En este trabajo en grupo , los estudiantes deberán crear diferentes figuras usanlos componentes que AppInventor tiene dispuestos:

1. Arrastrar un componente canvas a nuestra aplicación y establecer valor

de ancho y alto.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 5/13

5

Y la altura

2. Ahora vamos a la pestaña de bloques para añadir un evento initialize.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 6/13

6

Este evento realiza tareas cuando algo se carga o inicia, en este caso

pantalla Screen1.

3. Ahora vamos a decirle a nuestro lienzo Canvas1 que en el se va a dibuj

un circulo.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 7/13

7

4. Ahora debémos darle los valores en x, y además del radio del círculo.

Para hacer esto arrastramos elementos para introducir números que est

dentro del grupo math.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 8/13

8

Y simplemente asignamos valores.

Y observamos el resultado

Cada grupo deberá crear al menos 3 circulos de diferente tamaño, usando

función DrawCircle

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 9/13

9

NOTA: En la mayoría de las ocaciones el emulador del dispositivo no mostrará l

cambios hechos, por lo que se tendrá que reiniciar la conexión al emulador.

Y luego volver a conectarse al emulador

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 10/13

10

GENERAR CIRCULOS CUANDO EL USUARIO PRESIONE LA PANTALLA

Para esta actividad se debe tener un dispositivo con android para realizar el dem

a)  Lo primero es traer el elemento when.Touched para Canvas1.

b) Traemos la función DrawCircle.

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 11/13

11

c)  Ahora traeremos la posición donde el usuario ha puesto el dedo, para es

se usa el get.

d) Añadimos el radio

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 12/13

12

Y probamos la aplicación

MATERIALES CANTIDAD

Computador con video Beam

AppInventor Instalado

Videos

Tableta para mostrar la aplicación

1

1 por PC

2

8/11/2019 Sesion5 - Dibujando en el lienzo

http://slidepdf.com/reader/full/sesion5-dibujando-en-el-lienzo 13/13

13