VBII, UNIDAD IV METODOS GRÁFICOS

LSC María Alejandra Alva SánchezMtra. Verónica Perla Romero Fdz.

Introducción

Las imágenes, los dibujos y los gráficos son elementos que se pueden incluir en el desarrollo de proyectos en ambiente gráfico.

Los lenguajes de programación proporcionan despliegue de diversos elementos básicos de dibujo como puntos, líneas y círculos.

Métodos Gráficos

Los métodos gráficos son procedimientos predefinidos en el lenguaje de programación que permite crear trazos precisos sobre los objetos Form, PicturBox y Printer. Los mas utilizados son:

Circle, Cls, Line, Pset. Mediante la aplicación de estos métodos es posible

controlar el despliegue de puntos (pixeles individuales) para dibujar cualquier trazo punto por punto.

Para programar un dibujo primero es necesario conocer: El sistema de coordenadas. Método adecuado para el trazo de puntos (puntos, líneas o

círculos). Ubicar un texto descriptor.

Sistema de coordenadas

La ubicación en pantalla, en un formulario o en cualquier otro objeto, se define por un sistema de coordenadas. Una rejilla bidimensional especifica como (x,y).

El sistema de coordenadas consiste en dos ejes perpendiculares, el eje X (coordenada horizontal) y el eje Y ( coordenada vertical). El punto (0,0), llamado origen, esta situado en la esquina superior izquierda de la pantalla o del objeto donde se dibuja por ejemplo en Form o PictureBox. Ver la siguiente figura.

El valor de x crece hacia la derecha y el valor de y hacia abajo.

La unidad predeterminada es el twip, que equivale a 1/1440 de pulgada. También puede usarse el pixel (picture element) que equivale a un punto en la pantalla, los centímetros y las pulgadas.

4 - Función QBColor:

Definición de la función QBColor de Visual basic: Esta función devuelve el código de color RGB de un número de color especificado de una lista de colores estándar predefinidos

La función QBColor permite seleccionar entre 16 colores. Es decir, esta función tiene como parámetro, un número entre el 0 y 15.

Y se usa: QBColor(n)

EJEMPLO 1

El siguiente ejemplo, muestra el uso de esta función. Lo que hace es recorrer en un bucle, desde el 0 hasta el 15, y le cambia el BackColor a un arreglo de controles Label.

Colocar una matriz de Label1. Label1 (0), Label1(1) .... hasta el Label1(15)

Al ejecutar el formulario se verá algo por el estilo:

RGB

La función RGB permite especificar un color, como resultado de la combinación de intensidades de los colores rojo,verde y azul, de la siguiente forma:

RGB ( r, v, a)Donde:r, v, a son los números enteros que pueden variar

de 0 a 255, según sea el grado de intensidad deseado para cada color.

El rojo intenso es RGB(255,0,0) etc.

1 - Método Line :

Con este método podemos dibujar Líneas y rectángulos en un objeto donde se permita utilizar dicho método, como por ejemplo en los Formularios, los controles PictureBox, el objeto Printer.

Los parámetros de Line son: El_Objeto.Line (X1, Y1) - ( X2, Y2), El_Color, BF Donde El_Objeto es donde vamos a dibujar. Los primeros dos parámetros son las coordenadas para X e Y,

luego el color de la línea y por último el parámetro BF al igual que el color, es un parámetro de tipo opcional, y aquí podemos pasar como valor: B o BF o ningún valor

Si pasamos B, se dibujará un rectángulo sin relleno. Si pasamos BF el rectángulo tendrá de relleno el color especificado en el parámetro Color. Si no pasamos nada se dibuja una línea

EJEMPLO 2

Lo siguiente dibuja una línea de color Azul en el formulario:

Me.ScaleMode = vbPixelsMe.Line (10, 10)-(100, 100), vbBlue

Como se ve en el ejemplo, los valores que tomará y utilizará LINE para las coordenadas X e Y, serán los establecidos en el ScaleMode del Objeto donde dibujar, en este caso se colocó en Pixeles ( vbPixels )

EJEMPLO 3

Este otro dibuja una línea horizontal y otra vertical a lo ancho y alto del Formulario, al mover el puntero del mouse. A la primer línea se le aplica el color verde, a la la línea horizontal el color Rojo, utilizando las constantes de color de vb. ( VbgGreen y VbRed )

Option Explicit

Private Sub Form_MouseMove(Button As Integer,_ Shift As Integer, _ X As Single, _ Y As Single) ' Limpia el Form Cls 'Dibuja la línea vertical Line (X, ScaleTop)-(X, ScaleHeight), vbGreen 'Dibuja la línea Horizontal Line (Me.ScaleLeft, Y)-(Me.ScaleWidth, Y), vbRed End Sub

