sesion5 - dibujando en el lienzo
TRANSCRIPT
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