Foro de elhacker.net

Buenas,
estoy haciendo un proyecto para la uni en el que tengo una clase DibujarNodo que dibuja Nodos de un arbol que contienen: Nombre, texto y una lista de atributos.

Esta clase tiene un metodo paint que quiero reescribir con el objetivo de pintar en un Jpanel todos los nodos del arbol independientemente del tamaño que tenga el arbol, y que si el arbol es muy grande no se solapen en pantalla los nodos ala hora de dibujarlos.

Me comentaron que con un JTree se puede hacer esto, pero me prohiben usarlo, asique tengo que hacerlo yo a pelo dibujandolo sobre un JPanel.

De momento no he hecho mas que las cabeceras y un ejemplo inicial del Pintar:


el problema q tengo es q representar eso graficamente con un arbol q tenga, 40 hijos y q por ejemplo todos ellos tengan otros 40 hijos, a mano no se puede pintar pq se empezarian a solapar en el panel.
Busco un algoritmo que pueda representar graficamente un arbol donde cada nodo es un por ejemplo un cuadrado que contiene nombre y texto sobre el cuadrado.

Algo similar a esto:
http://www.programacion.com/cursos/jap_data_alg/images/jw-0613-java10113.gif
Digamos que el panel deberia redimensionarse si el arbol se va haciendo mas grande, y el algoritmo debe hacer q no se vayan solapando.

Muchas gracias!

La parte grafica de la programacion es siempre la que peor se me da T.T

En tu caso, ¿no seria mejor que redimensionaras los arboles en si, mas que el jpanel?
Digo, si tengo 1 arbol con 3 hijos, que ocupe todo el panel
Y si tengo 1 arbol con 40, que se hagan mas pequeños para que quepan en el mismo
Puedes hacer que tu aplicacion se ejecute a pantalla completa si quieres, o que empieza con un tamaño bastante grande

Si no, tampoco debe ser muy dificil calcular si cabe en el panel, y si no aumentarle las dimensiones
Pero ni idea si se puede aumentar la dimension aun panel que ya esta creado
Todo es cuestion de que te mires la api, si eso tendra algo como setHeigh/setWidth

La verdad esque era algo que no me habia planteado, y es una buena idea...aunque no me he puesto manos a la obra por no tener del todo claro la idea, y asi tambien es más dificil, pero seguire buscando ideas y me pondre a ello a ver si sale algo.

He encontrado un codigo en Google Code que he pensado quiza me ayude para lo que quiero hacer, agradeceria si alguien me dijera si voy por buen camino...
http://www.google.com/codesearch/p?hl=es&sa=N&cd=19&ct=rc#z6GKVQhaQrg/trunk/vozip/WebContent/applet/web/Nodo.java&q=dibujar%20arbol

mm yo calcularia la altura del arbol primero, y empezaria a dibujar desde abajo hacia arriba. Por ejemplo, si la altura(profundidad maxima entre todos los nodos) es 10, y el ultimo nivel tiene 50 hijos, entonces crearia un JPanel de 500 x 1000 ponele. Le asignas a cada nivel 500/10 pixeles y a cada cuadrado (nodo) 1000/50 pixeles.
Luego, vas tomando los nodos desde el ultimo nivel al primero, y dibujandolos de acuerdo a ese tamaño. No se tendrian que solapar de ninguna manera.
No se me ocurre una manera rapida de conectar hijos y padres, pero supongo que se podria hacer con un atributo en la clase Nodo.
Obviamente, el JPanel lo metes adentro de otro, y le pones un JScroll, para que ponele, si mide 1000 pixeles de ancho, te muestre solo 500 y el resto haya que desplazarse. Como en Writer para desplazarse hacia abajo en las paginas..

