Imagenes C#

Textos Universitarios / Serie Docencia
________________________________________________________________________
Captulo 3
Objetos Grficos
Los objetos grficos son la parte medular de GDI+. Se generan mediante la Clase
Graphics que define propiedades y mtodos para dibujar y rellenar objetos grficos. Cada
vez que una aplicacin necesita pintar o dibujar algo, necesita utilizar un objeto Graphics.
Esta es la razn fundamental para que comprendamos su configuracin y componentes y
veamos como usarlos en el desarrollo de grficos en lnea. Esta clase provee mtodos
para dibujar lneas, figuras, imgenes y texto. Un objeto Graphics almacena atributos del
dispositivo de pantalla y tambin de los elementos a dibujarse.
3.1 Clase Graphics113

Requisitos
Espacio de nombres: System.Drawing
Las secciones siguientes muestran los miembros expuestos por el objeto Graphics
3.1.1 Propiedades pblicas

Clip
ClipBounds
CompositingMode
CompositingQuality
DpiX
DpiY
InterpolationMode
IsClipEmpty
Obtiene o establece un objeto Region que

limita la regin de dibujo de este objeto
Graphics.
Obtiene una estructura RectangleF que
delimita la regin de recorte de este objeto
Graphics.
Obtiene un valor que especifica cmo se
dibujan las imgenes compuestas en este
objeto Graphics.
Obtiene o establece la calidad de procesado
de las imgenes compuestas que se dibujan
en este objeto Graphics.
Obtiene la resolucin horizontal de este
objeto Graphics.
Obtiene la resolucin vertical de este objeto
Graphics.
Obtiene o establece el modo de
interpolacin asociado al objeto Graphics.
Obtiene un valor que indica si la regin de
recorte de este objeto Graphics est vaca.
13
http://msdn2.microsoft.com/en-us/library/system.drawing.graphics(d=ide).aspx
Junio 3 de 2006
69
Jenaro C. Paz
________________________________________________________________________
Obtiene un valor que indica si la regin de
recorte visible de este objeto Graphics est
vaca.
Obtiene o establece la relacin de escala
entre las unidades universales y las unidades
de pgina de este objeto Graphics.
Obtiene o establece la unidad de medida
utilizada para las coordenadas de pgina en
este objeto Graphics.
Obtiene o establece un valor que especifica
cmo se calcula el desplazamiento de los
pxeles durante el procesamiento de este
objeto Graphics.
Obtiene o establece el origen de
procesamiento de este objeto Graphics para
la interpolacin y los pinceles de trama.
Obtiene o establece la calidad de
procesamiento de este objeto Graphics.
Obtiene o establece el valor de correccin
de gamma para el procesado de texto.
Obtiene o establece el modo de
procesamiento del texto asociado al objeto
Graphics.
Obtiene o establece la transformacin
universal de este objeto Graphics.
Obtiene o establece el rectngulo
delimitador que corresponde a la regin de
recorte visible de este objeto Graphics.
IsVisibleClipEmpty
PageScale
PageUnit
PixelOffsetMode
RenderingOrigin
SmoothingMode
TextContrast
TextRenderingHint
Transform
VisibleClipBounds
Tabla 3.1. Miembros de la clase Graphics
3.1.2 Mtodos pblicos

AddMetafileComment
BeginContainer
Clear
CreateObjRef (se hereda de

70
Agrega un comentario al objeto Metafile

actual.
Sobrecargado. Guarda un contenedor de
grficos con el estado actual de este objeto
Graphics y abre y utiliza un nuevo
contenedor de grficos.
Borra toda la superficie de dibujo y la
rellena con el color de fondo especificado.
Crea un objeto que contiene toda la

________________________________________________________________________
MarshalByRefObject)
Dispose
EndContainer
EnumerateMetafile
Equals (se hereda de Object)
ExcludeClip
Flush
FromHdc
FromHdcInternal
FromHwnd
FromHwndInternal
FromImage
GetHalftonePalette
GetHashCode (se hereda de Object)
GetHdc
GetLifetimeService (se hereda de
informacin relevante necesaria para

generar un proxy utilizado para comunicarse
con un objeto remoto.
Libera todos los recursos utilizados por este
objeto Graphics.
Cierra el contenedor de grficos actual y
restaura el estado que tena este objeto
Graphics al estado guardado mediante una
llamada al mtodo BeginContainer.
Sobrecargado. Enva los registros del objeto
Metafile especificado, de uno en uno, a un
mtodo de devolucin de llamada para su
presentacin en un punto determinado.
Sobrecargado. Determina si dos instancias
de Object son iguales.
Sobrecargado. Actualiza la regin de recorte
de este objeto Graphics con el fin de
excluir el rea especificada por una
estructura Rectangle.
Sobrecargado. Fuerza la ejecucin de todas
las operaciones de grficos pendientes y
devuelve inmediatamente el control sin
esperar a que finalicen las operaciones.
Sobrecargado. Crea un nuevo objeto
Graphics a partir del identificador
especificado en un contexto de dispositivo.
Mtodo interno. No utilizar.
Crea un nuevo objeto Graphics a partir del
identificador especificado de una ventana.
Crea un nuevo objeto Graphics a partir del
objeto Image especificado.
Obtiene un identificador de la paleta actual
de medios tonos de Windows.
Sirve como funcin hash para un tipo
concreto, apropiado para su utilizacin en
algoritmos de hash y estructuras de datos
como las tablas hash.
Obtiene el identificador del contexto de
dispositivo asociado a este objeto Graphics.
Recupera el objeto de servicio de duracin
71
Jenaro C. Paz
________________________________________________________________________
MarshalByRefObject)
GetNearestColor
GetType (se hereda de Object)
InitializeLifetimeService (se hereda de

MarshalByRefObject)
IntersectClip
IsVisible
MeasureCharacterRanges
MeasureString
MultiplyTransform
ReleaseHdc
ReleaseHdcInternal
ResetClip
ResetTransform
Restore
RotateTransform
72
actual que controla la directiva de duracin

de esta instancia.
Obtiene el color ms prximo a la estructura
Color especificada.
Obtiene el objeto Type de la instancia
actual.
Obtiene un objeto de servicio de duracin
para controlar la directiva de duracin de
esta instancia.
Sobrecargado. Actualiza la regin de recorte
del objeto Graphics como la interseccin de
la regin de recorte actual y la estructura
Rectangle especificada.
Sobrecargado. Indica si el punto
especificado por un par de coordenadas se
halla contenido en la regin de recorte
visible de este objeto Graphics.
Obtiene una matriz de objetos Region, cada
uno de los cuales delimita un intervalo de
posiciones de caracteres dentro de la cadena
especificada.
Sobrecargado. Mide la cadena especificada
al dibujarla con el objeto Font especificado.
Sobrecargado. Multiplica la transformacin
universal del objeto Graphics y
especificada en el objeto Matrix.
Libera un identificador de contexto de
dispositivo obtenido mediante una llamada
anterior al mtodo GetHdc de este objeto
Graphics.
Restablece la regin de recorte de este
objeto Graphics en una regin infinita.
Restablece la matriz de transformacin
universal de este objeto Graphics en la
matriz de identidades.
Restaura como estado de este objeto
Graphics el estado representado por un
objeto GraphicsState.
Sobrecargado. Aplica la rotacin
especificada a la matriz de transformacin

________________________________________________________________________
Save
ScaleTransform
SetClip
ToString (se hereda de Object)
TransformPoints
TranslateClip
TranslateTransform
de este objeto Graphics.

Guarda el estado actual de este objeto
Graphics e identifica el estado guardado
con un objeto GraphicsState.
Sobrecargado. Aplica la operacin de
cambio de escala especificada a la matriz de
transformacin de este objeto Graphics,
anteponindola a esta ltima.
Sobrecargado. Establece la regin de recorte
de este objeto Graphics en la propiedad
Clip del objeto Graphics especificado.
Devuelve un objeto String que representa al
objeto actual.
Sobrecargado. Transforma una matriz de
puntos de un espacio de coordenadas a otro
utilizando las transformaciones universal y
de pgina actuales de este objeto Graphics.
Sobrecargado. Convierte la regin de
recorte de este objeto Graphics usando las
cantidades especificadas en las direcciones
horizontal y vertical.
Sobrecargado. Antepone la conversin
especificada a la matriz de transformacin
de este objeto Graphics.
3.1.2.1 Mtodos pblicos para el dibujo

