lunes, 13 de junio de 2011

JPanel transparente, JPanel con imagen de fondo

Hola de nuevo, después de casi un mes sin Internet y sin poder pasaros contenido nuevo, volvemos con un ejemplo muy sencillo de algo que os puede resultar muy útil a muchos.

Se trata de hacer que nuestro JPanel sea transparente y ponerle detrás una imagen de fondo. El resultado es muy bueno.
En primer lugar haremos que nuestro panel sea transparente, esto es, básicamente haciendo que no sea opaco estableciéndole esta propiedad al crear el panel. Y en segundo lugar sobrescribiremos el método paint(Graphics g) de este panel para que antes de pintar todos los elementos nos dibuja la imagen de fondo que le hayamos establecido. ¿Fácil verdad?

Primero el código del panel:

package ejemplo7;

import java.awt.Graphics;
import java.awt.Image;
import java.net.URL;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

/**
 * TransparentPanel.
 */
public class TransparentPanel extends JPanel {

 private Image bgImage;

 public TransparentPanel() {
  super();

  // Hacemos que el panel sea transparente
  this.setOpaque(false);
 }

 /**
  * Lo utilizaremos para establecerle su imagen de fondo.
  * @param bgImage La imagen en cuestion
  */
 public void setBackgroundImage(Image bgImage) {
  this.bgImage = bgImage;
 }

 /**
  * Para recuperar una imagen de un archivo...
  * @param path Ruta de la imagen relativa al proyecto
  * @return una imagen
  */
 public ImageIcon createImage(String path) {
  URL imgURL = getClass().getResource(path);
     if (imgURL != null) {
         return new ImageIcon(imgURL);
     } else {
         System.err.println("Couldn't find file: " + path);
         return null;
     }
 }

 @Override
 public void paint(Graphics g) {

  // Pintamos la imagen de fondo...
  if(bgImage != null) {
   g.drawImage(bgImage, 0, 0, null);
  }

  // Y pintamos el resto de cosas que pueda tener el panel
  super.paint(g);

 }

Y ahora como siempre el código de ejemplo:

package ejemplo7;

import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.Dimension;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

/**
 * Ejemplo7.
 */
public class Ejemplo7 {

 private static JFrame frame;

 private static JPanel createExamplePanel() {
  TransparentPanel panel = new TransparentPanel();

  panel.setBackgroundImage(panel.createImage("images/bgImage.jpg").getImage());

  JLabel label = new JLabel("Esto y todo lo que queramos se pinta encima de la imagen de fondo");
  panel.add(label);

  return panel;
 }

 /**
  * Create the GUI and show it. For thread safety,
  * this method should be invoked from the
  * event dispatch thread.
  */
 private static void createAndShowGUI() {

  // Create and set up the window.
  frame = new JFrame("Panel with background image");
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

  Component contents = createExamplePanel();
  frame.getContentPane().add(contents, BorderLayout.CENTER);

  //Set window size
  frame.setPreferredSize(new Dimension(700,525));

  // Display the window.
  frame.pack();
  frame.setLocationByPlatform(true);
  frame.setVisible(true);
 }

 public static void main(String[] args) {
  // Schedule a job for the event dispatch thread:
  // creating and showing this application's GUI.
  javax.swing.SwingUtilities.invokeLater(new Runnable() {
   public void run() {
    createAndShowGUI();
   }
  });
 }

Así es como quedaría la cosa con la imagen que he elegido, obviamente el resultado dependerá de la imagen que carguéis vosotros.


Un saludo y hasta pronto, espero  :)

11 comentarios:

Andriy dijo...

panel.setBackgroundImage(panel.createImage("images/bgImage.jpg").getImage());
Error de setBackgroundImage ...

Unknown dijo...

Desde swing fácil proporcionamos el código básico, las imágenes y otros elementos de los ejemplos debes buscarlos por tu cuenta y colocarlos en la ruta adecuada.

Angel Arcos

erick dijo...

excelente amigo muchas gracias, me sirvió mucho.

Anónimo dijo...

Gracias amigo, me sirvio muchisimo para ponerle fondo a un graficador de vectores R3 que hice, hasta opcion de cambiar el fondo con un boton le agregue, execelente informacion. . Gracias de nuevo

Anónimo dijo...

Joder macho, ¿y cúal es la ruta adecuada?, porque yo no se donde poner /images/bgimage.jpg ... y con la ruta absoluta tampoco consigo hacerlo funcionar.
.... erick y Anónimo( el otro) son unos pelotas !!! :))

Anónimo dijo...

Oye, jajajaj que he encontrado otra solucion...mira esto...
panel.setBackgroundImage(new ImageIcon("D:\\FotoAlumno7.jpg").getImage());

Jojojo, toma ya!!! y va de puta madre!!!

Anónimo dijo...

culiaomentiroso, chupa el pico

Unknown dijo...

jaja gracias me sirvio de mucho yo tengo algo parecido pero con dos paneles el principal con una imagen y el secundario no hayaba la forma de hacerlo transparente para que la imagen del panel de atras quedara sobre el panel secundario jamas pense que con un setOpaque quedara jaja.

Mario Martínez dijo...
Este comentario ha sido eliminado por el autor.
Mario Martínez dijo...

El problema es porque en el ejemplo se usa import java.net.URL; es decir, la imagen se tiene que obtener por red modificando el método quedá así y funciona

public ImageIcon createImg(String path) {

if (path != null) {
return new ImageIcon(path);
} else {
System.err.println("Couldn't find file: " + path);
return null;
}
}

y se invoca así

panel.setBackgroundImage(panel.createImg("ruta").getImage());

Jerson dijo...

no me salio..

Publicar un comentario