Mostrando entradas con la etiqueta Canvas. Mostrar todas las entradas
Mostrando entradas con la etiqueta Canvas. Mostrar todas las entradas

sábado, 17 de enero de 2009

Creación de un Canvas y dibujado de una línea

El programa que se presentará a continuación es mu simple, sólo dibujará una línea en base a un arrreglo de puntos. Esto consiste en lo siguiente.

1. Creamos nuestra clase Lienzo (Lienzo.java) que heredara los atributos y metodos de la clase Canvas, perteneciente al paquete: java.awt.Canvas.
El Lienzo además contendrá un arreglo de puntos, los cuales se dibujarán en el canvas. En este caso nuestro lienzo contendrá 300 puntos del tipo de datos Point2D. Y usaremos una función f(x) = x. Es decir una función identidad, con lo cual nuestro dibujo saldrá una diagonal. Tomamos en cuenta que todos lo valores para x serán positivos, ya que la pantalla de nuestro computador está en píxeles cuyos valores son enteros positivos.

La clase será así:


package graf;

import java.awt.Canvas;
import java.awt.Graphics;
import java.awt.geom.Point2D;
import java.awt.geom.Point2D.Double;

public class Lienzo extends Canvas
{
private Point2D[] puntos = new Point2D[300];

public Lienzo()
{
int i;
for(i=0;i<300;i++)> 0 )
{
n = puntos.length;
for(i=1;i
{
g.drawLine(
(int)puntos[i-1].getX(),
(int)puntos[i-1].getY(),
(int)puntos[i].getX(),
(int)puntos[i].getY()
);
}
}
}

}


Luego creamos nuestra clase App, donde crearemos un JFrame en donde añadiremos una variable del tipo Lienzo para que quede empotrado en la ventana.


package graf;

import javax.swing.JFrame;

public class App
{
public static void main(String[] param)
{
Lienzo lienzo = new Lienzo();

JFrame ventana = new JFrame("Aplicacion con Canvas para dibujo");

ventana.getContentPane().add(lienzo);

ventana.setVisible(true);
ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ventana.pack();
}
}



La compilación está dado aquí:




El resultado:

martes, 9 de diciembre de 2008

Dibujar una línea en un Canvas

Este es un ejemplo sencillo, la intención es sólo dibujar una línea en un programa Java. Usaremos dos clases, la primera clase "Lienzo" permitirá heredar un Canvas, indicado para realizar gráficos en Java. La clase Canvas tiene una función que sobreescribiremos, llamada paint(). Esta función es eficiente al graficar, ya que cada vez que movemos la ventana entera que contiene al canvas, se hace el repintado de inmediato y evitamos que se borren nuestros gráficos.

Redefiniremos la función paint(Graphics g), donde la variable 'g' es la que permite llamar métodos para la generación de primitivas geométricas como: líneas, círculos, elipses entre otras. Como se ve, no usaremos directamente la clase Canvas, sino que heredaremos todas sus propiedades hacia una clase de usuario "Lienzo".

La segunda clase es "App" que contendrá el main, y donde crearemos una ventana con JFrame, ahí 'empotraremos' nuestro Lienzo que contendrá la línea dibujada. Dibujaremos una línea en 2D: desde del punto (0,0) hasta el punto (400,200).

Hay que tomar en cuenta que las coordenadas del canvas empiezan de arriba abajo y de izquierda a derecha.
La jerarquía de las clases es más o menos como queda en la siguiente figura:

Las clases en naranja: "App" y "Lienzo" son las clases creadas por nosotros y la que usaremos, las clases en azul son clases llamadas de las librerías de Java, a través de la sentencia 'import'. Tanto la clase "App" como "Lienzo" están en el paquete "canvas" (véase la primera línea en el código: package canvas), por tanto tendremos que crear una carpeta con el nombre "canvas" en donde estarán los archivos compilados de las clases.

Lienzo.java

package canvas;

import java.awt.Canvas;
import java.awt.Graphics;

public class Lienzo extends Canvas
{

public void paint(Graphics g)
{
// Dibujando una linea desde el punto (0,0) hasta el punto (400,200)
g.drawLine(0,0,400,200);
}

}

App.java

package canvas;

import javax.swing.JFrame;

public class App
{
public static void main(String[] param)
{
Lienzo l = new Lienzo();

JFrame ventana = new JFrame("Ventana de dibujo");

ventana.getContentPane().add(l);
ventana.setSize(400,400);

ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ventana.setVisible(true);
ventana.pack();
}
}

Las sentencias usadas para la compilación fueron:

La ventana tiene dimensiones 400x400. La línea está dibujada desde la coordenada (0,0) del Canvas, hasta el punto final (400,200), como puede verse en la figura: