TRABAJO REALIZADO EN VISUAL BASIC 2013TEMA: IMPLEMENTACION DE GRAFICOS CON GDI+DOCENTE: JUAN JOSE ORE CERRONINTEGRANTES: JGP

ANDAHUAYLAS- APURIMAC, DECIEMBRE DEL 2014

INDICEPrlogo 3Dedicatoria 4Introduccin 5Agradecimiento 6 GDI+ Acceso al subsistema grfico de Windows 7I.- Resea histrica y caractersticas de GDI+ 7II.- Qu es GDI+? Y sus caractersticas 7 III.- GDI y su campo de divisin 9III.1- Generacin de grficos vectoriales 9III.a- Dibujando lneas con GDI+ 11III.2- Manipulacin de Imgenes 13III.b- Uso de degradados con GDI+ 13III.3- Visualizacin de Texto 14III.c- Dibujando cadenas de texto 14III.4- Movimiento de Control 15IV.- Implementacin de una Simulacin con Grficos 2D GDI+ 17V.- Grficos 3D 21CONCLUSION 38BIBLIOGRAFIA 39

Prlogo

Da el primer paso con fe, no te preocupes sino puedes ver la escalera, solo da el primer paso. Dr. Martin Luther King.

El presente aporte es una ilustracin para aquellos presentes compaeros de la universidad, quienes enfocan o toman un aporte de este plasmado.

Si cree que puede o no puedes igual tienes la razn.

Cuando tienes una idea inspiradora debes confiar y actuar de acuerdo a ella.

Los Autores

Dedicatoria

A la memoria de Fredy Velazque Quispe

G.P.Q.

A mis padres y a la Familia en general por su apoyo incondicional.Kevin Muoz H y William Tello Onzueta.

Introduccin

El entorno Windows, a diferencia de otros anteriores, es un entorno grfico.Dispone de iconos, diversos colores, distintos tipos de letras, programas de grficos, mapas de bits y ms. Visual Basic dispone de mtodos grficos, antes mencionados, para trazar formas como rectngulos, crculos, insercin de imgenes y ms. Este captulo est dedicado a la gestin de colores y a los mtodos grficos, as como las dimensiones de los controles que admiten dichos mtodos.Nos adentraremos un poco ms profundamente, en el desarrollo de grficos e imgenes 2D con GDI+.

Agradecimiento

Nuestros sinceros agradecimientos a los docentes de la escuela de Ingenierade Sistemas por las constantes recomendaciones para la mejora del presentetrabajo. As mismo, a los compaeros egresados por la motivacin y el saludo para continuar colaborando con las siguientes aportaciones.

Los AutoresGilberto Palomino Quispe

GDI+. ACCESO AL SUBSISTEMA GRFICO DE WINDOWS

I.- RESEA HISTORICA:GDI+ es la evolucin de GDIAl tratarse de un interfaz de programacin independiente del dispositivo fsico sobre el que se van a generar los grficos, el programador gana en flexibilidad, ya que no debe preocuparse de si el grfico generado se va a mostrar por el monitor, impresora, etc.; esta labor es resuelta por GDI+, que asla el programa del hardware a manejar.II.- Que es GDI+?GDI+ es una de las tantas bibliotecas de clases que vienen incluidas de forma nativa en la infraestructura .NET o .NET framework como suele denominarle la gente de Microsoft. Se especializa en el trazado de dibujos y como muestra la tabla su utilizacin es bastante sencilla. Como veremos ms adelante los pasos son en su mayora siempre los mismos, por lo que una vez entendidos los conceptos bsicos es posible realizar en pocas lneas cualquier tipo de trazado sobre un enorme nmero de objetos de la interfaz grfica, incluyendo la impresora, vistas preliminares, etc. El ser parte intrnseca de la infraestructura nos asegura que las versiones .NET de otros dispositivos (PocketPC, telfonos inteligentes, etc.) o sistemas operativos (Linux, etc.) contarn tambin con esta biblioteca. Sin embargo en dispositivos mviles de mano se emplea la versin compacta de la infraestructura .NET (.NET Compact Framework), la que brinda en realidad un sub-conjunto de la totalidad de las funcionalidades. Otra ventaja inminente es que la biblioteca puede ser utilizada desde cualquiera de los 25 lenguajes existentes que compilan para .NET y adicionalmente no se encontraran con problemas relacionados con incompatibilidad entre tipos de dato del lenguaje y las funciones de GDI+.

