{"id":1184,"date":"2017-09-14T12:06:48","date_gmt":"2017-09-14T17:06:48","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1184"},"modified":"2017-11-16T12:09:44","modified_gmt":"2017-11-16T18:09:44","slug":"modo-grafico-java-creando-lienzo-propio","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/modo-grafico-java-creando-lienzo-propio\/","title":{"rendered":"Modo gr\u00e1fico en Java: Creando un lienzo propio"},"content":{"rendered":"

En este art\u00edculo aprender\u00e1s a utilizar el modo gr\u00e1fico en Java, creando un lienzo propio. Tambi\u00e9n veremos c\u00f3mo dibujar l\u00edneas en el lienzo utilizando ciclos for.<\/p>\n

\"modo<\/a>

Aprende a usar\u00a0el modo gr\u00e1fico en Java para dibujar l\u00edneas<\/p><\/div>\n

<\/p>\n

Para comenzar a utilizar el modo gr\u00e1fico en Java se utilizar\u00e1n dos conjuntos de componentes gr\u00e1ficos de Java: AWT<\/strong>\u00a0 y Swing<\/strong>.<\/p>\n

Swing<\/h2>\n

Swing<\/strong> es un conjunto de clases y otros recursos para construir GUI\u2019s (Interfaces de Usuario Gr\u00e1ficas). Es independiente de la plataforma (sistema operativo) sobre la que se ejecute. Con Swing podemos crear ventajas, contenedores, botones, etiquetas, campos de texto, listas desplegables, etc. La mayor\u00eda de sus clases comienzan con una J (por ejemplo, JFrame).<\/p>\n

AWT<\/h2>\n

Significa Abstract Window Toolkit. Es dependiente de la plataforma, lo que quiere decir que la imagen que muestre un componente gr\u00e1fico depender\u00e1 del sistema operativo en el que se ejecute.<\/p>\n

M\u00e9todo g.drawLine<\/h2>\n

El m\u00e9todo g.drawLine<\/strong> en Java imprime una l\u00ednea, desde una coordenada x,y<\/em> hasta una segunda coordenada x2,y2<\/em>.<\/p>\n

Es decir, si deseamos una l\u00ednea vertical en la columna 100 de la pantalla, la instrucci\u00f3n ser\u00eda:<\/p>\n

g.drawLine(100,0,100,500)<\/strong>, que nos imprime una l\u00ednea vertical (los dos 100 representan la misma columna en x1 y x2) que va desde la l\u00ednea 0 hasta la l\u00ednea 500.<\/p>\n

Dibujar l\u00edneas en modo gr\u00e1fico en Java usando ciclos For<\/h2>\n

Deseamos dibujar la siguiente figura usando solo l\u00edneas y ciclos for.<\/p>\n

\"modo<\/a>

Usando el modo gr\u00e1fico en Java para dibujar l\u00edneas<\/p><\/div>\n

Procedimiento<\/h2>\n

Paso 1.<\/strong> Crear un proyecto en Java.<\/p>\n

Paso 2.<\/strong> Cree una clase dentro del proyecto, llamada Dibujo.<\/p>\n

Paso 3.<\/strong> Escriba las bibliotecas de clases que necesitar\u00e1<\/p>\n

Paso 4.<\/strong> Defina la herencia<\/p>\n

Paso 5.<\/strong> Redefina el m\u00e9todo paintComponent.<\/p>\n

Paso 5.<\/strong> Cree una ventana que utilice la clase Dibujo en el m\u00e9todo main.<\/p>\n

 <\/p>\n

C\u00f3digo completo<\/h2>\n

C\u00f3digo de la clase Dibujo<\/h3>\n
import java.awt.Color;\r\nimport java.awt.Graphics;\r\nimport javax.swing.JPanel;\r\n\r\npublic class Dibujo extends JPanel {\r\n    public void paintComponent (Graphics g){\r\n        super.paintComponent(g);\r\n        int ancho, alto;\r\n        int x2,y2, x1, y1;\r\n        \r\n        ancho = getWidth();\r\n        alto = getHeight();\r\n        \r\n        \r\n        g.setColor(Color.GRAY);\r\n        x1=0;\r\n        for (y2=alto\/2; y2>=0; y2-=10){\r\n            g.drawLine(x1, alto\/2, ancho\/2, y2);\r\n            x1+=10;\r\n        }\r\n        x1=0;\r\n        for (y2=alto\/2; y2<=alto; y2+=10){\r\n            g.drawLine(x1, alto\/2, ancho\/2, y2);\r\n            x1+=10;\r\n        }\r\n        x2=ancho\/2;\r\n        for (y1=0; y1<=alto\/2; y1+=10){\r\n            g.drawLine(ancho\/2, y1, x2, alto\/2);\r\n            x2+=10;\r\n        }\r\n        x2=ancho\/2;\r\n        for (y1=alto; y1>=alto\/2; y1-=10){\r\n            g.drawLine(ancho\/2, y1, x2, alto\/2);\r\n            x2+=10;\r\n        }\r\n        \r\n    }\r\n}\r\n<\/pre>\n
C\u00f3digo con el m\u00e9todo principal<\/h3>\n
import javax.swing.JFrame;\r\n\r\npublic class Grafico1 {\r\n\r\n\r\n    public static void main(String[] args) {\r\n        Dibujo lienzo = new Dibujo();\r\n        JFrame ventana = new JFrame();\r\n        ventana.add(lienzo);\r\n        ventana.setSize(500,500);\r\n        ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\r\n        ventana.setVisible(true);\r\n    }\r\n    \r\n}\r\n<\/pre>\n
Explicaci\u00f3n<\/h2>\n
Variables utilizadas<\/h3>\n
    \n
  • ancho, alto;<\/strong> Para determinar las dimensiones de la ventana<\/li>\n
  • x1, y1, x2, y2;<\/strong>\u00a0 Se utilizar\u00e1n cuando los valores de x o y no sean fijos.<\/li>\n<\/ul>\n
    C\u00f3digo del Procedimiento<\/h3>\n
      \n
    • ancho = getWidth();<\/strong><\/li>\n
    • alto = getHeight();<\/strong><\/li>\n<\/ul>\n
      Asigna los valores de ancho y alto de la ventana a las variables.<\/p>\n
        \n
      • g.setColor(Color.GRAY);<\/strong>\u00a0 Las l\u00edneas a imprimir ser\u00e1n grises<\/li>\n<\/ul>\n
        A continuaci\u00f3n comienza el primer cuadrante de lineas. Las variables que se modifican son x1 y y2.<\/p>\n
        x1=0;<\/p>\n
        for (y2=alto\/2; y2>=0; y2-=10){<\/p>\n
        g.drawLine(x1, alto\/2, ancho\/2, y2);<\/p>\n
        x1+=10;<\/p>\n
        }<\/p>\n
        Explicaci\u00f3n del c\u00f3digo del m\u00e9todo principal<\/h2>\n
          \n
        • Dibujo lienzo = new Dibujo();\u00a0<\/strong> Se crea un objeto de clase Dibujo<\/li>\n
        • JFrame ventana = new JFrame();<\/strong> Frame es una clase para crear una ventana donde ubicaremos los componentes gr\u00e1ficos<\/li>\n
        • ventana.add(lienzo);<\/strong> A esa ventana le a\u00f1adimos el objeto lienzo que es de clase Dibujo<\/li>\n
        • ventana.setSize(500,500);<\/strong> Indicamos un tama\u00f1o inicial.<\/li>\n
        • ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);<\/strong> Es la operaci\u00f3n que va a realizar cuando se cierre el Frame (la ventana): Terminar con el programa.<\/li>\n
        • ventana.setVisible(true);<\/strong> Los Frames no se visualizan autom\u00e1ticamente, para volverlos visibles, se debe llamar a este m\u00e9todo.<\/li>\n<\/ul>\n
           <\/p>\n
          Bibliograf\u00eda<\/h3>\n
          Joyanes y Zahonero ( 2011). Programaci\u00f3n en Java. Algoritmos, programaci\u00f3n orientada a objetos e interfaz gr\u00e1fica de usuario. Ed. Mc. Gran Hill.<\/p>\n","protected":false},"excerpt":{"rendered":"
          En este art\u00edculo aprender\u00e1s a utilizar el modo gr\u00e1fico en Java, creando un lienzo propio. Tambi\u00e9n veremos c\u00f3mo dibujar l\u00edneas en el lienzo utilizando ciclos for.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[167],"tags":[97,215,214],"class_list":["post-1184","post","type-post","status-publish","format-standard","hentry","category-programacion-orientada-a-objetos","tag-ejercicios-java","tag-programacion-avanzada","tag-programacion-de-graficos"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1184"}],"version-history":[{"count":10,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1184\/revisions"}],"predecessor-version":[{"id":1195,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1184\/revisions\/1195"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}