DrawArc (1)
DrawBezier (2)
DrawBeziers (3)
DrawClosedCurve (4)
DrawCurve (5)
Sobrecargado. Dibuja una imagen que

representa una parte de una elipse
especificada por un par de coordenadas, un
valor de ancho y un valor de alto.
Sobrecargado. Dibuja una curva spline de
Bzier definida por cuatro estructuras Point.
Sobrecargado. Dibuja una serie de curvas
spline de Bzier a partir de una matriz de
estructuras Point.
Sobrecargado. Dibuja una curva spline
cardinal cerrada, definida por una matriz de
estructuras Point.
Sobrecargado. Dibuja una curva spline
cardinal a travs de una matriz especificada
de estructuras Point.
73
Jenaro C. Paz
________________________________________________________________________
DrawEllipse (6)
DrawIcon (7)
DrawIconUnstretched (8)
DrawImage (9)
DrawImageUnscaled (10)
DrawLine (11)
DrawLines (12)
DrawPath (13)
DrawPie (14)
DrawPolygon (15)
DrawRectangle (16)
DrawRectangles (17)
DrawString (18)
74
Sobrecargado. Dibuja una elipse definida

por un rectngulo delimitador especificado
por un par de coordenadas, un valor de alto
y un valor de ancho.
Sobrecargado. Dibuja la imagen
representada por el objeto Icon especificado
en las coordenadas sealadas.
Dibuja la imagen representada por el objeto
Icon especificado sin transformar a escala la
imagen.
Sobrecargado. Dibuja el objeto Image
especificado en la ubicacin especificada y
con el tamao original.
Sobrecargado. Dibuja la imagen
especificada con su tamao fsico original y
en la ubicacin especificada por un par de
coordenadas.
Sobrecargado. Dibuja una lnea que conecta
los dos puntos especificados por los pares
de coordenadas.
Sobrecargado. Dibuja una serie de
segmentos de lnea que conectan una matriz
de estructuras Point.
Dibuja un objeto GraphicsPath.
Sobrecargado. Dibuja una forma circular
definida por una elipse y determinada por
un par de coordenadas, unos valores de
ancho y alto y dos lneas radiales.
Sobrecargado. Dibuja un polgono definido
por una matriz de estructuras Point.
Sobrecargado. Dibuja un rectngulo
especificado por un par de coordenadas, un
valor de ancho y un valor de alto.
Sobrecargado. Dibuja una serie de
rectngulos especificados por las estructuras
Rectangle.
Sobrecargado. Dibuja la cadena de texto
especificada en la ubicacin especificada y
con los objetos Brush y Font especificados.

