VBII, UNIDAD IV  METODOS GRÁFICOS    LSC María Alejandra Alva Sánchez Mtra. Verónica Perla Romero Fdz.
Introducción <ul><li>Las imágenes, los dibujos y los gráficos son elementos que se pueden incluir en el desarrollo de proy...
Métodos Gráficos <ul><li>Los métodos gráficos son procedimientos predefinidos en el lenguaje de programación que permite c...
Sistema de coordenadas <ul><li>La ubicación en pantalla, en un formulario o en cualquier otro objeto, se define por un sis...
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/14...
4 - Función QBColor:  <ul><li>Definición de la función QBColor de Visual basic:  Esta función devuelve el código de color ...
EJEMPLO 1 <ul><li>El siguiente ejemplo, muestra el uso de esta función. Lo que hace es recorrer en un bucle, desde el 0 ha...
Al ejecutar el formulario se verá algo por el estilo:
RGB <ul><li>La función RGB permite especificar un color, como resultado de la combinación de intensidades de los colores r...
1 - Método Line : <ul><li>Con este método podemos dibujar Líneas y rectángulos en un objeto donde se permita utilizar dich...
EJEMPLO 2 <ul><li>Lo siguiente dibuja una línea de color Azul en el formulario: </li></ul>Me.ScaleMode = vbPixels Me.Line ...
EJEMPLO 3 <ul><li>Este otro dibuja una línea horizontal y otra vertical a lo ancho y alto del Formulario, al mover el punt...
EJEMPLO 4 <ul><li>En este otro ejemplo, se dibuja en el formulario, una cantidad x de lineas con colores aleatorios, utili...
EJEMPLO 5 <ul><li>Lo siguiente dibuja un rectángulo sin relleno de color Rojo, pasándole la B como parámetro al método Lin...
EJEMPLO 6 <ul><li>Ahora, en ves de especificar B, se indica el valor BF para rellenar el rectángulo : </li></ul><ul><li>  ...
2 - Método Circle <ul><li>El método Circle permite dibujar un círculo, una elipse o un arco sobre un objeto. </li></ul><ul...
EJEMPLO 7 <ul><li>El siguiente ejemplo crea un círculo en el centro de un control PictureBox, con un radio de 50 pixeles  ...
EJEMPLO 8 <ul><li>Este ejemplo dibuja un círculo con un radio aleatorio entre 10 y 100 pixeles, al hacer click en el formu...
Dibujar Elipses <ul><li>Para dibujar Elipses se debe especificar en el parámetro Aspecto los siguientes valores. Por ejemp...
Ejemplo9 Para el ejemplo del gráfico, colocar un Combo1 y este código en el Form:
3 - Método Point y método Pset : <ul><li>El método Point lo que hace es devolver , como un número entero ( un Long ), el c...
Ejemplo 10 <ul><li>El siguiente ejemplo utiliza los dos métodos.  </li></ul><ul><li>Cargar un gráfico en un Picture1 y tam...
 
EJEMPLO 11 <ul><li>Nota: la forma y variaciones en las que se dibuja el punto u otras figuras mediante los métodos gráfico...
 
Dibujo de Arcos <ul><li>Para dibujar arcos se utiliza también el método Circle sólo que con el siguiente formato: </li></u...
Ejemplo 12. <ul><li>Private Sub Command1_Click( ) </li></ul><ul><li>Rem declaración de las variables </li></ul><ul><li>Dim...
Impresión de texto en las gráficas <ul><li>El objeto font es el que controla la manera en que aparece el texto en la gráfi...
Ejemplo 1. <ul><li>Impresión de texto en gráficos: </li></ul><ul><li>Graficar la función f(x)=2x^2-2x+50, considerando la ...
Actividad 1 <ul><li>Realizar en Visual Basic de los ejemplos propuestos en la presentación. Selecciona al menos uno que in...
Actividad 2:Completa la tabla Dibuja un punto Line Borra el Dibujo Circle Operación Método
Actividad 3:Contesta en tu libreta las siguientes preguntas <ul><li>1. Defina método gráfico </li></ul><ul><li>2. Escribe ...
Porcentajes Fecha: Entregar en: Porcentaje: Nombre: Libreta 10% Actividad 2 Libreta 20% Actividad 3 Funcionando los progra...
Criterio de valoración No aplica * En díadas o tríadas 5. Entrega Se omitió este punto Se omitió algún (os) puntos señalad...
Upcoming SlideShare
Loading in …5
×