Se me ocurrieron unas ideitas, mira. Se podría dibujar el árbol desde abajo hacia arriba así:
Dividir primero el panel en x*y, donde x es el número de nodos en el nivel con nodos=max (el nivel con mas nodos), y es la altura del arbol (nodo mas profundo).
Luego haces, para cada nodo del nivel i, dibujarNodo(nodo).
dibujarNodo busca la ubicación del padre en la lista de nodos del nivel i-1. Luego, si por ejemplo el padre esta en la posición 3, esto significa que hay dos nodos antes. Para dibujar el nodo del nivel i cuyo padre esta en i-1 en la posición 3 imaginamos que hay dos nodos antes, y hacemos las cuentas de posición como si estos existieran. Así, el nodo nos va a quedar ubicado debajo del padre. Pero antes de pintarlo, contamos la cantidad de hijos del padre y guardamos en un variable. Ponele que el padre tenga 3 hijos: la variable empieza en -60 y por cada nodo le sumas 60. Entonces, al primer hijo del padre lo pintas en Xpadre-60, al segundo en Xpadre, y al tercero Xpadre+60.
Cuando tenga un rato libre lo voy a tratar de hacer.
Agregame al Msn si te intersa discutirlo.

Acabo de leer tus comentarios!! jeje gracias.
Recuerdo que pense en lo de dibujarlo desde abajo pero no profundice pq tenia q dejar la practica para verano!! jejeje
Me pierdo un poco en lo de las posiciones del nodo padre, y como las calculas.
Mi clase recibe un árbol no una lista, supongo q sera cuestion de recorrer el arbol incluso lo mismo asi es mas sencillo pq utilizo un TAD q si no recuerdo mal tiene metodos q te dan el padre y el hijo y la profundidad del arbol, etc...

Ahora mismo ando un poco liado, en cuanto pueda te agrego y hablamos.

Muchas gracias!!

jeje bueno estuve pensando unas cosas y llegue a esto.

DESCARGAR (http://www.4shared.com/file/123635686/334393c3/tp_online.html)

nota: no acepto criticas relacionadas con el codigo porque lo escribi rapido y dando soluciones temporales jaja me atajo porque hay muchas variables, mucho despelote, castings donde no deberia, etc. prometo una versión final. ademas, todavia falta que el espacio en x entre nodos sea relativa. la distancia y si es relativa y varia si se agranda o achica la pantalla y cuando se agregan nodos que modifican la altura. Para modificar el arbol deben editar el constructor de la clase dibujo. las clases auxiliares son estructuras de datos que tengo en la pc y que use, todas hechas por mi. Espero sirva de algo jajaj

Para que la medida en X sea relativa hay que modificar la linea 86 mas o menos que dice algo asi:

int saved=((TreeNode<Integer>)arbolito.parent(p)).x+(difx*50*(Math.abs(mitad-hijosagregados)));

por esta otra

int saved=((TreeNode<Integer>)arbolito.parent(p)).x+(difx*((TreeNode<Integer>)arbolito.parent(p)).x*2/nodosNivel*(Math.abs(mitad-hijosagregados)));

un saludo  :-*

He estado mirando el codigo, la parte de pintar los niveles no la tengo muy clara, si pudieras comentarla seria de gran ayuda.
Gracias

Yo tengo que hacer algo similar de tarea, para dibujar un arbol genalógico. Espero terminarla para postearlo obviamente  ;).

salu2

Tengo un problema ahora, he seguido la estructura del codigo de juancho77, pero en su lugar estoy pintando sobre un JPanel, el problema es que el usaba el metodo de JFrame "Pack()" para ajustar automaticamente la pantalla ala necesidad del arbol, es decir, si el arbol era mas grande se redimensionaba sola la pantalla gracias a este metodo.

Mi problema es que JPanel q yo sepa no puede usar el metodo Pack() y no conozco de la existencia de uno similar q ajuste al panel.
Sobre todo porque para dibujar en el panel he tenido q poner SetLayout(null) y el metodo "getPreferedSize" no me sirve teoricamente...
Si no pongo ese metodo SetLayout a null teoricamente podria redimensionarse, pero si no me equivoco perderia las coordenadas x e y donde pinto cada nodo...