________________________________________________________________________
3.1.2.1.1 Dibujando imgenes mediante una forma Web14
En esta seccin se presentan diferentes formas Web y su cdigo adjunto para ejemplificar
los mtodos de dibujo (1) al (18) de la seccin 3.1.2.1 (Mtodos pblicos para el dibujo).
3.1.2.1.1.1 Generacin del lienzo de dibujo definido por su color y tamao.
Forma DrawBG.aspx
Figura 3.1. Identificadores para los controles de la forma DrawBG.aspx
DrawBG.aspx.cs
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.ComponentModel;
System.Data;
System.Drawing;
System.Web;
System.Web.SessionState;
System.Web.UI;
System.Web.UI.WebControls;
System.Web.UI.HtmlControls;
namespace JCPGraphics
{
/// <summary>
/// Summary description for DrawBG.
14
A partir de esta seccin todos los programas, codigo fuente y aplicaciones Web son propiedad intelectual
del autor.
75
Jenaro C. Paz
________________________________________________________________________
/// </summary>
public class DrawBG : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox txtWidth;
protected System.Web.UI.WebControls.TextBox txtHeight;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Button btnBuild;
private void Page_Load(object sender, System.EventArgs e)
{
//
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.btnBuild.Click += new System.EventHandler(this.btnBuild_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void btnBuild_Click(object sender, System.EventArgs e)
{
string recHeight = txtHeight.Text;
string recWidth = txtWidth.Text;
Response.Write("<img border='0' src='Server_bg.aspx?valueH=" +
recHeight + "&valueW=" + recWidth + "'>");
Response.Write("Just the Background
Rectangle!");
}
}
}
Listado 3.1. Cdigo asociado con la forma DrawBG.aspx
En el listado 3.1 encontramos definido el mtodo btnBuild_Click que se ejecuta cuando

el usuario pulsa sobre el botn con identificador btnBuild. En este mtodo se lleva a
cabo lo siguiente:
1. Se almacenan las dimensiones de la imagen a generar en las variables recHeight
y recWidth
2. Se llama el mtodo Response.Write para mandar al documento Web la cadena
76

________________________________________________________________________
"<img border='0' src='Server_bg.aspx?valueH=" + recHeight +
&valueW=" + recWidth + "'>"
3. La forma Web Server_bg.aspx utiliza los parmetros mencionados que le son

pasados mediante el QueryString.
Server_bg.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
System.Drawing.Imaging;
{
/// <summary>
/// Summary description for rectServer.
/// </summary>
public class Server_bg : System.Web.UI.Page
{
int w1,h1;
Color bgColor=Color.LightGray;
//===================================================================
{
w1 = UInt16.Parse(Request.QueryString["valueW"]);
h1 = UInt16.Parse(Request.QueryString["valueH"]);
// Create a Stream in memory to save the image
MemoryStream memStream = canvasAndImage();
Response.Clear();
// Send the memory image to Browser in binary mode
memStream.WriteTo(Response.OutputStream);
}
//===================================================================
public MemoryStream canvasAndImage()
{
// Define a Rectangle to be the BG rectangle
Rectangle bgRect = new Rectangle(0,0,w1,h1);
// The bitmap Object used to work with images defined by
// pixel data
Bitmap pixelImage = new Bitmap(w1,h1);
// 1) Will be used to build the new Graphics object
// 2) Whatever you do with the Graphics object you afect
// the image object!
Graphics g = Graphics.FromImage(pixelImage);
// Fill the interior of the bg rectangle
g.FillRectangle(new SolidBrush(bgColor), bgRect);
77
Jenaro C. Paz
________________________________________________________________________
MemoryStream aStream = new MemoryStream();
pixelImage.Save(aStream,ImageFormat.Png);
// Bmp, Jpeg, Png, Gif
return aStream;
}
//===================================================================
#region Web Form Designer generated code
{
//
// CODEGEN: This call is required by the ASP.NET Web Form
// Designer.
//
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
{
}
#endregion
}
}
Listado 3.2. Cdigo asociado con la forma Server_bg.aspx
En la Figura 3.2 se presenta el resultado obtenido en el Navegador de Internet
Figura 3.2. Lienzo de dibujo definido por su color y su tamao
78

________________________________________________________________________
Si comparamos los listados 2.2 y 3.2 encontramos que la clase del Servidor en el ltimo,
ha sido reestructurada de la siguiente manera:
public class Server_xx : System.Web.UI.Page
{
// data members
int w1,h1,..;
// method Page_Load() that read info from QueryString
// call the method to build a special kind of Image
// and Writes to the Browser
{
...
MemoryStream memStream = canvasAndImage();
Response.Clear();
}
// method canvasAndImage()
{
// this method contains the logic to
// build our GDI+ Image
}
...
}
Listado 3.3 Estructura de las clases Server_xx que se presentan en este captulo
3.1.2.1.1.2 Dibujando lneas sobre un lienzo

Para dibujar lneas con GDI+ es necesario crear un objeto Graphics y un objeto Pen. El
objeto Graphics proporciona los mtodos que realmente realizan el dibujo, y el objeto
Pen almacena atributos, como el estilo, el ancho y el color de lnea. Para dibujar una
lnea, llame al mtodo DrawLine del objeto Graphics. El objeto Pen se pasa como uno de
los argumentos del mtodo DrawLine. El siguiente cdigo dibuja una lnea del punto (4,
1) al punto (12, 5):
[C#]
myGraphics.DrawLine(myPen, 4, 1, 12, 5);
DrawLine es un mtodo sobrecargado de la clase Graphics, de modo que existen varias

formas de suministrar argumentos a dicho mtodo. Por ejemplo, se pueden construir dos
objetos Point y pasarlos como argumentos del mtodo DrawLine:
[C#]
Point myStartPoint = new Point(4, 1);
Point myEndPoint = new Point(12, 5);
myGraphics.DrawLine(myPen, myStartPoint, myEndPoint);
79
Jenaro C. Paz
________________________________________________________________________
Cuando se construye un objeto Pen, pueden especificarse ciertos atributos. Por ejemplo,
un constructor Pen permite especificar el color y el ancho. En el siguiente ejemplo se
dibuja una lnea azul de ancho 2 de (10, 10) a (80, 30):
[C#]
Pen myPen = new Pen(Color.Red, 2);
El objeto Pen tambin expone propiedades, como DashStyle, que pueden utilizarse para
especificar caractersticas de la lnea. En el siguiente cdigo se dibuja una lnea
discontinua de (10, 40) a (30, 80):
[C#]
myPen.DashStyle = DashStyle.Dash;
Las propiedades del objeto Pen pueden utilizarse para establecer muchos ms atributos de
la lnea. Las propiedades StartCap y EndCap especifican la apariencia de los extremos de
la lnea; los extremos pueden ser lisos, cuadrados, redondeados, triangulares o pueden
tener una forma personalizada. La propiedad LineJoin permite especificar si las lneas
conectadas estn en ngulo (unidas con esquinas definidas), biseladas, redondeadas o
recortadas. En la siguiente ilustracin se muestran lneas con varios estilos de
combinacin y extremos.
Figura 3.3. Diferente tipo de extremos para lneas
La Forma DrawLines.aspx es idntica a la presentada en la Figura 2.13 y as mismo a

las que utilizaremos en el resto de este Capitulo, razn por la cual no la volveremos a
presentar, sin embargo el cdigo relacionado es:
DrawLines.aspx.cs
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
80

________________________________________________________________________
{
public class DrawLines : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox txtWidth;
protected System.Web.UI.WebControls.TextBox txtHeight;
protected System.Web.UI.WebControls.Button btnGenerar;
{
// Introducir aqu el cdigo de usuario para inicializar la pgina
}
#region Cdigo generado por el Diseador de Web Forms
{
//
base.OnInit(e);
}
/// <summary>
/// Mtodo necesario para admitir el Diseador.
/// No se puede modificar
/// el contenido del mtodo con el editor de cdigo.
/// </summary>
{
this.btnGenerar.Click += new
System.EventHandler(this.btnGenerar_Click);
}
#endregion
private void btnGenerar_Click(object sender, System.EventArgs e)
{
Response.Write("<img border='0' src='ServerLines.aspx?valueH=" +
Response.Write("Diferent kind of
Lines!");
}
}
}
Listado 3.4. Codigo asociado a la forma DrawLines.aspx
ServerLines.aspx.cs
using
using
using
using
System;
System.Collections;
System.Data;
81
Jenaro C. Paz
________________________________________________________________________
using
using
using
using
using
using
using
using
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerLines : System.Web.UI.Page
{
int w1,h1;
{
MemoryStream memStream
= canvasAndImage();
Response.Clear();
}
{
// pixel data
// +++++++++++++++Begins section related with this Server
//
/*
Pens to draw lines
*/
Pen aPen1 = new Pen(Color.MediumPurple, 1);
Pen aPen2 = new Pen(Color.Fuchsia, 2);
Pen aPen3 = new Pen(Color.LemonChiffon, 3);
Pen aPen4 = new Pen(Color.LightCoral, 4);
Pen aPen5 = new Pen(Color.MediumVioletRed, 5);
// Draw line using float coordinates
float x1 = 20.0F, y1 = 20.0F;
float x2 = 200.0F, y2 = 20.0F;
g.DrawLine(aPen1, x1, y1, x2, y2);
// Draw line using Point structure
Point pt1 = new Point(20, 20);
g.DrawLine(aPen2, pt1, pt2);
// Draw line using PointF structure
PointF ptf1 = new PointF(20.0F, 20.0F);
82

________________________________________________________________________
g.DrawLine(aPen3, ptf1, ptf2);
// Draw line using integer coordinates
int X1 = 20, Y1 = 200, X2 = 200, Y2 = 200;
g.DrawLine(aPen4, X1, Y1, X2, Y2);
// Draw line using integer coordinates
int Xa = 200, Ya = 20, Xb = 200, Yb = 200;
g.DrawLine(aPen5, Xa, Ya, Xb, Yb);
// Dispose of objects
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
aPen5.Dispose();
//
// +++++++++++++++Ends section related with this Server
pixelImage.Save(aStream, ImageFormat.Png);
return aStream
;
}
| Web Form Designer Generated Code |
}
}
Listado 3.5. Codigo asociado a la forma ServerLines.aspx
El resultado de la interaccin de estas dos formas se muestra en la Figura 3.4 que se

muestra a continuacin.
Figura 3.4. Diferente tipo de lineas sobre el lienzo
83
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando rectngulos sobre un lienzo
Dibujar rectngulos con GDI+ es parecido a dibujar lneas. Para dibujar un rectngulo
son necesarios un objeto Graphics y un objeto Pen. El objeto Graphics proporciona un
mtodo DrawRectangle, y el objeto Pen almacena atributos tales como el color y el ancho
de lnea. El objeto Pen se pasa como uno de los argumentos de mtodo DrawRectangle.
En el siguiente cdigo se dibuja un rectngulo con la esquina superior izquierda en (90,
40), un ancho de 70 y una altura de 40:
[C#]
myGraphics.DrawRectangle(myPen, 90, 40, 70, 40);
DrawRectangle es un mtodo sobrecargado de la clase Graphics, de modo que hay

varias formas de suministrar argumentos a dicho mtodo. Por ejemplo, se puede construir
un objeto Rectangle y pasarlo como argumento del mtodo DrawRectangle:
[C#]
Rectangle myRectangle = new Rectangle(60, 50, 90, 140);
myGraphics.DrawRectangle(myPen, myRectangle);
Un objeto Rectangle tiene mtodos y propiedades para manipular y recopilar

informacin sobre el rectngulo. Por ejemplo, los mtodos Inflate y Offset cambian el
tamao y la posicin del rectngulo. El mtodo IntersectsWith indica si el rectngulo
forma una interseccin con otro rectngulo determinado, y el mtodo Contains indica si
un punto determinado se encuentra dentro del rectngulo.
La nica diferencia entre el Listado 3.1 y el Listado 3.4 es el URL que se manda llamar
para generar la imagen, en este ltimo caso:
Response.Write("<img border='0' src='ServerLines.aspx?valueH=" +
Razn por la cual en lo sucesivo solo mostraremos el cdigo relacionado con el mtodo
btnGenerar_Click().
DrawRectangle.aspx.cs
{
Response.Write("<img border='0' rc='ServerRectangle.aspx?valueH="
+ recHeight + "&valueW=" + recWidth + "'>");
Response.Write("Two Rectangles!");
}
Listado 3.6. Cdigo asociado con la forma DrawRectangle.aspx
84

________________________________________________________________________
ServerRectangle.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerRectangle : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
//
/*
Pens to draw lines
*/
g.DrawRectangle(aPen3,20, 40, 80, 120);
g.DrawRectangle(aPen4,60, 80, 140, 50);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
aPen5.Dispose();
//
85
Jenaro C. Paz
________________________________________________________________________
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
aPen5.Dispose();
//
return aStream;
}
}
}
Listado 3.7. Cdigo asociado con la forma ServerRectangle.aspx

Figura 3.5. Rectangulos sobre el lienzo
86

________________________________________________________________________
Si sustituimos el metodo canvasAndImage por este otro
{
// pixel data
//
/*
Pens to draw lines
*/
RectangleF[] r1Array =
{
new RectangleF(0.0F, 0.0F, 400.0F, 400.0F),
};
RectangleF[] r2Array =
{
new RectangleF(190.0F, 190.0F, 20.0F, 20.0F)
};
g.DrawRectangles(aPen1,r1Array);
g.DrawRectangles(aPen4,r2Array);
aPen1.Dispose();
aPen4.Dispose();
87
Jenaro C. Paz
________________________________________________________________________
//
return aStream;
}
Listado 3.8. Codigo alterno asociado a la forma ServerRectangle.aspx
Obtendremos como resultado la imagen de la Figura 3.6.
Figura 3.6. Serie de rectangulos concentricos sobre el lienzo
3.1.2.1.1.1 Dibujando elipses y arcos sobre un lienzo

Una elipse se especifica mediante su rectngulo delimitador. En la siguiente ilustracin se
muestra una elipse junto con su rectngulo delimitador.
88

________________________________________________________________________
Figura 3.7. Elipse y su rectngulo delimitador
Para dibujar una elipse, son necesarios un objeto Graphics y un objeto Pen. El objeto
Graphics proporciona el mtodo DrawEllipse, y el objeto Pen almacena atributos como el
color y el ancho de la lnea que se utiliza para representar la elipse. El objeto Pen se pasa
como uno de los argumentos del mtodo DrawEllipse. El resto de los argumentos que se
pasan al mtodo DrawEllipse especifican el rectngulo delimitador de la elipse. En el
siguiente cdigo se dibuja una elipse; el rectngulo delimitador tiene un ancho de 60, una
altura de 30 y la esquina superior izquierda en (60, 50):
[C#]
myGraphics.DrawEllipse(myPen, 60, 50, 60, 30);
DrawEllipse es un mtodo sobrecargado de la clase Graphics, de modo que existen varias

formas de proporcionar argumentos a dicho mtodo. Por ejemplo, se puede construir un
objeto Rectangle y pasarlo como argumento del mtodo DrawEllipse:
[C#]
Rectangle myRectangle = new Rectangle(90, 50, 80, 30);
myGraphics.DrawEllipse(myPen, myRectangle);
Un arco es una parte de una elipse. Para dibujar un arco, se llama al mtodo DrawArc de
la clase Graphics. Los parmetros del mtodo DrawArc son los mismos que los del
mtodo DrawEllipse, a excepcin de que DrawArc precisa un ngulo inicial y un ngulo
de barrido. En el siguiente ejemplo se dibuja un arco con un ngulo inicial de 30 grados y
un ngulo de barrido de 180 grados:
[C#]
myGraphics.DrawArc(myPen, 100, 50, 140, 70, 30, 180);
En la siguiente ilustracin se muestran el arco, la elipse y el rectngulo delimitador.
Figura 3.8. Arco de una elipse y su rectngulo delimitador
89
Jenaro C. Paz
________________________________________________________________________
Veamos ahora como aplicar lo anterior para trabajar con formas Web.
Forma DrawEllipses.aspx.cs
{
Response.Write("<img border='0' src='ServerEllipses.aspx?valueH=" +
Response.Write("Three Ellipses!");
}
Listado 3.9. Cdigo asociado con la forma DrawEllipses.aspx
Forma ServerEllipses.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerEllipses : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
90

________________________________________________________________________
//
//
Pens to draw Ellipses
g.DrawEllipse(aPen2,myRect.X+4,myRect.Y+4,myRect.Width-8,
myRect.Height-8);
g.DrawEllipse(aPen3,60, 60, 120, 120);
g.DrawEllipse(aPen1,80.0F, 80.0F, 140.0F, 50.0F);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
//
return aStream
;
}
}
}
Listado 3.10. Cdigo asociado con la forma ServerEllipses.aspx

Figura 3.9. Diferentes elipses sobre el lienzo
91
Jenaro C. Paz
________________________________________________________________________
Forma DrawArcs.aspx.cs
{
Response.Write("<img border='0' src='ServerArcs.aspx?valueH=" +
Response.Write("Diferent Arcs!");
}
Listado 3.11. Codigo asociado a la forma DrawArcs.aspx
Forma ServerArcs.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerArcs : System.Web.UI.Page
{
int w1,h1;
{
MemoryStream memStream = buildImage();
Response.Clear();
}
public MemoryStream buildImage()
{
// pixel data
92

________________________________________________________________________
//
//
Pens to draw lines
Pen redPen = new Pen(Color.Red, 3);
Pen bluePen = new Pen(Color.Blue,2);
Pen greenPen = new Pen(Color.Green,4);
float startAngle = 45.0f;
float sweepAngle = 90.0f;
Rectangle rect = new Rectangle(20, 20, 200, 200);
g.DrawArc(redPen,rect, startAngle, sweepAngle);
g.DrawArc(bluePen,20,30,50,70, 90.0F, 135.0F);
g.DrawArc(bluePen,170,30,50,70, 90, -135);
g.DrawArc(greenPen,110,120,20,20,0,360);
//
return aStream;
}
}
}
Listado 3.12. Cdigo asociado a la forma ServerArcs.aspx

Figura 3.10. Diferente tipo de arcos sobre el lienzo
93
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando Polgonos sobre un lienzo
Un polgono es una forma cerrada con tres o ms lneas rectas. Por ejemplo, un tringulo
es un polgono con tres lados, un rectngulo es un polgono con cuatro lados y un
pentgono es un polgono con cinco lados. En la siguiente ilustracin se muestran varios
polgonos.
Figura 3.11. Ejemplo de Polgonos
Para dibujar un polgono, son necesarios un objeto Graphics, un objeto Pen y un arreglo
de objetos Point (o PointF). El objeto Graphics proporciona el mtodo DrawPolygon.
El objeto Pen almacena atributos, como el ancho y el color de la lnea utilizada para
representar el polgono, y el arreglo de objetos Point almacena los puntos que se van a
conectar mediante lneas rectas. El objeto Pen y el arreglo de objetos Point se pasan
como argumentos del mtodo DrawPolygon. En el siguiente ejemplo se dibuja un
polgono de tres lados. Tenga en cuenta que slo existen tres puntos en myPointArray: (0,
0), (45, 25) y (25, 50). El mtodo DrawPolygon cierra el polgono de forma automtica
ya que dibuja una lnea desde (25, 50) hacia atrs hasta el punto inicial (0, 0).
[C#]
Point[] myPointArray =
{new Point(0, 0), new Point(45, 25), new Point(25, 50)};
myGraphics.DrawPolygon(myPen, myPointArray);
En la siguiente ilustracin se muestra el polgono.
Figura 3.12. Dibujo de un polgono con GDI+
94

________________________________________________________________________
DrawPolygon.aspx.cs
{
Response.Write("<img border='0' src='ServerPolygon.aspx?valueH=" +
recHeight +"&valueW=" + recWidth + "'>");
Response.Write("a Line Star and two
Polygons!");
}
Listado 3.13. Cdigo asociado con la forma DrawPolygon
ServerPolygon.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerPolygon : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
95
Jenaro C. Paz
________________________________________________________________________
/*
Pens to draw lines
*/
PointF[] starArray =
{
new PointF(125.0F, 30.0F),
};
PointF P1 =new PointF(125.0F, 30.0F);
PointF[] polyArray =
{
P1, P2, P3, P4, P5, P6
};
PointF p1 =new PointF(147.0F, 99.0F);
PointF[] poly2Array =
{
p1, p2, p3, p4, p5, p6
};
// Draw polygon
g.DrawPolygon(aPen3,polyArray);
g.DrawPolygon(aPen1,poly2Array);
g.DrawLines(aPen2,starArray);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
96

________________________________________________________________________
aPen5.Dispose();
//
return aStream;
}
}
}
Listado 3.14. Cdigo asociado con la forma ServerPolygon

Figura 3.13. Diferente tipo de polgonos sobre el lienzo
97
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando Curvas sobre un lienzo
Una curva spline cardinal es una secuencia de curvas individuales combinadas para
formar una curva mayor. La curva spline se especifica mediante una matriz de puntos y
un parmetro de tensin. Una curva spline cardinal pasa suavemente por cada punto de la
matriz; no hay esquinas definidas ni cambios abruptos en la tensin de la curva. En la
siguiente ilustracin se muestra un conjunto de puntos y una curva spline cardinal que
pasa por cada punto del conjunto.
Figura 3.14. Curva spline definida por varios puntos
Una curva spline fsica es un trozo fino de madera o de otro material flexible. Antes de la
aparicin de las curvas spline matemticas, los diseadores utilizaban curvas spline
fsicas para dibujar curvas. Un diseador colocaba la curva spline en un trozo de papel y
la delimitaba con respecto a un conjunto determinado de puntos. Despus, el diseador
poda crear una curva dibujando a lo largo de la curva spline con un lpiz. Un conjunto
determinado de puntos podra generar varias curvas, en funcin de las propiedades de la
curva spline fsica. Por ejemplo, una curva spline con una resistencia alta a curvarse
genera una curva distinta a la de una curva spline extremadamente flexible.
Las frmulas que se utilizan para calcular curvas spline matemticas se basan en las
propiedades de barras flexibles, de modo que las curvas creadas por curvas spline
matemticas son similares a las curvas que se crearon una vez con las curvas spline
fsicas. Del mismo modo que las curvas spline fsicas de distinta tensin generan curvas
distintas a travs de un conjunto determinado de puntos, las curvas spline matemticas
con valores diferentes para el parmetro de tensin generan curvas diferentes a travs de
un conjunto determinado de puntos. En la siguiente ilustracin se muestran cuatro curvas
spline cardinales que pasan por el mismo conjunto de puntos. Se muestra la tensin de
cada curva spline. Tenga en cuenta que una tensin de 0 se corresponde con una tensin
fsica infinita, que obliga a la curva a tomar el camino ms corto (lneas rectas) entre
puntos. Una tensin de 1 corresponde a la ausencia de tensin fsica, que permite a la
curva spline tomar el trazado de menor curvatura total. Con valores de tensin superiores
a 1, la curva se comporta como un muelle comprimido, al que se empuja para tomar un
trazado ms largo.
98

________________________________________________________________________
Figura 3.15. Aplicando diferentes tensiones a una curva spline
Tenga en cuenta que las cuatro curvas spline de la ilustracin anterior comparten la
misma lnea tangente en el punto inicial. La tangente es la lnea que va desde el punto
inicial hasta el siguiente punto de la curva. De forma similar, la tangente compartida en el
punto final es la lnea que va desde el punto final hasta el punto anterior de la curva.
Para dibujar una curva spline cardinal, es necesario un objeto Graphics, un objeto Pen y
un arreglo de objetos Point. El objeto Graphics proporciona el mtodo DrawCurve, que
dibuja la curva spline, y el objeto Pen almacena atributos de la curva spline, como el
color y el ancho de lnea. El arreglo de objetos Point almacena los puntos por los que
pasar la curva. En el siguiente ejemplo se dibuja una curva spline cardinal que pasa por
los puntos de myPointArray. La tensin es el tercer parmetro.
[C#]
myGraphics.DrawCurve(myPen, myPointArray, 1.5f);
DrawCurves.aspx.cs
{
Response.Write("<img border='0' src='ServerCurves.aspx?valueH=" +
Response.Write("Drawing Open Curves!");
}
Listado 3.15. Codigo asociado a la forma DrawCurves.aspx
ServerCurves.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
99
Jenaro C. Paz
________________________________________________________________________
using System.Drawing.Imaging;
{
public class ServerCurves : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
//
/*
Pens to draw lines
*/
{
};
100

________________________________________________________________________
{
P1, P2, P3, P4, P5, P6
};
{
p1, p2, p3, p4, p5
};
g.DrawCurve(aPen3,polyArray, 1,3,3.0F);
g.DrawCurve(aPen1,poly2Array, 1.5F);
g.DrawCurve(aPen2,starArray,1,8, 1.0F);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
//
return aStream;
}
}
}
Listado 3.16. Cdigo asociado con la forma ServerCurves.aspx

Figura 3.16. Curvas abiertas sobre el lienzo
101
Jenaro C. Paz
________________________________________________________________________
Sustituyendo el mtodo canvasAndImage() por este otro
{
// pixel data
//
/*
Pens to draw lines
*/
{
//new PointF(195.0F, 30.0F),
};
{
P1, P2, P3, P4, P5
};
{
p1, p2, p3, p4, p5
};
102

________________________________________________________________________
// Draw three closed curves
g.DrawClosedCurve(aPen2, starArray,
2.0F,System.Drawing.Drawing2D.FillMode.Winding);
g.DrawClosedCurve(aPen3, polyArray,
g.DrawClosedCurve(aPen1,poly2Array,
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
//
return aStream;
}
Listado 3.16b. Cdigo alterno asociado con la forma ServerCurves.aspx
Se obtiene una imagen con curvas cerradas sobre un lienzo como lo muestra la Figura
3.17.
Figura 3.17. Curvas cerradas sobre un lienzo
3.1.2.1.1.1 Dibujando Curvas Bzier sobre un lienzo

Una curva spline de Bzier es una curva que se especifica con cuatro puntos: dos puntos
finales (p1 y p2) y dos puntos de control (c1 y c2). La curva comienza en p1 y acaba en
p2. La curva no pasa por los puntos de control, pero stos se comportan como imanes, y
tiran de la curva en ciertas direcciones e influyen en el modo en que la curva se dobla. En
la siguiente ilustracin se muestra una curva de Bzier con los extremos y los puntos de
control.
103
Jenaro C. Paz
________________________________________________________________________
Figura 3.18. Curva Bezier entre p1 y p2 con puntos de control c1 y c2
Tenga en cuenta que la curva comienza en p1 y avanza hacia el punto de control c1. La
lnea tangente a la curva en p1 es la lnea que va de p1 a c1. Tenga en cuenta tambin que
la lnea tangente en el extremo p2 es la lnea que va de c2 a p2.
Para dibujar una curva spline de Bzier, son necesarios un objeto Graphics y un objeto
Pen. El objeto Graphics proporciona el mtodo DrawBezier, y el objeto Pen almacena
atributos como el ancho y el color de la lnea que se utiliza para representar la curva. El
objeto Pen se pasa como uno de los argumentos del mtodo DrawBezier. El resto de los
argumentos que se pasan al mtodo DrawBezier son los extremos y los puntos de
control. En el siguiente ejemplo se dibuja una curva spline de Bzier con un punto inicial
(0, 0), dos puntos de control (40, 20) y (80, 150) y un punto final (100, 10):
[C#]
myGraphics.DrawBezier(myPen, 0, 0, 40, 20, 80, 150, 100, 10);
En la siguiente ilustracin se muestra la curva, los puntos de control y dos lneas

tangentes.
Figura 3.19. Una curva spline de Bezier mediante GDI+
Pierre Bzier desarroll por primera vez las curvas spline de Bzier para el diseo en la
industria del automvil. Desde entonces, han resultado muy tiles en muchos tipos de
CAD (computer-aided design, diseo asistido por computadora) y tambin se utilizan
para definir los contornos de fuentes. Las curvas spline de Bzier pueden generar una
gran variedad de formas, algunas de las cuales se muestran en la siguiente ilustracin.
104

________________________________________________________________________
Figura 3.20. Diferentes curves Bezier
DrawBezier.aspx.cs
{
Response.Write("<img border='0' src='ServerBezier.aspx?valueH=" +
Response.Write("Diferent Beziers!");
}
Listado 3.17. Codigo asociado con la forma DrawBezier.aspx
ServerBezier.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerBezier : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
105
Jenaro C. Paz
________________________________________________________________________
{
// pixel data
//
Pens to draw lines
// Draw a Bezier using Points
Point pt3 = new Point(140,30);
Point pt4 = new Point(200,350);
g.DrawBezier(aPen2, pt1,pt3,pt4,pt2);
// Draw a Bezier using an Array of Points
PointF p1 = new PointF(20.0F, 50.0F);
PointF[] ptsBezier =
{
p1, p2, p3, p4, p5, p6, p7
};
g.DrawBeziers(aPen3, ptsBezier);
// Draw Bziers
g.DrawBezier(aPen1, 30, 30,
80, 70, 120, 190, 140, 70);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
//
return aStream;
}
}
}
Listado 3.18. Codigo asociado a la forma ServerBezier.aspx
106

________________________________________________________________________
El resultado de la interaccin de las dos formas se muestra en la Figura 3.21.
Figura 3.21. Diferentes curves Bezier sobre el lienzo
3.1.2.1.1.1 Dibujando Trazados sobre un lienzo

Los trazados se forman mediante la combinacin de lneas, rectngulos y curvas simples.
En GDI+, el objeto GraphicsPath permite recopilar una secuencia de estas unidades de
creacin en una nica unidad. La secuencia completa de lneas, rectngulos, polgonos y
curvas puede dibujarse pues con una llamada al mtodo DrawPath de la clase Graphics
En la siguiente ilustracin se muestra un trazado creado mediante la combinacin de una
lnea, un arco, una curva spline de Bzier y una curva spline cardinal.
Figura 3.22. Ejemplo de Trazado
107
Jenaro C. Paz
________________________________________________________________________
La clase GraphicsPath proporciona los siguientes mtodos para la creacin de una

secuencia de elementos que se van a dibujar: AddLine, AddRectangle, AddEllipse,
AddArc, AddPolygon, AddCurve (para curvas spline cardinales) y AddBezier. Cada
uno de estos mtodos est sobrecargado, es decir, cada mtodo admite varias listas de
parmetros distintas. Por ejemplo, una variacin del mtodo AddLine recibe cuatro
enteros, y otra variacin del mtodo AddLine recibe dos objetos Point.
Los mtodos que existen para agregar lneas, rectngulos y curvas spline de Bzier a un
trazado disponen de varios mtodos asociados que agregan diversos elementos al trazado
en una nica llamada: AddLines, AddRectangles y AddBeziers. Adems, los mtodos
AddCurve y AddArc disponen de mtodos asociados, AddClosedCurve y AddPie, que
agregan una curva cerrada o un sector al trazado.
Para dibujar un trazado, son necesarios un objeto Graphics, un objeto Pen y un objeto
GraphicsPath. El objeto Graphics proporciona el mtodo DrawPath, y el objeto Pen
almacena atributos como el ancho y el color de la lnea que se utiliza para representar el
trazado. El objeto GraphicsPath almacena la secuencia de lneas y curvas que componen
el trazado. El objeto Pen y el objeto GraphicsPath se pasan como argumentos del
mtodo DrawPath. En el siguiente ejemplo se dibuja un trazado que consta de una lnea,
una elipse y una curva spline de Bzier:
[C#]
myGraphicsPath.AddLine(0, 0, 30, 20);
myGraphicsPath.AddEllipse(20, 20, 20, 40);
myGraphicsPath.AddBezier(30, 60, 70, 60, 50, 30, 100, 10);
myGraphics.DrawPath(myPen, myGraphicsPath);
En la siguiente ilustracin se muestra el trazado.
Figura 3.23. Trazado generado con GDI+
Adems de agregar lneas, rectngulos y curvas a un trazado, se pueden agregar trazados

a un trazado. Esto permite combinar los trazados existentes para formar trazados enormes
y complejos.
[C#]
myGraphicsPath.AddPath(graphicsPath1, false);
myGraphicsPath.AddPath(graphicsPath2, false);
108

________________________________________________________________________
DrawPath.aspx.cs
{
Response.Write("<img border='0' src='ServerPath.aspx?valueH=" +
Response.Write("Making an Image with
Path!");
}
Listado 3.19. Cdigo asociado con la forma DrawPath.aspx
ServerPath.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerPath : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
109
Jenaro C. Paz
________________________________________________________________________
//
//
Pens to draw lines
// Draw line using PointF structure
GraphicsPath path = new GraphicsPath();
// Add a line to the path
path.AddLine(ptf1,ptf2);
// Add an ellipse to the path
path.AddEllipse(100, 50, 100, 100);
// Add three more lines
path.AddLine(X1, Y1, X2, Y2);
path.AddLine(Xa, Ya, Xb, Yb);
//path.AddLine(195, 120, 300, 120);
// Create a rectangle and call
// AddRectangle
path.AddRectangle(rect);
// Draw path
g.DrawPath(aPen1, path);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
aPen5.Dispose();
//
return aStream;
}
}
}
Listado 3.20. Cdigo asociado a la forma ServerPath.aspx
El resultado entre la interaccin de las dos formas se muestra en la Figura 3.24.
110

________________________________________________________________________
Figura 3.24. Trazado sobre lienzo
3.1.2.1.1.1 Dibujando Iconos sobre un lienzo

DrawIcon.aspx.cs
{
Response.Write("<img border='0' src='ServerIcon.aspx?valueH=" +
Response.Write("Draw Icons!");
}
Listado 3.21. Codigo asociado con la forma DrawIcon.aspx
ServerIcon.aspx.cs
using
using
using
using
using
using
using
using
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
111
Jenaro C. Paz
________________________________________________________________________
{
public class ServerIcon : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
//
//
Read the Icons from Folder (root)
Icon icon1 = new Icon(Server.MapPath("ar.ico"));
Icon icon2 = new Icon(Server.MapPath("be.ico"));
Icon icon3 = new Icon(Server.MapPath("br.ico"));
Icon icon4 = new Icon(Server.MapPath("ca.ico"));
Icon icon5 = new Icon(Server.MapPath("mx.ico"));
Icon icon6 = new Icon(Server.MapPath("uk.ico"));
int x1 = 20;
int y1 = 50;
int x2 = 60;
int y2 = 90;
int x3 = 100;
int y3 = 130;
int x4 = 140;
int y4 = 170;
int x5 = 180;
int y5 = 210;
int x6 = 220;
int y6 = 250;
g.DrawIcon(icon1, x1, y1);
112

________________________________________________________________________
//
return aStream;
}
}
}
Listado 3.22. Codigo asociado con la forma ServerIcon.aspx
El resultado entre la interaccin de las dos formas se muestra en la Figura 3.25.
Figura 3.25. Varios Iconos dibujados sobre el lienzo
113
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando Imgenes sobre un lienzo
DrawImage.aspx.cs
{
Response.Write("<img border='0' src='ServerImage.aspx?valueH=" +
recHeight +"&valueW=" + recWidth + "'>");
Response.Write("Draw an Image!");
}
Listado 3.23. Cdigo asociado con la forma DrawImage.aspx
ServerImage.aspx.cs
using
using
using
using
using
using
using
using
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerImage : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
114

________________________________________________________________________
//
// Load an Image from root Folder
Bitmap imageBitmap = new Bitmap(Server.MapPath("Textura.png"));
g.DrawImage(imageBitmap, 30, 30, imageBitmap.Width,
imageBitmap.Height);
//
return aStream;
}
}
}
Listado 3.24. Cdigo asociado con la forma ServerImage.aspx
El resultado de la interaccin entre las dos formas se muestra en la Figura 3.26.
Figura 3.26. Dibujo de una imagen sobre el lienzo
115
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando Pasteles sobre un lienzo
DrawPies.aspx.cs
{
Response.Write("<img border='0' src='ServerPies.aspx?valueH=" +
Response.Write("Three Pies!");
}
Listado 3.25. Cdigo asociado con la forma DrawPies.aspx
ServerPies.aspx.cs
using
using
using
using
using
using
using
using
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerPies : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
116

________________________________________________________________________
/*
Pens to draw lines
*/
g.DrawPie(aPen2,myRect.X+4,myRect.Y+4,myRect.Width-40,myRect.Height-40,
65,90);
g.DrawPie(aPen3,20, 30, 120, 120,280,110);
g.DrawPie(aPen4,170.0F, 20.0F, 140.0F, 140.0F, 20,170);
aPen1.Dispose();
aPen2.Dispose();
aPen3.Dispose();
aPen4.Dispose();
aPen5.Dispose();
return aStream;
}
}
}
Listado 3.26. Cdigo asociado con la forma ServerPies.aspx
El resultado se ejemplifica con la siguiente Figura 3.27.
Figura 3.27. Dibujo de Pies sobre el lienzo
117
Jenaro C. Paz
________________________________________________________________________
3.1.2.1.1.1 Dibujando Cadenas sobre un lienzo
DrawLetters.aspx.cs
{
Response.Write("<img border='0' src='ServerStrings.aspx?valueH="
+ recHeight +"&valueW=" + recWidth + "'>");
Response.Write("Just Read This!");
}
Listado 3.27. Codigo asociado con la forma DrawLetters.aspx
ServerStrings.aspx.cs
using
using
using
using
using
using
using
using
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerStrings : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
118

________________________________________________________________________
g.DrawString("Drawing GDI+ Strings for the Web!",
new Font("Verdana", 14),
new SolidBrush(Color.Blue),
new Point(42, 20));
StringFormat drawFormat = new StringFormat();
// Set string format flag to direction vertical,
// which draws text vertically
drawFormat.FormatFlags =
StringFormatFlags.DirectionVertical;
// Draw string
g.DrawString("Drawing Strings", new Font("Tahoma", 14),
Brushes.Purple, 20, 20, drawFormat);
return aStream;
}
}
}
Listado 3.28. Cdigo asociado a la forma ServerStrings.aspx
El resultado de la interaccin entre las dos formas se muestra en la Figura 3.28.
Figura 3.28. Dibujo de cadenas de caracteres sobre el lienzo
Si cambiamos el cdigo en el programa anterior , para ahora tener:

g.DrawString("Color Name :"+ bgColor.Name +
", A:"+bgColor.A.ToString() +
", R:"+bgColor.R.ToString() +
119
Jenaro C. Paz
________________________________________________________________________
", B:"+bgColor.B.ToString() +
", G:"+bgColor.G.ToString(),new Font("Verdana", 14),
new Point(42, 20) );
float h = bgColor.GetHue();
float s = bgColor.GetSaturation();
float v = bgColor.GetBrightness();
g.DrawString("Hue: "+ h.ToString() + "\n" +
"Saturation: "+ s.ToString() + "\n" +
"Brightness: "+ v.ToString(),new Font("Verdana", 14),
new Point(42, 70) );
Listado 3.29. Cdigo asociado a la forma ServerStrings.aspx modificado
Obtendremos un lienzo de un color especificado por el usuario en el cual se despliegan

sus componentes de Color en los dos sistemas ARGB y HSV.
Figura 3.29. Componentes del color en cadenas de caracteres sobre el lienzo
3.1.2.2 Mtodos Pblicos para rellenar

FillClosedCurve (1)
FillEllipse (2)
120
Sobrecargado. Rellena el interior de una

curva spline cardinal cerrada, definida por
una matriz de estructuras Point.

________________________________________________________________________
FillPath (3)
FillPie (4)
FillPolygon (5)
FillRectangle (6)
FillRectangles (7)
elipse definida por un rectngulo de

delimitacin especificado por un par de
coordenadas, un valor de alto y un valor de
ancho.
Rellena el interior de un objeto
GraphicsPath.
seccin de grfico circular definida por una
elipse, determinada por un par de
coordenadas, unos valores de ancho y alto y
dos lneas radiales.
Sobrecargado. Rellena el interior de un
polgono definido por una matriz de puntos,
especificados por estructuras Point.
Sobrecargado. Rellena el interior de un
rectngulo especificado por un par de
coordenadas, un valor de ancho y un valor
de alto.
serie de rectngulos especificados por
estructuras Rectangle.
3.1.2.2.1 Rellenando el interior de formas dibujadas en un lienzo

En esta seccin se presentan diferentes formas Web y su cdigo adjunto para ejemplificar
los mtodos de relleno (1) al (7) de la seccin 3.1.2.2 (Mtodos pblicos para rellenar).
3.1.2.2.1.1 Rellenando curvas cerradas
FillCCurves.aspx.cs
{
Response.Write("<img border='0'
src='ServerFillCCurves.aspx?valueH=" + recHeight +
"&valueW=" + recWidth + "'>");
Response.Write("Fill Closed
Curves!");
}
Listado 3.30. Codigo asociado a la forma FillCCurves.aspx
ServerFillCCurves.aspx.cs
using System;
121
Jenaro C. Paz
________________________________________________________________________
using
using
using
using
using
using
using
using
using
using
using
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerFillCCurves : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
SolidBrush lemonBrush = new SolidBrush(Color.LemonChiffon);
SolidBrush fuchsiaBrush = new SolidBrush(Color.Fuchsia);
SolidBrush coralBrush = new SolidBrush(Color.LightCoral);
{
new PointF(195.0F,
new PointF(217.0F,
new PointF(290.0F,
new PointF(231.0F,
new PointF(253.0F,
new PointF(195.0F,
new PointF(137.0F,
new PointF(159.0F,
122
30.0F),
99.0F),
99.0F),
142.0F),
210.0F),
168.0F),
210.0F),
142.0F),

________________________________________________________________________
};
PointF
PointF
PointF
PointF
PointF
PointF
P1
P2
P3
P4
P5
P6
=new
=new
=new
=new
=new
=new
PointF(195.0F,
PointF(290.0F,
PointF(253.0F,
PointF(137.0F,
PointF(100.0F,
PointF(195.0F,
30.0F);
99.0F);
210.0F);
210.0F);
99.0F);
30.0F);
{
P1, P2, P3, P4, P5
};
g.FillClosedCurve(lemonBrush,polyArray,
System.Drawing.Drawing2D.FillMode.Winding, 2.0F);
g.FillClosedCurve(coralBrush, polyArray,
g.FillClosedCurve(fuchsiaBrush, starArray,
return aStream;
}
}
}
Listado 3.31. Cdigo asociado con la forma ServerFillCCurves.aspx
El resultado de la interaccin entre estas dos formas genera la imagen mostrada en la

Figura 3.30.
Figura 3.30. Rellenado de curvas cerradas
123
Jenaro C. Paz
________________________________________________________________________
3.1.2.2.1.2 Rellenando elipses
FillEllipses.aspx.cs
{
src='ServerFillEllipses.aspx?valueH=" + recHeight +
}
Listado 3.32. Cdigo asociado a la forma FillEllipses.aspx
ServerFillEllipses.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerFillEllipses : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
124

________________________________________________________________________
// pixel data
SolidBrush rosyBrush = new SolidBrush(Color.RosyBrown);
SolidBrush burlyBrush = new SolidBrush(Color.BurlyWood);
SolidBrush greenBrush = new SolidBrush(Color.GreenYellow);
g.FillEllipse(rosyBrush,bgRect.X+4, bgRect.Y+4,
bgRect.Width-8,bgRect.Height-8);
g.FillEllipse(burlyBrush,60, 60, 120, 120);
g.FillEllipse(greenBrush,80.0F, 80.0F, 140.0F, 50.0F);
return aStream;
}
}
}
Listado 3.33. Cdigo asociado con la forma ServerFillEllipses.aspx

