Delphi y UI acelerados por hardware

Tradicionalmente Delphi ha usado las APIs que le provee Windows para dibujar sus controles, es más, los controles propios de Windows son dibujados por el sistema operativo y no por Delphi.

Windows, hasta el Vista usaba GDI para realizar estos dibujos. GDI es una API en C, para gráficos en 2D, es decir líneas, curvas, rectángulos. Internamente esta es la API que usa Windows para dibujar sus controles.  Esta API es rápida pero limitada, ya que no soporta antialiasing, ni transparencias. Sin embargo es muy rápido ya que era (hasta el Windows Vista)  parcialmente “acelerado por hardware”, esto quiere decir que algunas operaciones eran realizadas por el procesador gráfico GPU.

Al salir Windows XP, se creó un nuevo subsistema gráfico llamado GDI+ (GDI plus). Esta API en C++ ofrecía mejoras en la calidad de los gráficos ya que soportaba anitaliasing y transparecias, pero sigue siendo una API para gráficos en 2D. Estas nuevas características son realmente notorias para gráficos de alta calidad, con bordes suavizados tanto en en las lineas y curvas como en el dibujo de las letras (fonts). Sin embargo esta API trabaja integramente por software, es decir no es acelerada por hardware lo que hace que sea mucho más lento que GDI, claro que para gráficos sencillos sin mucha animación como son las interfaces de usuario tradicionales puede no ser muy dramático.

A partir de Windows Vista, Microsoft desarrolló una tecnología diferente para soportar “Aero” que es su nuevo manejador de ventanas “Desktop Window Manager (DWM) composition engine”. Este manejador está basado en DirectX. DirectX es una API de para gráficos 3D y es acelerada por hardware (asumiendo que la tarjeta gráfica soporte DirectX v9, que es el caso de todas las tarjetas modernas). Estas capacidades permiten gráficos de alta calidad usando menos CPU y de forma más rápida.

Continúa leyendo Delphi y UI acelerados por hardware

Anuncios

Dibujando con Delphi (2 – GDI)

La mayoria de los controles visuales de Delphi incluyen un Canvas sonre el que éstos están dibujados.  Muchos controles exponen su propiedad Canvas como Public y otros a través de eventos como OnPaint o CustomDraw o parecidos.

Vamos a ver ahora el ejemplo más fácil de dibujo usando el Canvas del control TPaintBox (en la paleta System). El objeto Canvas de Delphi tiene un conjunto de Propiedades y Métodos que nos permitirán dibujar Línes, Círculos, Rectángulos usando colores y colores de borde.

Coloquemos un control TPaintBox en nuestro formulario y fijemos su tamaño (Height y Width) en 150 x 150. Con el control seleccionado veamos sus Eventos y ubiquemos el evento OnPaint, doble click para entrar a su implementación, luego agreguemos el siguiente código:

procedure TForm1.PaintBox1Paint(Sender: TObject);
begin
 // Fijamos el Color del Brush (el relleno) en verde
 PaintBox1.Canvas.Brush.Color := clGreen;
// Dibujamos un rectángulos desde las coordenadas 10,10 hasta las coordenadas 60,60
 PaintBox1.Canvas.Rectangle(10, 10 , 60, 60);

 // Cambiamos el color del Pen (el borde) a rojo
 PaintBox1.Canvas.Pen.Color := clRed;
 // y fijamos el ancho del la linea de borde a 4 pixeles
 PaintBox1.Canvas.Pen.Width := 4;
 // El color del Brush (relleno) lo ponemos a amarillo
 PaintBox1.Canvas.Brush.Color := clYellow;
 PaintBox1.Canvas.Rectangle(40, 40 , 100, 100);

 // Dibujamos un círculo
 PaintBox1.Canvas.Ellipse(50, 50, 20, 20);
end;

y obtendremos eun resultado como el siguiente:

Muy fácil!! Ahora fijemonos en algunos detalles:

  • Al dibujar el primer rectángulo,  las características del Pen (borde) se dejaron con los valores por defecto (negro, 1 pixel).
  • Al dibujar el círculo se usaron los valores fijados anteriormente tanto para el Pen como para el Brush.

Esta últma observación quiere decir que si no decimos lo contrario se usarán los últimos valores fijados para el canvas.

Otra observación es que el evento OnPaint del control TPaintBox se lanza cada vez que el control deba redibujarse, esto sucede cuando por ejemplo ocultamos la ventana con otra ventana y luego la volvemos a mostrar. Si haces la prueba notarás que el dibujo a cambiado y ahora se ve así:

¿Por qué el borde del primer rectángulo cambió a rojo y es más grueso? La respuesta es que el evento OnPaint se volvió a lanzar y volvió a hacer el dibujo, sólo que las propiedades de Pen han quedado con los últimos valores que le dimos. Para evitar este efecto debes asegurarte de fijar los valores de Pen y Brush tal como quieres que se vean, es decir debimos fijar el color del Pen a clBlack y el Width del Pen a 1 antes de dibujar el primer rectángulo.

Si quieres forzar el repintado de un control puedes llamar al método Invalidate del control, por ejemplo cuando quieres cambiar programáticamente algún color.

Bueno eso es lo básico del Dibujo usando el Canvas, algunos usos interesantes son:

  • Crear tus propios controles con diseños propios.
  • Cambiar los colores en las celdas de una grilla, por ejemplo poner las filas impares de otro color, o los valores negativos con fondo rojo, dibujar indicadores especiales, etc

Más adelante veremos de hacer algunos ejemplos de éstos.