Vb Ii, Unidad Iv MéTodos Graficos

6,060 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,060
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
87
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vb Ii, Unidad Iv MéTodos Graficos

  1. 1. VBII, UNIDAD IV METODOS GRÁFICOS LSC María Alejandra Alva Sánchez Mtra. Verónica Perla Romero Fdz.
  2. 2. Introducción <ul><li>Las imágenes, los dibujos y los gráficos son elementos que se pueden incluir en el desarrollo de proyectos en ambiente gráfico. </li></ul><ul><li>Los lenguajes de programación proporcionan despliegue de diversos elementos básicos de dibujo como puntos, líneas y círculos. </li></ul>
  3. 3. Métodos Gráficos <ul><li>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: </li></ul><ul><li>Circle, Cls, Line, Pset. </li></ul><ul><li>Mediante la aplicación de estos métodos es posible controlar el despliegue de puntos (pixeles individuales) para dibujar cualquier trazo punto por punto. </li></ul><ul><li>Para programar un dibujo primero es necesario conocer: </li></ul><ul><ul><li>El sistema de coordenadas. </li></ul></ul><ul><ul><li>Método adecuado para el trazo de puntos (puntos, líneas o círculos). </li></ul></ul><ul><ul><li>Ubicar un texto descriptor. </li></ul></ul>
  4. 4. Sistema de coordenadas <ul><li>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). </li></ul><ul><li>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. </li></ul>
  5. 5. 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.
  6. 6. 4 - Función QBColor: <ul><li>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 </li></ul><ul><li>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. </li></ul><ul><li>Y se usa: QBColor(n) </li></ul>
  7. 7. EJEMPLO 1 <ul><li>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. </li></ul><ul><li>Colocar una matriz de Label1. Label1 (0), Label1(1) .... hasta el Label1(15) </li></ul>
  8. 8. Al ejecutar el formulario se verá algo por el estilo:
  9. 9. RGB <ul><li>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: </li></ul><ul><li>RGB ( r, v, a) </li></ul><ul><li>Donde: </li></ul><ul><li>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. </li></ul><ul><li>El rojo intenso es RGB(255,0,0) etc. </li></ul>
  10. 10. 1 - Método Line : <ul><li>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. </li></ul><ul><li>Los parámetros de Line son: </li></ul><ul><li>El_Objeto.Line (X1, Y1) - ( X2, Y2), El_Color, BF </li></ul><ul><li>Donde El_Objeto es donde vamos a dibujar. </li></ul><ul><li>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 </li></ul><ul><li>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 </li></ul>
  11. 11. EJEMPLO 2 <ul><li>Lo siguiente dibuja una línea de color Azul en el formulario: </li></ul>Me.ScaleMode = vbPixels Me.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 )
  12. 12. EJEMPLO 3 <ul><li>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 ) </li></ul><ul><li>Option Explicit </li></ul><ul><li>Private Sub Form_MouseMove(Button As Integer,_ </li></ul><ul><li>Shift As Integer, _ </li></ul><ul><li>X As Single, _ </li></ul><ul><li>Y As Single) </li></ul><ul><li>' Limpia el Form </li></ul><ul><li>Cls </li></ul><ul><li>'Dibuja la línea vertical </li></ul><ul><li>Line (X, ScaleTop)-(X, ScaleHeight), vbGreen </li></ul><ul><li>'Dibuja la línea Horizontal </li></ul><ul><li>Line (Me.ScaleLeft, Y)-(Me.ScaleWidth, Y), vbRed </li></ul><ul><li>End Sub  </li></ul>
  13. 13. EJEMPLO 4 <ul><li>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 : </li></ul><ul><li>Colocar un control timer </li></ul><ul><li>Código fuente en el formulario </li></ul>
  14. 14. EJEMPLO 5 <ul><li>Lo siguiente dibuja un rectángulo sin relleno de color Rojo, pasándole la B como parámetro al método Line </li></ul><ul><li>  </li></ul><ul><li>Me.ScaleMode = vbPixels Me.Line (10, 10)-(100, 100), vbRed, B </li></ul>
  15. 15. EJEMPLO 6 <ul><li>Ahora, en ves de especificar B, se indica el valor BF para rellenar el rectángulo : </li></ul><ul><li>  </li></ul><ul><li>Me.ScaleMode = vbPixels Me.Line (10, 10)-(100, 100), vbRed, BF </li></ul>
  16. 16. 2 - Método Circle <ul><li>El método Circle permite dibujar un círculo, una elipse o un arco sobre un objeto. </li></ul><ul><li>La sintaxis del método es la siguiente: </li></ul><ul><li>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) </li></ul><ul><li>Los valores para X e Y especifican el punto donde estará el centro del círculo a dibujar. </li></ul><ul><li>Radius es el valor del radio del mismo. El parámetro es obligatorio. </li></ul><ul><li>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.. </li></ul><ul><li>Los parámetros Start y End son opcionales , y se utilizan para dibujar parte de una elipse o círculo </li></ul><ul><li>Por último el parámetro Aspect, se utiliza para definir el aspecto del círculo. Este valor es opcional. Ver ejemplos mas abajo. </li></ul><ul><li>  </li></ul>
  17. 17. EJEMPLO 7 <ul><li>El siguiente ejemplo crea un círculo en el centro de un control PictureBox, con un radio de 50 pixeles </li></ul><ul><li>Private Sub Command1_Click() Picture1.Cls </li></ul><ul><li>With Picture1 </li></ul><ul><li>Picture1.Circle (.ScaleWidth / 2, .ScaleHeight / 2), _ </li></ul><ul><li>50, _ </li></ul><ul><li>vbBlue </li></ul><ul><li>End With </li></ul><ul><li>End Sub </li></ul><ul><li>Private Sub Form_Load() </li></ul><ul><li>Picture1.ScaleMode = vbPixels </li></ul><ul><li>End Sub  </li></ul>
  18. 18. EJEMPLO 8 <ul><li>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: </li></ul><ul><li>Private Sub Form_Load() </li></ul><ul><li>ScaleMode = vbPixels </li></ul><ul><li>Me.DrawWidth = 2 </li></ul><ul><li>End Sub </li></ul><ul><li>Private Sub Form_MouseDown(Button As Integer, Shift As Integer, _ </li></ul><ul><li>X As Single, Y As Single) </li></ul><ul><li>Circle (X, Y), Int((100 - 10 + 1) * Rnd + 10), vbRed </li></ul><ul><li>End Sub  </li></ul>
  19. 19. Dibujar Elipses <ul><li>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. </li></ul>
  20. 20. Ejemplo9 Para el ejemplo del gráfico, colocar un Combo1 y este código en el Form:
  21. 21. 3 - Método Point y método Pset : <ul><li>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. </li></ul><ul><li>El método Pset establece un color determinado para un punto de un objeto: </li></ul><ul><li>Objeto.Pset(x,y),color </li></ul>
  22. 22. Ejemplo 10 <ul><li>El siguiente ejemplo utiliza los dos métodos. </li></ul><ul><li>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. </li></ul>
  23. 24. EJEMPLO 11 <ul><li>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.  </li></ul><ul><li>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 </li></ul>
  24. 26. Dibujo de Arcos <ul><li>Para dibujar arcos se utiliza también el método Circle sólo que con el siguiente formato: </li></ul><ul><li>Objeto.circle (x,y) radio, color, angulo1, angulo2 </li></ul><ul><li>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. </li></ul>
  25. 27. Ejemplo 12. <ul><li>Private Sub Command1_Click( ) </li></ul><ul><li>Rem declaración de las variables </li></ul><ul><li>Dim i, xmax, ymax </li></ul><ul><li>pi = 3.1416 </li></ul><ul><li>Rem borrar la forma </li></ul><ul><li>Form1.Cls </li></ul><ul><li>xmax=Form1.ScaleWidth </li></ul><ul><li>ymax=Form1.ScaleHeight </li></ul><ul><li>Rem dibujar los arcos </li></ul><ul><li>For i=1 to 5 </li></ul><ul><li>Form1.Circle (xmax/2, ymax/2) i*ymax/10,QBColor(i),0,90*pi/180 </li></ul><ul><li>Next i </li></ul><ul><li>End Sub </li></ul>
  26. 28. Impresión de texto en las gráficas <ul><li>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. </li></ul><ul><li>Para situar el texto en las coordenadas x,y se utilizan las propiedades: </li></ul><ul><ul><li>Objeto.CurrentX=x </li></ul></ul><ul><ul><li>Objeto.CurrentY=y </li></ul></ul><ul><li>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: </li></ul><ul><ul><li>Objeto.ForeColor=color </li></ul></ul>
  27. 29. Ejemplo 1. <ul><li>Impresión de texto en gráficos: </li></ul><ul><li>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: </li></ul><ul><li>Private Sub Command1_Click( ) </li></ul><ul><li>Rem modificar la escala seno de x varia de -1 a 1 </li></ul><ul><li>Form1.Scale (-10, 300) – (10, -100) </li></ul><ul><li>Form1.Cls </li></ul><ul><li>Rem valores iniciales </li></ul><ul><li>x=-10 </li></ul><ul><li>y=f(x) </li></ul><ul><li>Rem eje y </li></ul><ul><li>Form1.Line (0,-100) – (0, 250) </li></ul><ul><li>Rem dibujar en color rojo </li></ul><ul><li>Form1.ForeColor=RGB(255, 0, 0) </li></ul><ul><li>Do While x<=10 </li></ul><ul><li>Rem valores finales </li></ul><ul><li>xn= x + 0.1 </li></ul><ul><li>yn= F(xn) </li></ul><ul><li>Rem se traza la línea </li></ul><ul><li>Form1.Line (x, y) – (xn, yn) </li></ul><ul><li>Rem nuevos valores iniciales </li></ul><ul><li>x=xn </li></ul><ul><li>y= f(xn) </li></ul><ul><li>Loop </li></ul><ul><li>Rem agregar el título </li></ul><ul><li>Form1.CurrentX=-2 </li></ul><ul><li>Form1.CurrentY=275 </li></ul><ul><li>Form1.Font.Size=12 </li></ul><ul><li>Form1.ForeColor=RGB(255, 255, 0) </li></ul><ul><li>Form1.Print “GRAFICA DE f(x)” </li></ul><ul><li>En Sub </li></ul>Function f(x) Rem convertir x a radianes y calcular el seno de x f= 2*x^2-2*x+50 End Function
  28. 30. Actividad 1 <ul><li>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. </li></ul>
  29. 31. Actividad 2:Completa la tabla Dibuja un punto Line Borra el Dibujo Circle Operación Método
  30. 32. Actividad 3:Contesta en tu libreta las siguientes preguntas <ul><li>1. Defina método gráfico </li></ul><ul><li>2. Escribe tres métodos gráficos definidos en el lenguaje de programación Visual Basic. </li></ul><ul><li>3.Mencione una metodología de tres pasos para programar un dibujo </li></ul><ul><li>4. Escriba como esta predeterminado el sistema de coordenadas en un objeto </li></ul><ul><li>5. Explique la diferencia entre las funciones para manejar los colores QBColor y RGB. </li></ul><ul><li>6. ¿Cuál es el método que permite personalizar las coordenadas en un objeto? </li></ul><ul><li>7. Analice el siguiente código y describa el resultado de su ejecución. </li></ul><ul><li>Private Sub Command1_Click( ) </li></ul><ul><li>Form1.Scale (-10,10) - (10,-10) </li></ul><ul><li>Form1.Line (0,10) – (0,-10), RGB(0,0,255) </li></ul><ul><li>Form1.Line (-10,0) – (10,0), RGB(0,0,255) </li></ul><ul><li>Form1.Circle (0,0) ,5 ,QBColor(12) </li></ul><ul><li>End Sub </li></ul><ul><li>8. ¿Cuál es el método que permite dibujar arcos y elipses? </li></ul><ul><li>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 </li></ul><ul><li>10. ¿Cuáles son las propiedades aplicables a figuras de dibujo cerradas para modificar el estilo de relleno y color. </li></ul>
  31. 33. Porcentajes Fecha: Entregar en: Porcentaje: Nombre: Libreta 10% Actividad 2 Libreta 20% Actividad 3 Funcionando los programas en Visual Basic. 60% Actividad 1
  32. 34. Criterio de valoración No aplica * En díadas o tríadas 5. 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 puntaje 0 puntaje 5 puntaje 10 Criterios de valoración

×