Figura 3.31.
.
Figura 3.31. Rellenado de tres elipses
125
Jenaro C. Paz
________________________________________________________________________
3.1.2.2.1.3 Rellenando trazos
FillPath.aspx.cs
{
src='ServerFillPath.aspx?valueH=" + recHeight +
}
Listado 3.34. Cdigo asociado a la forma FillPath.aspx
ServerFillPath.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerFillPath : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
126

________________________________________________________________________
// pixel data
// Create a new GraphicsPath instance
GraphicsPath path = new GraphicsPath();
int X1 = 20, Y1 = 200, X2 = 200, Y2 = 200;
int Xa = 20, Ya = 20, Xb = 20, Yb = 200;
// Add a line to the path
path.AddLine(ptf1,ptf2);
// Add an ellipse to the path
path.AddEllipse(100, 50, 100, 100);
// Add three more lines
path.AddLine(X1, Y1, X2, Y2);
path.AddLine(Xa, Ya, Xb, Yb);
// Create a rectangle and call
// AddRectangle
path.AddRectangle(rect);
// Draw path
SolidBrush violetBrush = new SolidBrush(Color.Violet);
g.FillPath(violetBrush, path);
return aStream;
}
}
}
Listado 3.35. Cdigo asociado con la forma ServerFillPath.aspx
127
Jenaro C. Paz
________________________________________________________________________
Figura 3.32
.
Figura 3.32. Rellenado de un trazo
3.1.2.2.1.4 Rellenando pasteles