Tambin existen tcnicas especiales cuando lo que se desea por ejemplo construir un juego en donde ms que lneas y rellenos se necesiten verdaderas construcciones tridimensionales, sonido estreo, utilizacin de una red para mltiples participantes, etc. Es por ello que vamos a indagar sobre que opciones contamos hoy en da para trabajar en ambientes grficos con el fin de poder evaluar las distintas chances y por supuesto sus beneficios. Veamos 4 tecnologas comnmente utilizadas que creo haber conocido en mayor o menor medida en algn momento o por lo menos escuchado su nombre:- Directx- GDI- GDI+- OpenGLSi bien en este artculo nos centraremos en GDI+ analizaremos la utilidad de las dems tcnicas ya que un buen programador debe siempre saber con qu alternativas se cuenta a la hora de llevar adelante una tarea. Es fundamental comprender que Microsoft Windows es un sistema WYSIWYG (Chat yo sea es chat yo jet), lo que quiere decir que lo que se ve es lo que finalmente se obtiene. Esto ha sido as desde sus comienzos, y se ha hecho un esfuerzo maysculo para que lo que se ve en pantalla pueda ser reproducido o llevado a cualquier otro dispositivo (impresora, fax, etc.) sin demasiadas dificultades. La ventaja principal es que esta tarea es transparente para el desarrollador y finalmente para el usuario. Durante ms de 5 aos para trabajar en serio con la interfaz grfica se deba recurrir a la biblioteca GDI (Grafica Usar Interface) del sistema. Ella incluye un conjunto de funciones para realizar trazados.

III.- GDI+ divide su campo de trabajo en tres reas principales.

Generacin de grficos vectoriales 2D Manipulacin de imgenes en los formatos grficos ms habituales. Visualizacin de texto en un amplio abanico de tipos de letra.

III.1- GENERACIN DE GRFICOS VECTORIALES 2D

Espacio de nombresDescripcin

System.DrawingHace posible realizar trazados simples, aunque no por ello deja de resolver gran parte de los casos.

System.Drawing.Drawing2DSe utiliza para dibujar trazados avanzados en dos dimensiones y vectoriales.

System.Drawing.ImagingPermite una gestin muy avanzada de imgenes y meta-archivos.

System.Drawing.PrintingHace posible controlar todo lo relacionado con la impresin.

System.Drawing.TextSi necesita crear, modificar, o utilizar fuentes entonces las clases de este espacio son las que deber emplear.

System.Drawing.Pen

Define un objeto utilizado para dibujar lneas rectas y curvas.

Ha llegado el momento de juntar todo lo aprendido para ver como plasmar finalmente el resultado de tanto esfuerzo. Les recomiendo que experimenten con los dems mtodos expuestos, como ser crculos, arcos, etc.Como se muestra en este siguiente simple ejemplo de muestra:

La clase Graphics incluye muchos mtodos de dibujo y manipulacin de imgenes. A continuacin se enumeran algunos de los mtodos usados ms frecuentemente: Mtodo para borrar la superficie de dibujo: Clear. Mtodo para crear un nuevo objeto Graphics

MtodoUtilidad

DrawArcPlasma una lnea en forma de arco.

DrawBezier, DrawBeziers, DrawCurveDibuja lneas curvas o de Bzier (esto ltimo lo veremos ms adelante).

DrawEllipseTraza un circulo o elipse.

DrawImagePlasma una imagen.

DrawLineDibuja una lnea.

DrawPathAlmacena la definicin las lneas, curvas y rellenos.

DrawPieDibuja una seccin de un grfico de tarta.

DrawPolygonTraza un polgono.

DrawRectangleDibuja un rectngulo.

DrawStringPlasma una cadena de caracteres.

a).- Dibujando lneas con GDI+

Lo primero que aprenderemos a representar con GDI+ y Visual Basic 2013, son lneas muy sencillas.Para representar una lnea por lo tanto, debemos indicar un par de puntos (x,y) cuyas coordenadas (horizontal, vertical), representa en este orden, el lugar o punto de inicio indicado por el margen superior del formulario o superficie sobre la cul deseamos dibujar nuestra lnea, y un segundo par de puntos que representan la direccin final de nuestra lnea.Veamos entonces como obtener el Objeto de contexto grfico de un formulario y su posterior almacenamiento en una variable:DimgraficoAsGraphics = e.GraphicsDim grafico1AsGraphics = Me.CreateGraphics

System.Drawing : contiene el conjunto de clases principales, aunque no es el nico namespace de GDI+; para tareas de mayor especializacin con grficos deberemos recurrir a alguno de los siguientes espacios de nombre que estn dentro de System.Drawing: Drawing2D, Imaging y Text.Puede ser con cualquier de estas declaraciones sin poder olvidar declarar en la librera

