Dibujar directamente con Imagen Canvas desde GdiPlus-X

Artículo original: Direct Draw with the Image Canvas from GdiPlus-X
http://weblogs.foxite.com/vfpimaging//archive/2007/03/20/3535.aspx
Autor: Cesar Chalom (http://weblogs.foxite.com/cesarchalom)
Traducido por: Ana María Bisbé York (amby@telefonica.net)
Para: PortalFox (http://www.portalfox.com)

Uno de los agregados más interesantes de la biblioteca GdiPlus viene de la mano del objeto ImageCanvas. Es una subclase del objeto imagen original de VFP, que permite dibujar directamente sobre un objeto imagen utilizando comandos gráficos de GDI+ sin acceso a disco. Genera imágenes muy rápido, y brinda muchas posibilidades nuevas de los usuarios VFP.

La clase ImageCanvas permite generar gráficos en formularios VFP, brindando la posibilidad de dibujar directamente en un objeto imagen VFP, en lugar de dibujar utilizando la propiedad HWnd del formulario. De esta forma los desarrolladores no necesitan preocuparse de las actualizaciones de Windows Paint. ¡ Trabaja muy rápido ! Las imágenes están guardadas en memoria, evitando el acceso a disco y pérdidas de rendimiento.

Básicamente, la imagen creada se guarda en una secuencia o flujo (stream). Las secuencias son similares a los archivos estándar; pero se almacenan en memoria. La imagen se recupera de la memoria, y se guarda en la propiedad PictureVal en el objeto Image.

En esta corta guía mostraré cómo usted puede dibujar el objeto Image directamente, aprovechando los beneficios de IntelliSense. Al final del código de ejemplo encontrará código que muestra cómo puede guardar la imagen que se acaba de crear en un archivo, ¡ e imprimirla!

IMPORTANTE:

Todos los ejemplos que se muestran utilizan la nueva librería GDIPlus-X, que está aun en versión ALPHA; pero es realmente estable y fiable para hacer la mayoría de las tareas de GDI+. Descargue la versión más reciente de Codeplex:

http://www.codeplex.com/Wiki/View.aspx?ProjectName=VFPX&title=GDIPlusX

Propiedades

oGfx - Objeto GDI+ Graphics que utilizaremos para dibujar directamente sobre el tapiz
oBmp - Objeto bitmp asociado con el tapiz
Rectangle - Devuelve un objeto Rectangle GDI+ con dimensiones de su ImgCanvas

Hay algunas propiedades secundarias disponibles que tratan directamente con el objeto Graphics, como InterpolationMode, RenderMode, SmoothingMode y TextRenderingHint. Puede encontrar toda la información sobre éstas en MSDN.

Métodos

BeforeDraw - Aquí coloca todo el código con el que va a crear su imagen.
Draw - llame a este método para hacer que el ImageCanvas ejecute el código 
       que está en "BeforeDraw". Tenga en mente que este método se 
       dispara cuando se inicializa el  ImgCanvas
AfterDraw - Este método es ejecutado después que termina el método Draw.

A continuación, un pequeño tutorial mostrando cómo puede trabajar con el ImageCanvas:

1.- Crear un nuevo formulario, "TestCanvas.scx"

2.- Abrir el Administrador de proyectos con la última librería GdiPlusX, seleccione la ficha "Classes", expanda "GdiPlusX", seleccionando el objeto ImgCanvas

3.- Arrastre y suelte el objeto "ImgCanvas" al formulario.

4.- Haga doble clic en el objeto image, seleccione el método "BeforeDraw"

5.- Para hacer nuestros dibujos más sencillos, dejamos Intellisense activado para la propiedad oGfx del objeto Graphics en el ImageCanvas.

Ahora, comience por agregar algún código:

WITH _Screen.System.Drawing
* Activar IntelliSense para "This.oGfx"
Local loGfx As xfcGraphics
loGfx = This.oGfx
* Probar IntelliSense para "This.oGfx"
* Escriba letra a letra el siguiente texto:
loGfx.

Este simple truco va a traernos IntelliSense cada vez que escriba "loGfx."

Recomiendo además que de un vistazo al escrito anterior, que muestra algunos otros consejos sobre IntelliSense, cuando trabajan con GdiPlus-X, "Be more productive with GdiPlus-X". (Nota de la traductora: Este escrito ha sido traducido y publicado bajo el título: "Sea más productivo con GDI+" en PortalFox)

6.- Ahora agregamos algún código al método "BeforeDraw" para ver su Canvas en acción ( puede ver inmediatamente cada parte del código la imagen resultante que fue creada):

Copie y pegue el siguiente código en el método BeforeDraw de Image Canvas:

WITH _Screen.System.Drawing
* Para activar IntelliSense para "This.oGfx"
Local loGfx As xfcGraphics
loGfx = This.oGfx

* Crear una brocha con degradado lineal
Local loGradBrsh As xfcLinearGradientBrush
loGradBrsh = .Drawing2D.LinearGradientBrush.New(;
  This.Rectangle, .Color.LightBlue, .Color.DarkBlue, 1)
* Dibujar un rectángulo que utiliza todo el rectángulo desde el tapiz y la brocha degradada
loGfx.FillRectangle(loGradBrsh, This.Rectangle)

* Dibujar un triángulo
Dimension laPoints(3)
laPoints(1) = .Point.New(20, 100)
laPoints(2) = .Point.New(90, 100)
laPoints(3) = .Point.New(55, 40)
loGfx.FillPolygon(.Brushes.Green, @laPoints)

* Dibujar dos rectángulos
loGfx.FillRectangle(.Brushes.Yellow, 20, 100, 70, 50)
loGfx.FillRectangle(.Brushes.Gray, 90, 100, 100, 50)

* Dibujar un trapecio
Dimension laPoints(4)
laPoints(1) = .Point.New(55, 40)
laPoints(2) = .Point.New(90, 100)
laPoints(3) = .Point.New(190, 100)
laPoints(4) = .Point.New(155, 40)
loGfx.FillPolygon(.SolidBrush.New(.Color.FromRGB(128,0,0)), @laPoints)

* Crear un camino que contenga dos curvas
Local myPath As xfcGraphicsPath
myPath = .Drawing2D.GraphicsPath.New()
myPath.StartFigure()
Dimension points(4)
points(1) = .Point.New(45, 150)
points(2) = .Point.New(65, 170)
points(3) = .Point.New(45, 190)
points(4) = .Point.New(65, 210)
myPath.AddCurve(@points)
myPath.AddLine(.Point.New(65,210), .Point.New(85, 210))
points(1) = .Point.New(85, 210)
points(2) = .Point.New(65, 190)
points(3) = .Point.New(85, 170)
points(4) = .Point.New(65, 150)
myPath.AddCurve(@points)
myPath.AddLine(.Point.New(65,150), .Point.New(45, 150))
* Dibujar el camino
loGfx.FillPath(.Brushes.Orange, myPath)
loGfx.DrawPath(.Pen.New(.Color.Black, 1), myPath) && Black Border

* Dibujar el Sol
Local loPath As xfcGraphicsPath
loPath = .Drawing2D.GraphicsPath.New()
loPath.AddEllipse(280, 20, 40, 40)
Local loPathGradBrush As xfcPathGradientBrush
loPathGradBrush = .Drawing2D.PathGradientBrush.New(loPath)
loPathGradBrush.CenterColor = .Color.Red
loPathGradBrush.SurroundColors[1] = .Color.Yellow
loGfx.FillEllipse(loPathGradBrush, 280, 20, 40, 40)

* Dibujar una cadena
loGfx.DrawString("GdiPlusX is cool !!!", ;
  .Font.New("Tahoma", 20), .Brushes.Red, 110, This.Height - 40)

* Guardar la imagen en el disco
This.oBmp.Save("String.png", .Imaging.ImageFormat.Png)
* Imprimir la imagen
This.oBmp.ToPrinter()

ENDWITH 

Ejecute el formulario para ver el resultado

He aquí algunas cosas que se pueden hacer con el tapiz. Casi todos los ejemplos de la librería GdiPlus-X utilizan el objeto ImageCanvas, dadas sus facilidades para el dibujo.

Después que usted entienda cómo funciona, ¡ dibujar con GDI+ será como cortar un trozo de tarta !