FillPies.aspx.cs
{
src='ServerFillPies.aspx?valueH=" + recHeight +
}
Listado 3.36. Cdigo asociado a la forma FillPies.aspx
ServerFillPies.aspx.cs
using
using
using
using
using
using
using
using
using
128
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;

________________________________________________________________________
using System.Web.UI.HtmlControls;
using System.IO;
using System.Drawing.Imaging;
{
public class ServerFillPies : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
//Define three brushes
SolidBrush goldenBrush = new SolidBrush(Color.DarkGoldenrod);
SolidBrush burlyBrush = new SolidBrush(Color.BurlyWood);
SolidBrush indianBrush = new SolidBrush(Color.IndianRed);
g.FillPie(goldenBrush,bgRect.X+4,bgRect.Y+4,
bgRect.Width-40,bgRect.Height-40, 65,90);
g.FillPie(burlyBrush,20, 30, 120, 120,280,110);
g.FillPie(indianBrush,170.0F, 20.0F, 140.0F, 140.0F, 20,170);
return aStream;
}
}
}
Listado 3.37. Cdigo asociado con la forma ServerFillPies.aspx
129
Jenaro C. Paz
________________________________________________________________________
Figura 3.33
Figura 3.33. Rellenado de pasteles
3.1.2.2.1.5 Rellenando polgonos