ImportsSystem.Windows.FormsImports System.IOImportsSystem.DrawingImports System.Drawing.Drawing2DImportsSystem.Drawing.ImagingImportsSystem.Drawing.Text

Para llevar adelante un dibujo es necesario contar al menos con un lpiz o una brocha. Esta aproximacin tambin es la elegida por esta biblioteca ya que se tiene una estructura llamada Pen que define este tipo de elemento. El color, el ancho, y hasta la textura es informacin factible de indicar en el constructor predeterminado de la clase. El siguiente ejemplo muestra cmo crear una brocha de 10 pixeles de ancho con textura salida de color rojo.DimlpizAsPen = NewPen(Color.Red, 10)

Ejemplo de dibujo con GDI+ de una lnea recta en un formulario Windows

ImportsSystem.Windows.FormsImports System.IOImportsSystem.DrawingImports System.Drawing.Drawing2DImportsSystem.Drawing.ImagingImportsSystem.Drawing.Text

PublicClassForm1

PrivateSub Form1_Paint(ByVal sender AsObject, ByVal e AsSystem.Windows.Forms.PaintEventArgs) HandlesMe.Paint

DimgraficoAsGraphics = e.GraphicsDim grafico1 AsGraphics = Me.CreateGraphicsDimlapizAsPen = NewPen(Color.Red, 10)

grafico1.DrawLine(lapiz, 10, 10, 30, 50)

EndSub

EndClass

Las clases y estructuras mas importantes del namespaceSystem,Drawing son: ClasesBrush y brushes Se utilizan para rellenar reas cerradas con un determinado Patrn, color o bitmap. Font Defini el tipo de letra.FontFamilyDefine una familia de tipos de letra con una similitud.IconSe utilizan para trabajar con iconos.ImageClase Base abstracta que proporciona funcionalidad para Las clases bitmapicon y metafile.RegionDescribe el interior de un superficie.

Estructuras Point y PointF Para trabajar con puntos en el plano.Rectangle y RectangleF Para trabajar con rectngulos.

III.2- MANIPULACIN DE IMGENES EN LOS FORMATOS GRFICOS MS HABITUALES.

a).- Uso de degradados con GDI+GDI+ proporciona un variadsimo juego de brochas que nos permiten dibujar degradados en un formulario o control que permita el trabajo con grficos.El siguiente ejemplo de cdigo, nos muestra como dibujar un degradado en un formulario Windows.' creamos la forma DimformaAsNewRectangle(NewPoint(0, 0), Me.ClientSize)Dimgradient AsNewLinearGradientBrush(forma, Color.Cyan, Color.Darkblue, Drawing2D.LinearGradientMode.ForwardDiagonal)grafico.FillRegion(gradiente, NewRegion(forma))

Evidentemente, podemos jugar con la clase LinearGradientBrushy con la lista enumeradaLinearGradientModepara dar una aspecto o un toque ligeramente diferente al degradado, como el que se indica en la figura.

III.3- VISUALIZACIN DE TEXTO EN UN AMPLIO ABANICO DE TIPOS DE LETRA.a).- Dibujando cadenas de textoEl mtodo DrawStringnos permite representar cadenas de texto de forma grfica.El funcionamiento en Visual Basic 2005 de estas instrucciones es realmente simple.El siguiente ejemplo, ilustra en cmo abordar un pequeo proyecto para representar una cadena de texto en pantalla.' creamos nuestro texto grafico Dim brocha AsNewHatchBrush(HatchStyle.Wave, Color.Aqua, Color.BurlyWood)' creamos nuestro colorDimcolorinAsNewFont(NewFontFamily("Georgia"), 20)grafico.DrawString("Ejemplo GDI+", colorin, brocha, NewRectangleF(200, 20, 500, 200))

III.4- Movimiento de un control

Para que un control o una imagen se desplace en forma horizontal o vertical o diagonal es necesario modificar las propiedades Top y Left. La propiedad Left permite mover un control de izquierda a derecha y viceversa. La propiedad Top permite mover un objeto de arriba abajo y viceversa. La conbinacion de Left y Top permite el movimiento en forma diagonal. Existen dos formas de realizar esta operacin manualmente y automticamente. De la forma manual se puede realizar haciendo un clic sobre un botn cada vez que el usuario desea mover la figura. Dicho control contedra el cdigo que permitir realizar un movimiento especifico. La forma automtica se realiza con un timer que permite manejar intervalos d tiempo y el cual se puede programar para que realice unas tareas especficas en un determinado intervalo de tiempo.

Ejemplo prctico de un movimiento de un control.

PublicClassmovimientos_de_controles

