gráficas - universidad de sonoraeuler.mat.uson.mx/~havillam/android/slides/11 graphics.pdf ·...
TRANSCRIPT
![Page 1: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/1.jpg)
Gráficas
![Page 2: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/2.jpg)
Universidad de Sonora 2
Gráficas� Objetivo: hacer una aplicación para graficar.
![Page 3: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/3.jpg)
Universidad de Sonora 3
Gráficas� Extender la clase View.
� Sobreponer el método onDraw(Canvas canvas).
� La clase Canvas tiene métodos para dibujar:
� drawBitmap(…) – dibuja una imagen.
� drawCircle(…) – dibuja un círculo.
� drawLine(…) – dibuja una linea.
� La mayoría de estos métodos necesita un objeto Paintpara especificar el color, ancho de la línea, etc.
![Page 4: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/4.jpg)
Universidad de Sonora 4
Ejemplo� Hacer un programa para dibujar una línea roja.
![Page 5: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/5.jpg)
Universidad de Sonora 5
Clase PintaLinea
![Page 6: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/6.jpg)
Universidad de Sonora 6
Actividad
![Page 7: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/7.jpg)
Universidad de Sonora 7
Ejemplo� Graficar la función seno(x) para x entre 0 y 2 * PI.
![Page 8: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/8.jpg)
Universidad de Sonora 8
Problema con la escala� Función seno(x):
� x mínima: 0
� x máxima: 2 * PI = 6.28…
� y mínima: -1
� y máxima: +1
� Canvas en una pantalla de 720 x 1280 pixeles:� x mínima: 0
� x máxima: 720
� y mínima: 0
� y máxima: 1280
![Page 9: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/9.jpg)
Universidad de Sonora 9
Problema con la escala� En el canvas, el origen está en la parte superior
izquierda.
Fuente:
https://cdn.tutsplus.com/net/uploads/le
gacy/916_canvas1/1.jpg
![Page 10: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/10.jpg)
Universidad de Sonora 10
Proyección window to viewport� Ventana (window): región del mundo que se desea
pintar en un viewport.
� Viewport: región de la pantalla donde se dibuja, es decir, el canvas.
![Page 11: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/11.jpg)
Universidad de Sonora 11
Ejemplo de ventana� X: [0…2 * PI]
� Y: [-1…1]
X
y
![Page 12: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/12.jpg)
Universidad de Sonora 12
Ejemplo de viewport
0, 0
500, 400
V
U
![Page 13: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/13.jpg)
Universidad de Sonora 13
Definición del problema� Proyección ventana-viewport: dado un punto P en la
ventana, encontrar la proyección, Q, de P en el viewport.
![Page 14: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/14.jpg)
Universidad de Sonora 14
Eje horizontal� Dados Xmin, Xmax, X, Umin y Umax, encontrar U.
Ventana
Xmin
X
Xmax
Viewport
Umin
U
Umax
![Page 15: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/15.jpg)
Universidad de Sonora 15
Eje horizontal� Suposición: se respeta la proporción.
X – Xmin U - Umin
-------------- = ---------------
Xmax – Xmin Umax - Umin
Ventana
Xmin
X
Xmax
Viewport
Umin
U
Umax
![Page 16: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/16.jpg)
Universidad de Sonora 16
Eje horizontal� Despejando U
Umax – Umin
U = ------------------ * (X – Xmin) + Umin
Xmax – Xmin
� ¡Cuidado con la división entera!
� Definir las variables como reales y redondear U a entero.
![Page 17: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/17.jpg)
Universidad de Sonora 17
Eje vertical� Para el eje vertical…
� las proporciones son al revés
Ymax
Y
Ymin
Ventana
Vmin
V
Vmax
Viewport
![Page 18: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/18.jpg)
Universidad de Sonora 18
Eje verticalY – Ymin Vmax – V
-------------- = --------------
Ymax – Ymin Vmax – Vmin
� Despejando V
Vmax – Vmin
V = Vmax – ------------------ * (Y – Ymin)
Ymax – Ymin
![Page 19: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/19.jpg)
Universidad de Sonora 19
Resumen� Definir la ventana: Xmin, Ymin, Xmax, Ymax.
� Definir el viewport: Umin, Vmin, Umax, Vmax.
� Para cada punto P(X, Y) en la ventana:
� Aplicar las ecuaciones para encontrar el punto Q(U,V).
� Graficar Q en el viewport (canvas).
![Page 20: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/20.jpg)
Universidad de Sonora 20
Clase Proyecciones
![Page 21: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/21.jpg)
Universidad de Sonora 21
Clase PintaSeno
![Page 22: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/22.jpg)
Universidad de Sonora 22
Clase PintaSeno
![Page 23: Gráficas - Universidad de Sonoraeuler.mat.uson.mx/~havillam/android/Slides/11 Graphics.pdf · 2016. 9. 23. · Universidad de Sonora 3 Gráficas Extender la clase View. Sobreponer](https://reader036.vdocuments.us/reader036/viewer/2022071508/612904897bf1c504904c5a01/html5/thumbnails/23.jpg)
Universidad de Sonora 23
Actividad principal