FillPolygon.aspx.cs
{
src='ServerFillPolygon.aspx?valueH=" + recHeight +
}
Listado 3.38. Cdigo asociado a la forma FillPies.aspx
ServerFillPolygon.aspx.cs
using
using
using
using
using
using
using
130
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;

________________________________________________________________________
using
using
using
using
using
System.Web.UI;
System.IO;
{
public class ServerFillPolygon : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
// pixel data
PointF[] polyArray = {
P1, P2, P3, P4, P5, P6
};
PointF[] poly2Array = {
p1, p2, p3, p4, p5, p6
};
131
Jenaro C. Paz
________________________________________________________________________
SolidBrush lemonBrush = new SolidBrush(Color.LemonChiffon);
SolidBrush purpleBrush = new SolidBrush(Color.MediumPurple);
g.FillPolygon(lemonBrush,polyArray);
g.FillPolygon(purpleBrush,poly2Array);
return aStream;
}
}
}
Listado 3.39. Cdigo asociado con la forma ServerFillPolygon.aspx

Figura 3.34.
Figura 3.34. Rellenado de polgonos
132

________________________________________________________________________
3.1.2.2.1.6 Rellenando un rectngulo
FillRectangle.aspx.cs
{
src='ServerFillRectangle.aspx?valueH=" + recHeight +
}
Listado 3.40. Cdigo asociado a la forma FillRectangle.aspx
ServerFillRectangle.aspx.cs
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections;
System.Data;
System.Drawing;
System.Web;
System.Web.UI;
System.IO;
{
public class ServerFillRectangle : System.Web.UI.Page
{
int w1,h1;
{
= canvasAndImage();
Response.Clear();
}
{
133
Jenaro C. Paz
________________________________________________________________________
// pixel data
Rectangle myRect2 = new Rectangle(20,20,w1-40,h1-40);
g.FillRectangle(new SolidBrush(Color.Chocolate), myRect2);
return aStream;
}
}
}
Listado 3.41. Cdigo asociado con la forma ServerFillRectangle.aspx