PrivateSubbtn_derecha_Click(ByValsenderAsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_derecha.ClickImagen.Left = Imagen.Left + 10

EndSub

PrivateSubbtn_abajo_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_abajo.ClickImagen.Top = Imagen.Top + 10EndSub

PrivateSubbtn_diagonal_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_diagonal.ClickImagen.Top = Imagen.Top + 10Imagen.Left = Imagen.Left + 10EndSub

PrivateSubbtn_timderecha_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timderecha.Clickreloj.Enabled = TrueEndSub

PrivateSubbtn_timabajo_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timabajo.Clickreloj.Enabled = TrueEndSub

PrivateSubbtn_timdiagonal_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timdiagonal.Clickreloj.Enabled = TrueEndSub

PrivateSubbtn_timer_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timer.Clickreloj.Enabled = False

EndSub

PrivateSubreloj_Tick(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesreloj.TickIfbtn_timderecha.FocusedThenImagen.Left = Imagen.Left + 10ElseIfbtn_timabajo.FocusedThenImagen.Top = Imagen.Top + 10ElseIfbtn_timdiagonal.FocusedThenImagen.Top = Imagen.Top + 10Imagen.Left = Imagen.Left + 10EndIfEndSub

EndClass

IV.- IMPLEMENTACION DE UNA SIMULACION DE TODO LO APRENDIDO GRAFICOS 2D GDI+ImportsSystem.Windows.Forms.PictureBoxImportsSystem.DrawingImports System.Drawing.Drawing2DImportsSystem.Drawing.ImagingImportsSystem.Drawing.Text ImportsSystem.Windows.FormsImportsSystem.Drawing.Brush

PublicClassForm1

PrivateSub Form1_Paint(ByVal sender AsObject, ByVal e AsSystem.Windows.Forms.PaintEventArgs) HandlesMe.Paint' creamos nuestro objeto graficoDim grafico AsGraphics = Me.CreateGraphics' creamoslapiz u objeto pen DimlpizAsNewPen(Color.Blue, 5)Dim lapiz1 AsNewPen(Color.Blue, 5)

' creamos la forma Dim forma AsNewRectangle(NewPoint(0, 0), Me.ClientSize)Dimgradient AsNewLinearGradientBrush(forma, Color.Maroon, Color.Gold, Drawing2D.LinearGradientMode.ForwardDiagonal)grafico.FillRegion(gradiente, NewRegion(forma))

' creamos nuestro trazolapiz.DashStyle = Drawing2D.DashStyle.DashDotlapiz1.DashStyle = Drawing2D.DashStyle.DashDot

' creamos un array de pnts para la lineaDimpuntos(2) AsPointpuntos(0) = NewPoint(400, 400)Dimpuntos1(2) AsPointpuntos1(0) = NewPoint(450, 300)'puntos(1) = New Point(150, 120)'puntos(2) = New Point(150, 120)grafico.DrawCurve(lapiz, puntos)grafico.DrawCurve(lapiz1, puntos1)

' creamos el punto de llegadagrafico.DrawLine(lapiz, 400, 420, 490, 200)

' creamos nuestro mar DimoLGBAsNewLinearGradientBrush(NewRectangle(10, 50, 40, 60),Color.Blue, Color.AliceBlue, LinearGradientMode.Vertical)' creararray de coordenadasDimoPuntos(4) AsPointoPuntos(0) = NewPoint(400, 700)oPuntos(1) = NewPoint(5, 600)'oPuntos(2) = New Point(70, 200)'oPuntos(3) = New Point(50, 300)' dibujar y pintar una curva cerradagrafico.FillClosedCurve(oLGB, oPuntos)

' creamos nuestro texto grafico DimbrochaAsNewHatchBrush(HatchStyle.Wave, Color.Aqua, Color.BurlyWood)' creamosnuestro colorDimcolorinAsNewFont(NewFontFamily("Georgia"), 20)grafico.DrawString("LA GRAN FINAL PREMIUN", colorin, brocha, NewRectangleF(200, 20, 500, 200))

' creamosnuetro cronometro

Label1.Text = Date.Now

EndSub

PrivateSubbtn_derecha_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_derecha.Click' movimiento hacia la derechaImagen.Left = Imagen.Left + 10

Imagen1.Left = Imagen1.Left + 10

EndSub

PrivateSubbtn_abajo_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_abajo.Click' movimiento hacia la abajoImagen.Top = Imagen.Top + 10

Imagen1.Top = Imagen1.Top + 10EndSub

PrivateSubbtn_diagonal_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_diagonal.Click' movimiento diagonalImagen.Top = Imagen.Top + 10Imagen.Left = Imagen.Left + 10

Imagen1.Top = Imagen1.Top + 10 Imagen1.Left = Imagen1.Left + 10EndSub

PrivateSubbtn_timderecha_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timderecha.Clickreloj.Enabled = True

reloj1.Enabled = TrueEndSub

PrivateSubbtn_timabajo_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timabajo.Clickreloj.Enabled = True

reloj1.Enabled = TrueEndSub

PrivateSubbtn_timdiagonal_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timdiagonal.Clickreloj.Enabled = True

reloj1.Enabled = TrueEndSub

PrivateSubbtn_timer_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timer.Clickreloj.Enabled = False

reloj1.Enabled = FalseEndSub

PrivateSubreloj_Tick(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesreloj.TickIfbtn_timderecha.FocusedThenImagen.Left = Imagen.Left + 10ElseIfbtn_timabajo.FocusedThenImagen.Top = Imagen.Top + 10ElseIfbtn_timarriba.FocusedThenImagen.Top = Imagen.Top - 10ElseIfbtn_timdiagonal.FocusedThenImagen.Top = Imagen.Top + 10Imagen.Left = Imagen.Left + 10EndIf

EndSub

PrivateSub reloj1_Tick(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handles reloj1.TickIfbtn_timderecha.FocusedThen Imagen1.Left = Imagen1.Left + 10ElseIfbtn_timabajo.FocusedThen Imagen1.Top = Imagen1.Top + 10ElseIfbtn_timarriba.FocusedThen Imagen1.Top = Imagen1.Top - 10ElseIfbtn_timdiagonal.FocusedThen Imagen1.Top = Imagen1.Top + 10 Imagen1.Left = Imagen1.Left + 10EndIfEndSub

PrivateSubbtn_arriba_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_arriba.Click' movimiento para arribaImagen.Top = Imagen.Top - 10Imagen1.Top = Imagen1.Top - 10

EndSub

PrivateSubbtn_timarriba_Click(ByVal sender AsSystem.Object, ByVal e AsSystem.EventArgs) Handlesbtn_timarriba.Clickreloj.Enabled = True

reloj1.Enabled = TrueEndSub

EndClass

V.- UN PREVIO AL LOS GRFICOS 3D

Para trabajar con imgenes y grficos en 3D, deberemos utilizar DirectXoOpenLGya que dentro de laplataforma .NET de Microsoft, no tenemos la posibilidad de crear representaciones 3D.Esto significa por otra parte, que si desarrollamos una aplicacin con representacin 3D conDirectX, deberemos distribuir tambin las libreras DirectX en la mquina en la que se ejecutenuestra aplicacin. Es decir, no bastar con distribuir Microsoft .NET Framework.Pero DirectX no nos permite slo crear grficos e imgenes en 3D, tambin podemos crearimgenes en 2D, pero lo ms normal en este ltimo caso y salvo que no requeramos un usocontinuado de DirectX, ser utilizar en su lugar GDI

Conclusin:

Paradjicamente, aunque para el usuario un entorno grfico es sinnimo de mayor facilidad de uso, para el programador suele ser todo lo contrario significando una cantidad de trabajo cada vez mayor. Es lgico, generalmente cuanto ms fcil de usar sea un programa ms complejo ser ste desde el punto de vista de su codificacin, ya que el programador debe tener en cuenta elementos que antes se dejaban al usuario. Por fortuna este panorama est cambiando con rapidez y en el mercado han ido apareciendo nuevos lenguajes y herramientas de desarrollo que facilitan en mucho la tarea del programador.La industria del videojuego ocupa el primer lugar en el ocio audio-visual e interactivoa nivel mundial, por encima de industrias tan potentes como el cine o la msica.Como consecuencia directa, existe una gran demanda de profesionales cualificadospara disear y desarrollar videojuegos no slo para consolas y ordenadores, sino tambinpara el ms que creciente mercado de los telfonos mviles.Programacin Grfica, donde se presta especial atencin a los algoritmos ytcnicas de representacin grfica, junto con las optimizaciones en sistemas dedespliegue interactivo.

BIBLIOGRAFIA:

Visual Basic y ASP.NET a su alcance Nivel Basico/Intermedio De carlos Alberto Vanegas Ing. De Sistemas, Especialista en Ingeneria de Software.

Programacion Orientada a Objetos I CIBERTEC con el respaldo de la UPC.

Introduccion a GDI+ Marco Besteiro y Miguel Rodriguez.

Manual Microsof Visual Basic 6.0 Giovanni Espocito C.

Guia de migracion y actualizacion a Visual Basic.html