EJEMPLO 4

En este otro ejemplo, se dibuja en el formulario, una cantidad x de lineas con colores aleatorios, utilizando la función Rnd de visual basic para generar el color aleatorio y para la cantidad de lineas :

Colocar un control timer Código fuente en el formulario

EJEMPLO 5

Lo siguiente dibuja un rectángulo sin relleno de color Rojo, pasándole la B como parámetro al método Line

Me.ScaleMode = vbPixels

Me.Line (10, 10)-(100, 100), vbRed, B

EJEMPLO 6

Ahora, en ves de especificar B, se indica el valor BF para rellenar el rectángulo :

Me.ScaleMode = vbPixels

Me.Line (10, 10)-(100, 100), vbRed, BF

2 - Método Circle

El método Circle permite dibujar un círculo, una elipse o un arco sobre un objeto.

La sintaxis del método es la siguiente: EL_Objeto.Circle (Step As Integer, X As Single, Y As Single, Radius As

Single, Color As Long, Start As Single, End As Single, Aspect As Single) Los valores para X e Y especifican el punto donde estará el centro del

círculo a dibujar. Radius es el valor del radio del mismo. El parámetro es obligatorio. Color: Valor que indica el color que tendrá el círculo o elipse para su

contorno. Se puede pasar cualquier valor admitido en visual basic, por ejemplo un Long, un valor Rgb etc..

Los parámetros Start y End son opcionales , y se utilizan para dibujar parte de una elipse o círculo

Por último el parámetro Aspect, se utiliza para definir el aspecto del círculo. Este valor es opcional. Ver ejemplos mas abajo.

EJEMPLO 7

El siguiente ejemplo crea un círculo en el centro de un control PictureBox, con un radio de 50 pixeles

Private Sub Command1_Click() Picture1.Cls With Picture1 Picture1.Circle (.ScaleWidth / 2, .ScaleHeight / 2), _ 50, _ vbBlue End With End Sub

Private Sub Form_Load() Picture1.ScaleMode = vbPixels End Sub

EJEMPLO 8

Este ejemplo dibuja un círculo con un radio aleatorio entre 10 y 100 pixeles, al hacer click en el formulario, es decir el centro del círculo ( x1 e y1 ), son los valores x e y del evento MouseDown del Form:

Private Sub Form_Load() ScaleMode = vbPixels Me.DrawWidth = 2End Sub Private Sub Form_MouseDown(Button As Integer, Shift As Integer, _ X As Single, Y As Single) Circle (X, Y), Int((100 - 10 + 1) * Rnd + 10), vbRed End Sub

Dibujar Elipses

Para dibujar Elipses se debe especificar en el parámetro Aspecto los siguientes valores. Por ejemplo si pasamos un 1, el círculo será una circunferencia perfecta, si pasamos 0.5 , el radio horizontal del mismo será el doble que el radio vertical, si pasamos un 2 lo contrario.

Para el ejemplo del gráfico, colocar un Combo1 y este código en el Form:

Ejemplo9

3 - Método Point y método Pset :

El método Point lo que hace es devolver , como un número entero ( un Long ), el color RGB del punto que se le especifique, puede ser utilizado tanto en un Formulario como en un PictureBox.

El método Pset establece un color determinado para un punto de un objeto:

Objeto.Pset(x,y),color

Ejemplo 10

El siguiente ejemplo utiliza los dos métodos. Cargar un gráfico en un Picture1 y también

colocar un Picture2. Al hacer click en el Picture1, en el evento MouseDown, se obtendrá el color de ese pixel, y ese valor se le aplicará al BackColor del Picture2, como se ve en el gráfico, el punto verde es el establecido con el método Pset.

EJEMPLO 11

Nota: la forma y variaciones en las que se dibuja el punto u otras figuras mediante los métodos gráficos, dependen de las propiedades DrawStyle y DrawMode del objeto.

Este es otro ejemplo que utiliza Pset para dibujar un punto al presionar en el formulario, tomando como valores el x e y del evento MouseDown del Form, luego se dibuja una línea desde un punto hacia el otro punto mediante el método Line

Dibujo de Arcos

Para dibujar arcos se utiliza también el método Circle sólo que con el siguiente formato:

Objeto.circle (x,y) radio, color, angulo1, angulo2

Donde el objeto es el nombre del objeto en donde se va a dibujar el arco cuyo centro esta dado por las coordenadas (x,y) y que se extiende desde angulo1 hasta angulo2 expresado en radianes.