Hasta ahora lo q he hecho ha sido añadir al final del paintComponent esta linea:
//Altura es la profundidad del arbol, el numero de niveles q tiene...

el problema es que la coordenada X se inicializa al principio de cada iteracion asi:

Al hacer esto ya hay casos en los que no me pinta bien el arbol porque el calculo de la coordenada x depende del tamaño del panel, y como podeis ver en mi codigo, el tamaño del panel depende de maxNodos(nivel del arbol con mas nodos).

Creo que me muerooo, ayudaa!!!! xDDD

He actualizado esa linea por esta otra:
//nodosNivel al ejecutar esta linea tiene el valor de los nodos del ultimo nivel...

Parece ser q asi funciona, al menos con las 3 pruebas q he hecho, tengo q hacer mas, metiendo mas niveles al arbol pero lo pongo por si alguien me corrige.

Parece ser q el algoritmo inicial falla..no funciona para todos los casos, en cuanto metes 3 niveles el ultimo con muxos hijos se empiezan a solapar...e incluso hay veces q un nodo se sale del panel y no se ve en pantalla.

Alguna idea??

gracias

De aqui al domingo publico el que hice para una tarea... ruegen porque me acuerde que ahora no puedo y quisa todo el trabajo que tengo me haga olvidar, pondre una alarma que me avise  ;D, el metodo en si es recursiivo que recibe la raiz del arbol n-ario y va graficando todos los demas nodos  ;).

salu2

Estamos a domingo y estoy ansioso por ver tu metodo!!  ;D xD

Bueno lamento la demora pues como todavia ando un poco acosado de tareas solo subire el el src para que lo vean porque no me queda tiempo de explicarlo detelladamente, pero basicamente los dos metodos mas importantes se encuentran en el paquete JTGraph de la misma clase JTGraph.java dibujarArbol() y dibujarNodo().

El primero recibe la raiz del arbol n-ario y va creando BufferedImages como sea necesario segun los hijos que tenga dicho nodo, los cuales son creados en el metodo dibujarNodo, y finalmente estos BufferedImages son unidos en un BufferedImage final que sera el que se pegara en el panel.

public BufferedImage dibujarArbol(nodo raiz,int x,int y)
    {
        if (raiz.esHoja()) return dibujarNodo(raiz);
 
        ArrayList<BufferedImage> imagenes=new ArrayList<BufferedImage>();
        BufferedImage imagenFinal;
        int ancho=0,alto=0;
        for (Object hijo : raiz.getHijos())
        {
            nodo son=(nodo)hijo;
            BufferedImage im=dibujarArbol(son,0,0);
            imagenes.add(im);
            ancho+=im.getWidth()+GAP_X;
 
            if(im.getHeight()>alto) alto=im.getHeight();
        }
        alto+=ALTO_NODO+2*GAP_Y;
        BufferedImage imagenRaiz=dibujarNodo(raiz);
 
        if(ancho<imagenRaiz.getHeight())ancho=imagenRaiz.getHeight();
 
        imagenFinal=new BufferedImage(ancho, alto, BufferedImage.TYPE_INT_RGB);
        imagenFinal.getGraphics().setColor(Color.white);
        imagenFinal.getGraphics().fillRect(0, 0, getWidth(), getHeight());
        Graphics2D g2d=imagenFinal.createGraphics();
 
        g2d.drawImage(imagenRaiz, ancho/2-ANCHO_NODO/2, 0, null);
        int posx=GAP_X;
 
        for (BufferedImage bNodo : imagenes) {
 
            g2d.setColor(Color.RED);
            g2d.setStroke(new BasicStroke(2));
            g2d.drawLine(ancho/2, ALTO_NODO+0, posx+bNodo.getWidth()/2, ALTO_NODO+GAP_Y*2);
            g2d.drawImage(bNodo, posx, ALTO_NODO+2*GAP_Y, this);
            posx+=bNodo.getWidth()+GAP_X;
 
        }
 
        imagenFinal.getGraphics().setColor(Color.black);
        imagenFinal.getGraphics().drawRect(0, 0, getWidth(), getHeight());
        return imagenFinal;
    }
 
    /**
     * netodo para dibujar un solo nodo
     * @param n el nodo a dibujar
     * @return una imagen con le nodo dibujado
     */
    private BufferedImage dibujarNodo(nodo n)
    {
        BufferedImage imagenNodo=new BufferedImage(ANCHO_NODO, ALTO_NODO, BufferedImage.TYPE_INT_RGB);
        Graphics2D g=imagenNodo.createGraphics();
 
 
        g.setColor(Color.CYAN);
        g.fillRect(0, 0, ANCHO_NODO, ALTO_NODO);
 
        BasicStroke bs=new BasicStroke(3);
        g.setStroke(bs);
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, ANCHO_NODO-1, ALTO_NODO-1);
 
        g.setColor(Color.BLUE);
        g.setFont(new Font("Arial", Font.BOLD,20));
        g.drawString(n.toString(), 10, ALTO_NODO/2);
 
        return imagenNodo;
    }
 