Figura 3.35.
Figura 3.35. Rellenado de rectngulos
134

Imagenes C#

Cargado por

Imagenes C#

Cargado por

Textos Universitarios / Serie Docencia

3.1 Clase Graphics113

3.1.1 Propiedades pblicas

Obtiene o establece un objeto Region que

Tabla 3.1. Miembros de la clase Graphics

3.1.2 Mtodos pblicos

CreateObjRef (se hereda de

Agrega un comentario al objeto Metafile

Textos Universitarios / Serie Docencia

Equals (se hereda de Object)

informacin relevante necesaria para

InitializeLifetimeService (se hereda de

actual que controla la directiva de duracin

Textos Universitarios / Serie Docencia

ToString (se hereda de Object)

de este objeto Graphics.

3.1.2.1 Mtodos pblicos para el dibujo

Sobrecargado. Dibuja una imagen que

Sobrecargado. Dibuja una elipse definida

Textos Universitarios / Serie Docencia

Figura 3.1. Identificadores para los controles de la forma DrawBG.aspx

En el listado 3.1 encontramos definido el mtodo btnBuild_Click que se ejecuta cuando

Textos Universitarios / Serie Docencia

3. La forma Web Server_bg.aspx utiliza los parmetros mencionados que le son

Listado 3.2. Cdigo asociado con la forma Server_bg.aspx

En la Figura 3.2 se presenta el resultado obtenido en el Navegador de Internet

Figura 3.2. Lienzo de dibujo definido por su color y su tamao

Textos Universitarios / Serie Docencia

3.1.2.1.1.2 Dibujando lneas sobre un lienzo

DrawLine es un mtodo sobrecargado de la clase Graphics, de modo que existen varias

Figura 3.3. Diferente tipo de extremos para lneas

La Forma DrawLines.aspx es idntica a la presentada en la Figura 2.13 y as mismo a

Textos Universitarios / Serie Docencia

Listado 3.4. Codigo asociado a la forma DrawLines.aspx

Textos Universitarios / Serie Docencia

Listado 3.5. Codigo asociado a la forma ServerLines.aspx

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.4 que se

Figura 3.4. Diferente tipo de lineas sobre el lienzo

DrawRectangle es un mtodo sobrecargado de la clase Graphics, de modo que hay

Un objeto Rectangle tiene mtodos y propiedades para manipular y recopilar

Textos Universitarios / Serie Docencia

Listado 3.7. Cdigo asociado con la forma ServerRectangle.aspx

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.25 que se

Figura 3.5. Rectangulos sobre el lienzo

Textos Universitarios / Serie Docencia

Obtendremos como resultado la imagen de la Figura 3.6.

Figura 3.6. Serie de rectangulos concentricos sobre el lienzo

3.1.2.1.1.1 Dibujando elipses y arcos sobre un lienzo

Textos Universitarios / Serie Docencia

Figura 3.7. Elipse y su rectngulo delimitador

DrawEllipse es un mtodo sobrecargado de la clase Graphics, de modo que existen varias

En la siguiente ilustracin se muestran el arco, la elipse y el rectngulo delimitador.

Figura 3.8. Arco de una elipse y su rectngulo delimitador

Textos Universitarios / Serie Docencia

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.9 que se

Figura 3.9. Diferentes elipses sobre el lienzo

Textos Universitarios / Serie Docencia

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.10 que se

Figura 3.10. Diferente tipo de arcos sobre el lienzo

Figura 3.11. Ejemplo de Polgonos

En la siguiente ilustracin se muestra el polgono.

Figura 3.12. Dibujo de un polgono con GDI+

Textos Universitarios / Serie Docencia

Textos Universitarios / Serie Docencia

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.13 que se

Figura 3.13. Diferente tipo de polgonos sobre el lienzo

Figura 3.14. Curva spline definida por varios puntos

Textos Universitarios / Serie Docencia

Figura 3.15. Aplicando diferentes tensiones a una curva spline

Textos Universitarios / Serie Docencia

El resultado de la interaccin de estas dos formas se muestra en la Figura 3.16 que se

Figura 3.16. Curvas abiertas sobre el lienzo

Textos Universitarios / Serie Docencia

Figura 3.17. Curvas cerradas sobre un lienzo

3.1.2.1.1.1 Dibujando Curvas Bzier sobre un lienzo

Figura 3.18. Curva Bezier entre p1 y p2 con puntos de control c1 y c2