Ejemplo 12.

Private Sub Command1_Click( ) Rem declaración de las variables Dim i, xmax, ymax pi = 3.1416 Rem borrar la forma Form1.Cls xmax=Form1.ScaleWidth ymax=Form1.ScaleHeight Rem dibujar los arcos For i=1 to 5 Form1.Circle (xmax/2, ymax/2) i*ymax/10,QBColor(i),0,90*pi/180 Next iEnd Sub

Impresión de texto en las gráficas

El objeto font es el que controla la manera en que aparece el texto en la gráfica. Por ejemplo, para cambiar el tamaño del texto se aplica Font.Size.

Para situar el texto en las coordenadas x,y se utilizan las propiedades: Objeto.CurrentX=x Objeto.CurrentY=y

Para modificar el color con el que se realizan los dibujos se utiliza la propiedad ForeColor del objeto en el que se realiza el dibujo, de acuerdo con la siguiente sintaxis: Objeto.ForeColor=color

Ejemplo 1.

Impresión de texto en gráficos: Graficar la función f(x)=2x^2-2x+50, considerando la escala

vertical del -100 a 300 y agregar título a la gráfica:Private Sub Command1_Click( )

Rem modificar la escala seno de x varia de -1 a 1Form1.Scale (-10, 300) – (10, -100)Form1.ClsRem valores inicialesx=-10y=f(x)Rem eje y

Form1.Line (0,-100) – (0, 250)Rem dibujar en color rojoForm1.ForeColor=RGB(255, 0, 0)

Do While x<=10 Rem valores finales xn= x + 0.1 yn= F(xn) Rem se traza la línea Form1.Line (x, y) – (xn, yn) Rem nuevos valores iniciales x=xn y= f(xn)Loop Rem agregar el título Form1.CurrentX=-2 Form1.CurrentY=275 Form1.Font.Size=12 Form1.ForeColor=RGB(255, 255, 0) Form1.Print “GRAFICA DE f(x)”En Sub

Function f(x)

Rem convertir x a radianes y calcular el seno de x

f= 2*x^2-2*x+50

End Function

Actividad 1

Realizar en Visual Basic de los ejemplos propuestos en la presentación. Selecciona al menos uno que incluya cada uno de los métodos gráficos, realiza mínimo 6 ejemplos.

Actividad 2:Completa la tabla

Dibuja un punto

Line

Borra el Dibujo

Circle

OperaciónMétodo

Actividad 3:Contesta en tu libreta las siguientes preguntas 1. Defina método gráfico 2. Escribe tres métodos gráficos definidos en el lenguaje de programación Visual Basic. 3.Mencione una metodología de tres pasos para programar un dibujo 4. Escriba como esta predeterminado el sistema de coordenadas en un objeto 5. Explique la diferencia entre las funciones para manejar los colores QBColor y RGB. 6. ¿Cuál es el método que permite personalizar las coordenadas en un objeto? 7. Analice el siguiente código y describa el resultado de su ejecución.Private Sub Command1_Click( ) Form1.Scale (-10,10) - (10,-10)

Form1.Line (0,10) – (0,-10), RGB(0,0,255)Form1.Line (-10,0) – (10,0), RGB(0,0,255)Form1.Circle (0,0) ,5 ,QBColor(12)

End Sub8. ¿Cuál es el método que permite dibujar arcos y elipses? 9 Escriba las propiedades de los objetos que permiten situar textos en las coordenadas x,y que

servirá como títulos o leyendas en gráficos 10. ¿Cuáles son las propiedades aplicables a figuras de dibujo cerradas para modificar el estilo de

relleno y color.

PorcentajesFecha:Entregar en:Porcentaje:Nombre:

Libreta10%Actividad 2

Libreta20%Actividad 3

Funcionando los programas en Visual Basic.

60%Actividad 1

Criterio de valoración

No aplica* En díadas o tríadas5. Entrega

Se omitió este punto

Se omitió algún (os) puntos señalados

Es puntual, funciona correctamente y no requirieron ayuda para realizarlo.

4. Presentación y funcionamiento

Se omitió este punto

No se explican claramente todas las líneas del código

Se explican claramente todas las líneas del código

3. Explicación

Se omitió este punto

La adaptación no es del todo congruente con la descripción del problema o con lo solicitado

La adaptación es congruente con la descripción del problema y con lo solicitado

2. Adaptación

Se omitió este punto

La descripción no es del todo clara o concisa o congruente a lo solicitado.

La descripción es clara, concisa y congruente a lo solicitado.

1. Descripción

puntaje0

puntaje5

puntaje10

Criterios de valoración