View
249
Download
0
Category
Preview:
Citation preview
Modelo de Presentación
Contenidos Arquitectura ‘frame-buffer’ Modelos de Output
Representación de imágenes Sistemas de coordenadas Primitivas gráficas Textos ‘Clipping’ Colores
Arquitectura comunmente utilizada
Arquitectura ‘Frame-Buffer’
PantallaControlador de Pantalla
Frame-Buffer CPU
Repositorio de la imagen presentada
Transforma cada pixel del buffer en acciones físicas
sobre el hardware gráfico (pantalla)
Sistema gráfico
(Scan Conversion)
‘Scan conversion’ Proceso de conversión de una forma
geométrica en un conjunto de pixels que la representen en el dispositivo de salida
Ej. conversión de una línea (x1,y1, x2,y2) en el conjunto de pixels correspondiente
Efectuado por el sistema gráfico Transparente para el programador Debe ser muy rápido
‘Double Buffering’ Guardado de una imagen adicional de la
presentación Beneficios:
Animaciones más “suaves” Permite guardar las partes ocultas de las ventanas
Utiliza dos ‘buffers’ para efectos especiales Actualización de presentaciones (‘refresh’) más
rápidos
PantallaControlador de Pantalla
CPUFrame-Buffer
Buffer2
Buffer1
Modelo de ‘Output’ Conjunto de procedimientos provistos por el
WS, para efectuar presentaciones en los dispositivos de salida
Base para la interacción entre la aplicación y el WS Provee procedimientos para construcción de
presentaciones La invocación de los procedimientos es
interpretada como comandos al WS Estos comandos son dirigidos a través del WS para
poder ser ‘clipped’ Presentación
InputOutput
Comandos WM
WSOutput
Modelo de ‘Output’ Primeros sistemas (SunTools): primitivas
simples Dibujo de rectángulos, texto ‘BitBlt’ (o ‘RasterOp’) Movimiento de regiones de la pantalla a memoria Fáciles de implementar
Macintosh, X, etc.: sistemas más sofisticados Polígonos rellenos, ‘splines’, colores, ‘clipping’ Objetos 2D Imágenes más elaboradas Más sencillo para la aplicación
Modelo de ‘Output’ En general, los modelos de output constan de:
Un modelo para la representación de imágenes Técnicas para administrar las coordenadas Un conjunto de primitivas gráficas para realizar las
presentaciones Figuras geométricas Texto Propiedades de los dibujos Manipulación de ventanas
Un modelo para la representación de colores Operaciones y control del ‘clipping’ de
presentaciones
Modelos de imágenes Formas básicas de representar imágenes:
Primitivas ‘stroke’ ‘plotters’, primitivas gáficas ej. Line ((4,5) (9,7) thick 1)
Modelos basados en pixels operaciones para manipulación de regiones de pantalla
(ej. scrolling) ej. BitBlt
Modelos basados en regiones Primitivas ‘stroke’, con interiores rellenos ej. PostScript
Los sistemas gráficos combinan las características de estas formas básicas para ofrecer una mejor funcionalidad
Sistemas de Coordenadas Definen la ubicación de los objetos
Coordenadas del dibujo en pantalla Coordenadas de los objetos definidos en la aplicación
Ambos sistemas de coordenadas pueden ser diferentes
Se utilizan diversos sistemas de coordenadas Coordenadas de dispositivo Coordenadas físicas Coordenadas de la aplicación Coordenadas interactivas
Coordenas del dispositivo de dibujo
Area de la ventana utilizada por la aplicación para efectuar sus presentaciones
Generalmente expresadas en pixels
Pueden ser necesarias conversiones entre las coordenadas del dispositivo y las coordenadas de la pantalla
ej. ante eventos del mouse
Coordenadas de dispositivo
x
y
(0,0)
Titulo
Titulo
x
y
x
y
Jerarquías de Ventanas La organización de las ventanas en una jerarquía
permite expresar convenientemente algunas relaciones: Restricciones en el layout
Las ventanas “hijas” (subventanas) son posicionadas en una forma relativa la posición de su ventana “padre”.
La localización de las subventanas es determinada de acuerdo a la posición de su ventana padre
Una ventana hija oculta la porción de la ventana padre en la cual reside
Las ventanas padre e hijas pueden ser desplazadas en forma conjunta
Los hijos pueden ser movidos libremente dentro de su padre
Una ventana hija es “cortada” (‘clipped’) por su ventana padre
Jerarquías de Ventanas Propagación de eventos:
Los eventos del operador son enviados a la ventana activa.
Si la ventana activa no trata el evento, lo redirecciona a su ventana padre, y así sucesivamente.
El proceso cliente debiera ser responsable del mantenimiento y modificación de la jerarquía.
Las ventanas pertenecientes a una misma jerarquía debieran ser administradas por un mismo cliente
Coordenadas en jerarquías de ventanas
Titulo
x
y
Titulo
x
y
Otros sistemas de coordenadas Coordenadas físicas
Expresadas en términos de unidades físicas (centímetros, pulgadas)
Debe considerarse la resolución del hardware gráfico utilizado
Coordenadas de la aplicación Expresadas en términos de los conceptos manejados
por la aplicación ej. diseños arquitectónicos: metros, pies, etc
Requiere una transformación de escalas entre las coordenadas de la aplicación y las coordenadas de dibujo
Coordenadas interactivas Coordenadas de los eventos interactivos del usuario
ej. mouse
Primitivas gráficas Tipos
Objetos unidimensionales en un espacio 2D: Líneas, círculos, elipses, arcos elípticos, ‘splines’
Formas “cerradas” rellenadas Un borde define los límites de la región a dibujar
Parámetros de dibujo Ventana en la que se dibuja Posiciones de dibujo (X1, Y1, X2, Y2, ...) Propiedades
ej. ancho y estilo de linea Colores (‘background’, ‘foreground’, ...) Máscaras de dibujo ....
Modelos básicos 1. El paquete gráfico almacena el estado
Cada procedimiento de dibujo sólo especifica la información geométrica
Macintosh, Display PostScript, etc.SetColor(Red)MoveTo(70, 30)DrawTo(70, 200)
Menos parámetros en las invocaciones No tienen que colocarse las propiedades que no
interesan Las interrupciones, multiprocesamiento, pueden
producir configuraciones no deseadas El programador debe ser muy cuidadoso para
evitar propiedades no deseadas.
Modelos básicos 2. Cada operación define completamente una
forma geométricaDrawLine (70,30,70,200, Red, ......)
X utiliza un ‘graphics context’ para almacenar todos los parámetros
Amulet utiliza objetos Am_Style
Manipulación de ventanas Algunas operaciones sobre ventanas:
Creación Redimensionamiento Destrucción Iconificación Maximización
Textos Uno de los aspectos más comunes y complejos
de los sistemas gráficos Gran variedad de representaciones textuales.
Fuentes (‘fonts’) : conjunto de caracteres tipográficos creados con un diseño consistente.
Caracteres con generalmente la misma apariencia general, independientemente de su tamaño y estilo
Identificadas por un nombre (ej. Geneva, Times). Información para la selección
Familia (espaciado fijo o proporcional, serif) Estilo (negrita, cursiva, subrayado) Tamaño otras características:
ej. ancho y alto de los caracteres
Textos Representaciones de fuentes
Basadas en pixels (‘bitmapped’) Caracteres definidos como bitmaps o conjuntos de
pixels Eficiencia Problemas con el redimensionamiento y el espacio
requerido por las fuentes de tamaño grande Basadas en formas (‘outlined’)
Caracteres definidos por figuras cerradas (curvas, líneas), luego convertidos a bitmaps.
ej. Fuentes PostScript, TrueType Mayor portabilidad Menor necesidad de espacio Fácil redimensionamiento Suele ser dificil leer los textos pequeños
‘Clipping’ Limitación del espacio de dibujo a un región
particular de la pantalla. Caso más simple: región rectángular Algunos sistemas de ventanas modernos permiten
regiones rectilíneas Permiten acelerar la performance de las
presentaciones Solamente se redibujan aquellas partes de la
presentación que hayan sufrido modificaciones
‘Clipping’: Regiones La complejidad del clipping depende del tipo de
regiones manipuladas. Tipos de regiones
Rectangulares Muy simples
Rectilíneas Simplicidad para calcular intersecciones
Polígonos arbitrarios Aumenta mucho el costo de calcular intersecciones
Formas complejas Requiere calculos significativos
Máscaras de pixels Eficiencia y potencia, pero mucho consumo de espacio
y dependencia de la resolución
‘Clipping’: Operaciones sobre regiones Operaciones requeridas sobre las regiones de
clipping Union Intersección Diferencia Las operaciones deben ser cerradas sobre el
conjunto determinado por el tipo de regiones (“Clausura”)
ej. las regiones rectangulares son cerradas bajo la intersección pero no lo son bajo la unión o diferencia.
Colores Modelos para la representación de colores:
RGB (‘Red-Green-Blue’) Colores “aditivos” Coinciden con la tecnología actual
HSV (‘Hue-Saturation-Value’) Permiten especificar más facilmente un color dado
CMY (‘Cyan-Magenta-Yellow’) Colores “sustractivos” Basados en la metáfora de pintores profesionales
El número de colores representable depende del número de bits utilizados
24 bits: ‘true color’
Algunos modelos de output Macintosh:
Quickdraw provee GrafPorts como abstracciones de dibujo (clase View, en MacApp)
PHIGS: Presentación conformada por una colección jerárquica
de estructuras. MS Windows: ‘Graphical Device Interface’ (GDI)
Asocia los dispositivos gráficos con ‘device contexts’, que traducen los comandos de dibujo en la presentación apropiada.
NeWS, NeXT Modelo PostScript
Ejemplos de modelos de output MS Windows
Creación de ventanasCreateWindow (windowclassName, displayName, style, x,y, width, height, parentWindow, menu,instanceHandle, data)
La clase establece distintas propiedades de la ventana (icono, cursor, procedimiento de tratamiento de eventos, colores, etc)
Primitivas gráficasLineTo(current-hDC, x, y) Dibuja una línea desde la posición actual hasta (x,y),
utilizando el lapiz (‘pen’) indicado en current-hDC
selectObject (current-hDC, backgroudBrush)Rectangle (current-hDC, left, top, right, bottom) asocia un estilo de dibujo para el fondo
(‘backgroundBrush’), al ‘device context’, y luego dibuja un rectangulo con ese estilo
Ejemplos de modelos de output Macintosh
‘Clipping’SetPort(aWindow);SetRect(&r, x, y, w, h);ClipRect(&r) asocia una región válida de dibujo con un ‘port’
dado.
Creación de ventanasGetNewWindow(resourceID, storagePointer, flag); Crea una ventana, de acuerdo a la especificación
dada por el recurso dado
Ejemplos de modelos de output Macintosh
TextoSetPort(aWindow);FontInfo fi;GetFontInfo (&fi); Recupera la fuente asociada actualmente con el ‘port’
SetPort(aWindow);DrawString(string); Dibuja el texto string, con la fuente asociada al ‘port’ actual.
0 systemFont (usually Chicago font)1 applFont (usually Geneva font)3 geneva4 monaco5 venice20 times21 helveticaSetFont(4)
Ejemplos de modelos de output X Windows
Primitivas gráficasXDrawLine (Xdisplay,Xwindow,current-GC,x,y,dx,dy)
TextoXDrawString (Xdisplay,Xwindow,current-GC,x,y,str,len)
Funciones provistas por Xlib disponibles en varios lenguajes
Modelos de output OO Generalmente provistos por una abstracción
de una región de dibujo Implementada como una clase abstracta que define
un modelo uniforme para dibujos bidimensionales ej. ‘Canvas’
Las subclases implementan los distintos tipos de dispositivos: ventanas, impresoras, imagenes en archivos, etc.
Cada tipo de dispositivo contiene sus propias características (tamaño, cantidad de colores)
La funcionalidad de dibujo está determinada por los métodos y propiedades provistas por el Canvas.
Ejemplo modelo de output OO Clase abstracta ‘Canvas’
Dibujo de primitivasvoid Canvas::Rectangle(X1, Y1, X2, Y2)
Atributos de las primitivasvoid Canvas::SetLineWidth(lw)long Canvas::GetLineWidth()void Canvas::SetLineColor(lc)
Textovoid Canvas::SetFont(family, style, size)void Canvas::Text(x, y, string)
Coloresvoid Canvas::SetColor(long RGB)void Canvas::SetRGB(red, green, blue)long Canvas::GetRGB()
Ejemplo modelo de output OO
‘Clipping’Region Region::Union(Region)
Region Region::Intersection(Region)
Region Region::Bounds()
Region Canvas::BoundingRegion()
void Canvas::SetClipRegion(Region)
Region Canvas::GetClipRegion()
long Canvas::GetRGB()
Recommended