Link: http://www.zshare.net/download/65561955ef26ba1f/ (http://www.zshare.net/download/65561955ef26ba1f/)

Salu2 y espero les sirva de algo ;)

Alguien lo ha mirado o sigue en las penas???  :-\

jaja yo lo acabo de ver y me da verguenza la solución que di yo antes.
un abrazo viejo, buen código.

Tengo yo que hacer algo parecido.

Agradezco el aporte de juancho77 (aunque el link está caído) y de AmeRiK@nO.

Fran88, ¿al final qué código utilizaste?

Gracias

pues yo entregue un proyecto similar...solo que lo deje a medias
por que los nodos se me enciman...pero los programo en un  Applet...
habia creado un tema para pedir ayuda de como dibujarlo pero al final encontre esta solucion... :rolleyes:

/*Metodo recursivo que dibuja el arbol empezando de la raiz hasta la ultima hoja*/
public void dibujaNodo(Graphics g,int x,int y,NodoA raiz)
{
	NodoA aux=raiz;
 
	//si la raiz no esta vacia--tiene al menos un elemento
	if(aux!=null)
	{
		g.setColor(new Color(255,228,196));
		g.fillOval(x,y,25,25);
		g.drawOval(x,y,25,25);//solo dibujamos el nodo raiz en X Y
 
		g.setColor(new Color(165,42,42));
		g.drawString(aux.getinfo()+"",x+9,y+16);//dibujamos la info de raiz en medio del circulo
 
		/*si hay algo en la izquierda*/
		if(aux.getizq()!=null)
		{
			//Imprimir linea de x,y a x-TAM, y+TAM	
 
			g.drawLine(x+5,y+22,x-35,y+50);
			/*se llama el metodo pero ahora con nuevas coordenadas y otro nodo*/
			dibujaNodo(g,x-50,y+50,aux.getizq());
 
		}
 
		/*si hay algo en la derecha*/
		if(aux.getder()!=null)
		{
			//Imprimir linea de x,y a x+TAM, y+TAM
			g.drawLine(x+20,y+22,x+55,y+50);
			/*se llama el metodo pero ahora con nuevas coordenadas y otro nodo*/
			dibujaNodo(g,x+50,y+50,aux.getder());
 
		}
	}
 
}

ya solo en el metodo paint

public void paint(Graphics g) {
 
	g.drawImage(titulo,120,0,242,93,this);
		/*Solo acomodamos los componentes*/
		txtDato.setBounds(420,30,30,20);
		insertar.setBounds(440,60,60,20);
		eliminar.setBounds(370,60,60,20);
 
		rEn.setBounds(20,95,120,20);
		rPos.setBounds(160,95,120,20);
		rPre.setBounds(310,95,120,20);
 
		h.setBounds(168,125,100,20);
 
				dibujaNodo(g,200,150,A.getraiz());
 
 
	}

bueno pues salu2 a todos  ;D

Gracias por la ayuda. Terminé el proyecto y cuando se acabe el curso subiré el código aquí.
Un saludo