Layering a series of Transparent images onto a JPanel or JLayeredPane

Hello all -
I am working on creating a viewfinder type component for a game engine I am developing. Currently, I am loading a BackBuffered image from an array and displaying it in a JPanel. This image essentially serves as the "background" of the viewfinder.
What I would like to do is go one step further and after the background image is determined, load a series of transparent images and place those on top of the background, BEFORE the repaint() method is called. An example of this would be loading the background image, and then loading walls (or other sprites), firing the repaint() method, resulting in the rendering all the images at one time.
I have looked into JLayeredPane, but am uncertain as to whether this is the correct avenue to pursue. Does anyone have any experience with this?
Any assistance would be greatly appreciated.

JLayeredPane is not the way to go. Just draw your images on a panel. If you want/need to do all the drawing before repainting, use a back buffer. See BufferedImage

Similar Messages

  • Problem with loading a transparent image onto Labview FP proggrammatically

    Hi all,
    I have a .png logo with transparent background, and I want to load it onto labview FP prorgrammatically. My problem is, if I load it programmatically (read image, display on image display), the background won't be transparent any more. But if I import it and paster it on labview FP manually, it looks OK.
    I tried picture and it doesn't work.
    Any idea? How to do it?
    Thank you for any help.
    Anne Zuo

    You can sort of do it if you an image of the background as well (e.g. if you capture an image of the panel when the picture control is empty). As mentioned, the alpha channel is actually read from the PNG file, so what you need to do is average each component of each pixel with the data from the other image, but use the alpha information as a weight.
    The code to do this is actually relatively simple (I already did it so I know, although I can't post it) - you need to get the image as a 2D array of U32 and then do a couple of Split Number operations, which will give you the RGB data as a set of 2D U8 arrays. You can then calculate the difference between each component of each pixel in the two pictures and multiply that by the ratio of the transparency (which either goes 0-100 or 0-255, I don't remember). You can then call Join Number to get the U32 array back, which you can wire into Draw Unflattened Pixmap.
    You can also get rid of the picture control border by using a classic picture control or by right clicking the 3D frame and pressing the space bar a couple of times in the color dialog. This toggles between FG and BG colors and will allow you to color the frame transparent.
    Try to take over the world!

  • What's the best way to put a programmat​ically sizeable transparen​t image onto a VI front panel

    The problem is twofold: 1) how can programmatically read a transparent image (i.e. image with transparent background) and 2) how can I programmatically position and size that image onto a VI front panel. The best luck I had with item 2 was with a boolean custom control with an imported image. However, this control does not have a programmatic method for importing an image, so the image had to be manually cut&pasted into the custom control.

    Hi,
    If the image is static, it's possible. You can drop a metafile on the front
    panel, and use Panel>Decorations> to get a reference to the image. Resize it
    as desired.
    Changing the image (e.g. from file) is not possible this way, but you can
    put multiple images on the screen and change the visibility...
    If you want to make a picture viewer, I'd consider an activex control (this
    way you can load several picture formats without any programming).
    Regards,
    Wiebe.
    "Jim Campbell" wrote in message
    news:506500000008000000AF4E0000-1023576873000@exch​ange.ni.com...
    > The problem is twofold: 1) how can programmatically read a transparent
    > image (i.e. image with transparent background) and 2) how can I
    > programmatically position and size that ima
    ge onto a VI front panel.
    > The best luck I had with item 2 was with a boolean custom control with
    > an imported image. However, this control does not have a programmatic
    > method for importing an image, so the image had to be manually
    > cut&pasted into the custom control.

  • Importing transparent images into Indesign

    Hi guys,
    Just started using Indesign cs6 and for the life of me can not work out how to import transparent pngs. All transparent images I import have their background changed to a white background. The image import options has an option to use transparency information, with either use white back ground (which is selected) or use file defined background colour.
    I assume i should be using file defined background colour but its greyed out. Why is this option greyed out and how can I retain a transparent bg in my image? The image i'm importing is fireworks png file.
    Cheers,
    Ps. First post, so go easy on me

    I don't have Fireworks and I haven't made any Fireworks PNG files.
    I'm not sure how they work. But I believe that Fireworks PNGs can contain editable layers for Fireworks use only.
    This may be part of the issue of the transparent background - but as I say I have very limited knowledge of Fireworks.
    What I will say with some degree of comfort is that PNG is primarily a web format - and it's not a print format. Adobe InDesign is a page layout tool intended for Print on mechanical presses - and it's only recently it's been geared towards Web, ePub and  Flash creation.
    Perhaps the Fireworks PNG simply does not work with InDesign.
    Can you save that Fireworks PNG from Fireworks to say a TIF of PSD? Which may be better for importing to InDesign.
    The only other solution I can think of is to open that PNG file in Photoshop and save it as a Transparent PNG from there using File>Save for Web

  • Dragging One Image Onto Another

    The book, Photoshop Layers, by Kloskowski, starts the subject of Masks on p. 94 by telling the reader to open two images, then use the Move tool to drag one onto the other so that they are in the same document.
    A picture of what that should look like shows, in the Layers palette, image A in the Background layer, and image B residing in Layer 1. Each thumbnail shows an entire image (not a checkered thumbnail with a small image within it).
    As the title indicates, the book is designed for Photoshop users. I use Elements 6 but have been able to perform most of the tutorials; however, the above instructions baffle me. I cannot fathom what he is talking about.
    In Elements 6, How can I drag one image onto the other? I start out with two images in the bin - and the move tool does not work on bin images. I have tried various workarounds but the results do not look like the Layers palette picture he shows. For instance: File/New/Blank File does not work.
    As to my level of knowledge: I am very comfortable with layers of all sorts and understand/use them. I am also familiar with Elements. So, if you will, assume I am not a neophyte, even though my question may seem very basic.

    Normally this won't matter, but there are situations where it does change what you bring in; like rasterizing an EPS file, for instance. In full PS, it creates smart objects from the files you use the command on.
    A text layer, for example, is no longer editable after being placed. But for most images, I suppose it would be okay.

  • How to project an image onto a background image?

    Hi,
    I am looking for help with projecting an image over another image.
    I am looking for a similar effect to the image above where it looks like the image of the player as (physically) been projected onto the tunnel.
    Looking closely at the detail of the image you can see that the projection adjusts to the contours of the tunnel i.e. over the framing. This is what I specifically need some help with. I know how to overlay an image onto another using different layers but it doesn't really give a three-dimensional perspective and looks rather flat.
    Any help or advice would be greatly appreciated. Thanks
    Ravi.

    Hi Ravi -
    Could you post what you have done so far, and include your expanded layers panel? The source images would also be helpful, if possible!
    One thing you could try is creating a Displacement Map of your background tunnel image and then wrapping your overlay image to it. The video tutorial below shows you how to do this:
    Beside this, you might just have to spend time tweaking your image to create a realistic overlay. This includes adjusting lighting, but also distorting your overlay image. Have you tried using Edit > Transform > Perspective to align your image to the tunnel? The other Transform tools like Distort and Warp might also come in handy.
    I'm looking forward to helping you with this effect!
    Cheers,
    Kendall

  • Exracting a transparent image from black background

    Hey all! A little bit confused on a project. I have an image that is semi-transparent. I am able to take the black out of the background around it, but am unsure about how to remove the acutal background from behind the image. I need to superimpose this image onto another-hence the background change. Any tips or ideas? I have the newest version of PS. Please help!
    Kind regards,
    Ashley

    Hi,
    I am moving your post to the Photoshop General Discussion forum. You should get a response there. (This forum is specifically for the Edit your first photo page.)
    Best regards,
    Randy Nielsen
    Product Integration Manager, Creative Cloud Learning & Training
    Adobe

  • Extracting transparent image from canvas

    Hi Folks,
    Given an image painted on a graphics2D, I need to copy some parts of this image to be able to process them and repaint them in place, giving to the original image a different look.
    Theses parts are not rectangles but donuts like shapes (circular surface with a hole in he middle).
    The approach I tried in the following:
    - Combining 2 ellipses Shape to be able to create an Area representing the donut shaped surface
    - Clipping the Graphics2D this Area
    [at this point, if the panel is repainted with the clip set, the original image is only visible through the donut shape clip, which is exactly was I want]
    - creating a new image with transparency, painting the clipped original image onto this new image
    [that's where it does not work, if I paint the new image on the canvas, it's blank, or when I disabled transparency, it's a squared shape, and not a donut like shape]
    Any help/hint would be gladly appreciated, below in the paintComponent method
    Thanks
    Elie
    public synchronized void paintComponent(Graphics g) {
            g2d = (Graphics2D)g;
            if ( readyToDisplayImage == null ) {
                g2d.setColor(getBackground());
                g2d.fillRect(0, 0, getWidth(), getHeight());
                return;
            // account for borders
            Insets insets = getInsets();
            int tx = insets.left + originX;
            int ty = insets.top  + originY;
            // clear damaged component area
            Rectangle clipBounds = g2d.getClipBounds();
            g2d.setColor(getBackground());
            g2d.fillRect(clipBounds.x,
                         clipBounds.y,
                         clipBounds.width,
                         clipBounds.height);
              g2d.drawRenderedImage(readyToDisplayImage,
                                  AffineTransform.getTranslateInstance(tx, ty));
       if(test) {
            Shape oldClip = g2d.getClip() ;
            Shape s1 = (new Circle(500,500, 150)).toEllipse2D();
            Shape s2 = (new Circle(500,500, 250)).toEllipse2D();
            Area a1 = new Area(s1);
            Area a2 = new Area(s2);
            a2.subtract(a1); // donut shaped mask
             g2d.setColor(getBackground());
             g2d.fillRect(0, 0, getWidth(), getHeight());
            g2d.setClip(a2) ;
            g2d.drawRenderedImage(readyToDisplayImage,AffineTransform.getTranslateInstance(tx, ty));
            Rectangle bounds = a2.getBounds();
            BufferedImage subimage = new BufferedImage(bounds.width, bounds.height, BufferedImage.TYPE_INT_ARGB);
            Graphics2D g2 = (Graphics2D) subimage.createGraphics();
            // Clear image with transparent alpha by drawing a rectangle  - commented beacause worsens things
           // g2.setComposite(AlphaComposite.getInstance(AlphaComposite.CLEAR, 0.0f));
           // Rectangle2D.Double rect = new Rectangle2D.Double(0,0,bounds.width, bounds.height);
            //g2.fill(rect);
            g2.drawRenderedImage(readyToDisplayImage, AffineTransform.getTranslateInstance(bounds.x, bounds.y));
            g2.dispose();
            g2d.setClip(oldClip) ; //back to normal
         // Now checking whether the extracted sub image has the expected shape : this is not the case
             g2d.setColor(getBackground());
             g2d.fillRect(0, 0, getWidth(), getHeight());
             g2d.drawImage(subimage, bounds.x, bounds.y, this );
        }

    I found another way, which is using ROIShape class as mask.
    But an exception is raised by the last line of the method.
    Apparently the resulting image form and "add" between a oneband and a 3 band image is not supported.
    Also, if I do convert the one band image to color, it does not solve the problem
    ColorModel colorModel = cropped.getColorModel();
    pb = new ParameterBlock();
         pb.addSource(maskimage);
         pb.add(colorModel);
    maskimage = JAI.create("colorconvert", pb);
    What would be the right way to do this ?
    Thanks
    trace:
    image mask bounds=java.awt.Rectangle[x=250,y=250,width=500,height=500]
    cropped image bounds=java.awt.Rectangle[x=250,y=250,width=500,height=500]
    subimage image bounds=java.awt.Rectangle[x=250,y=250,width=500,height=500]
    Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
    at com.sun.media.jai.opimage.AddOpImage.computeRectByte(AddOpImage.java:268)
    at com.sun.media.jai.opimage.AddOpImage.computeRect(AddOpImage.java:220)
    at javax.media.jai.PointOpImage.computeTile(PointOpImage.java:974)
    at com.sun.media.jai.util.SunTileScheduler.scheduleTile(SunTileScheduler.java:912)
    at javax.media.jai.OpImage.getTile(OpImage.java:1139)
    at javax.media.jai.RenderedOp.getTile(RenderedOp.java:2268)
    at sun.java2d.SunGraphics2D.drawTranslatedRenderedImage(SunGraphics2D.java:2864)
    at sun.java2d.SunGraphics2D.drawRenderedImage(SunGraphics2D.java:2751)
    at circleops.ImagePanel.paintComponent(ImagePanel.java:253)
    public synchronized void paintComponent(Graphics g) {
            g2d = (Graphics2D)g;
            if ( readyToDisplayImage == null ) {
                g2d.setColor(getBackground());
                g2d.fillRect(0, 0, getWidth(), getHeight());
                return;
            // account for borders
            Insets insets = getInsets();
            int tx = insets.left + originX;
            int ty = insets.top  + originY;
            // clear damaged component area
            Rectangle clipBounds = g2d.getClipBounds();
            g2d.setColor(getBackground());
            g2d.fillRect(clipBounds.x,
                         clipBounds.y,
                         clipBounds.width,
                         clipBounds.height);
                Translation moves the entire image within the container
            g2d.drawRenderedImage(readyToDisplayImage,
                                  AffineTransform.getTranslateInstance(tx, ty));
            g2d.setColor(Color.red);                     
            g2d.fillRect(lastClickedX-4, lastClickedY-4, 8, 8);
            //System.out.println("x="+currentX+" y="+currentY);
            Iterator<ConcentricTurbulence> it = concentrics.iterator();
            while(it.hasNext()) {
            if(test) {
            Shape oldClip = g2d.getClip() ;
            Shape s1 = (new Circle(500,500, 150)).toEllipse2D();
            Shape s2 = (new Circle(500,500, 250)).toEllipse2D();
            Area a1 = new Area(s1);
            Area a2 = new Area(s2);
            a2.subtract(a1);
            ROIShape roishape = new ROIShape(a2);
            PlanarImage maskimage = roishape.getAsImage();
            Rectangle bounds = maskimage.getBounds();
            System.out.println("image mask bounds="+bounds.toString());
            ParameterBlock pbc = new ParameterBlock();
            pbc.addSource(readyToDisplayImage);
            pbc.add((float)bounds.x);
            pbc.add((float)bounds.y);
            pbc.add((float)bounds.width);
            pbc.add((float)bounds.height);
            PlanarImage  cropped = JAI.create("Crop", pbc, null);
            System.out.println("cropped image  bounds="+cropped.getBounds());
            ParameterBlock pbd = new ParameterBlock();
            pbd.addSource(cropped);
            pbd.addSource(maskimage);
            PlanarImage  subimage = JAI.create("add", pbd, null);
            System.out.println("subimage image  bounds="+subimage.getBounds());
             g2d.setColor(getBackground());
             g2d.fillRect(0, 0, getWidth(), getHeight());
             g2d.drawRenderedImage(subimage, AffineTransform.getTranslateInstance(bounds.x, bounds.y));
        }

  • Transparent image

    I am using AWT to draw a jpeg onto a panel and then draw a bunch of lines and shapes on to the panel.
    So I get a background picture with a few lines and shapes overlaying the picture.
    New lines and shapes are drawn every time the user clicks on the panel � and some existing lines and shapes are removed � exposing the hidden parts of the background image.
    My problem is that every time the user clicks on the panel the whole background picture has to be repainted just for a few lines and shapes that overlay the picture (I use the paint() function to redraw the background image and all the other lines and shapes on top).
    Since the background image can be quite large at times (not always the same image), repainting the image can look very unattractive and annoying for the user.
    What I want to do is somehow avoid repainting the background image every time the user clicks the image, but rather only repaint the images and shapes in front
    or
    Only repaint the parts of the background image that are obscured by the overlaying lines and shapes that drawn on top.
    I have an internet site with an applet showing this problem at:
    www.cephx.com
    click demo and then click the pencil icon on the toolbar.
    Any suggestions on how to solve this problem?
    Thanks.
    Danny Abraham.

    I think using a layered pane for your background image might help:
    import java.awt.event.*;
    import javax.swing.*;
    import java.awt.*;
    public class TestBackgroundLayered extends JFrame
         public TestBackgroundLayered()
              ImageIcon image = new ImageIcon("????.jpg");
              JLabel background = new JLabel(image);
              background.setBounds(0, 0, image.getIconWidth(), image.getIconHeight());
              getLayeredPane().add(background, new Integer(Integer.MIN_VALUE));
              JPanel panel = new JPanel();
              panel.setOpaque(false);
              panel.add( new JButton( "Hello" ) );
              setContentPane( panel );
         public static void main(String [] args)
              TestBackgroundLayered frame = new TestBackgroundLayered();
              frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
              frame.setSize(300, 300);
              frame.setVisible(true);
    }

  • Transparent image problem

    Hi all,
    I have two images of the world, both of exactly the same size. The first is a background, and provides texture. The second image goes on top and is supposed to be transparent to let the texture show through. My problem is that when i display the 'transparent' image on top, you cannot see the contours through it, instead the top image just appears a pale colour because of the transparency added to it, as opposed to actually being transparent. Here is my code:
    import java.awt.*;
    import java.awt.image.*;
    import java.io.*;
    import javax.imageio.*;
    public class GamePane extends Canvas {
        /** Creates a new instance of GamePane */
        public GamePane() {
            try {
                buff1 = ImageIO.read(getClass().getResource("images/map_background.gif"));
                buff2 = ImageIO.read(getClass().getResource("images/map.gif"));
            catch (IOException ioe) {
                System.out.println("Problem reading in file: " + ioe);
        public void paint(Graphics g) {
            g.drawImage(buff1, 0, 0, null);
            g.drawImage(buff2, 0, 0, null); //the transparent image
        Image img;
        BufferedImage buff1;
        BufferedImage buff2;
    }Can anyone suggest where i am going wrong?
    Many thanks

    As I understand you right, you want to use a top layered image with transparent parts. If this is the case, you should use the same color for all transparent parts in the picture and use a paint program to change the transparent color to the color mentioned. I use always microsoft paint to do this. (picture-attributes-transparent...)
    the colored parts will automatically appear transparent.

  • How to create transparent image at run-time?

    How to create transparent image at run-time? I mean I want to create a (new) transparent image1, then show other (loaded) transparent image2 to image1, then show image1 to a DC. The problem is - image1 has non-transparent background...

    i'm not sure, but you can set the alpha value to 0 in all pixels which are 'in' the background..
    greetz
    chris

  • White box behind transparent images with drop shadow in InDesign CC 2014 (v.10) but not in InDesign CC (v.9)

    Hi all,
    Please can you help? No matter what settings I use in my print options in InDesign CC 2014 (v.10), ALL transparent images with a drop shadow are printing with a white box behind the image. If I remove the drop shadow, all prints fine. I know this is an old issue that happens with ID sometimes but I have been lucky enough to never have had it happen to me before! (All images are regular flattened TIFF images with clipping paths).
    Also, feathered edges are not printing correctly and are sharp instead of feathered.
    When I export the document to IDML and open it up in InDesign CC (v.9) all prints perfectly with no white boxes and feathered edges prints perfectly as well. I have compared all of the print settings (including color management, transparency flattener, etc.) between both versions and they are exactly the same. I am printing to a Xerox color laser printer. Can anyone offer any advice?
    Thank you so much,
    Christine

    Okay...false alarm! It turns out that the issue was with my PRINTER settings (the settings you customize after hitting the “Printer” button at the bottom of the Print dialogue box in ID CC. I thought I had triple checked this but it seems there was one setting I missed earlier…adjusting the print brightness seemed to cause the issue. SO GLAD to know it was not InDesign…20 or so sheets/prints later….and thankful to know what was causing the issue! Thank you so much Steve for helping at any rate:) Much appreciated:)

  • When importing images into LR5 on my laptop, the photos all have a wide yellow streak through them. This only happens on the laptop; I can import the images onto my desktop LR and there isn't the streak of colour.   Can someone help?

    When importing images into LR5 on my laptop, the photos all have a wide yellow streak through them. This only happens on the laptop; I can import the images onto my desktop LR and there isn't the streak of colour.   Can someone help?
    This is happening even with photos that were taken on another camera, not just mine.  My daughter told me that the laptop recently fell.  The yellow streak is not anywhere else on the laptop, just on the photos in LR.

    I have had this problem on my desktop.  I have been attempting to reproduce it where it can be debugged. Here are some observations/facts in my environment--no conclusions:
    1. I do not import from camera or memory stick directly into LR.  I copy all images (using Explorer) from camera to two different locations (backup location first); and then my working area. In both cases, after files are copied I mark them Read-only.
    2. Poor observation, but in any event: the issue has only occurred when I do a large number of images. Its a poor observation as I have no exact number.  I suspect when I do less than 50 always works well every time.  However, I have also done some very large imports without issue.
    3. Error only occurs with my RAW images--for me that's NEF.  I have multiple cameras--those that only capture jpg images have never had an issue in LR.
    4. Even if the file is marked Read Only issues can still occur.  I then remove the image from the disk using LR -- and then manually (Explorer) copy in my backup image -- re import again and all is well.  I think one time I exited LR and replaced the bad file with a backup and restarted LR and all was well again.
    5. When it occurs I have performed a HASH value on the broken file and on the backed up file to determine if the file contents has changed--and each time the file contents has changed.
    6. I have had this occur immediately after import, but most often it occurs like this... import large number of images; Make changes in Development Module on random image, export jpg of changes--exit LR. Open up LR and file is corrupted.
    7. I have had this issue on multiple USB drives ( okay just 2 different drives have been tested ).
    What next--fire up Process Monitor and monitor the system (specifically LR) to see if it reports any file open for write access when this occurs.  So, far I have not had process monitor actually running when it occurs--one of these days.

  • Colors shift when a PDF file contains transparent image

    Hello,
    I tried to programatically set a soft mask to an image by using the Addobe PDF Library, in order to make part of the image transparent. The image color space is RGB. I used PDEImageSetSMask() funtcion for setting the mask. I also have a PDF file that was created in the same way but without the part of the code that sets the mask. Therefore this PDF contains the same image as not transparent.
    When I open two files in Adobe Reader 9.2.0 the colors are not the same. The colors in the file which contains the transparent image are a bit darker. The colors are different not only inside the image box, but in all page area. I also tried to open the same file in GSView and there was no such problem.
    Can I fix this by changing the Adobe reader preferences, or this is a problem in the code that genereates the PDF?
    If this is not the correct forum to ask this question, please direct me to the correct forum
    Thanks

    You need to set the transparency blending space of the page to RGB, since the default blending space is CMYK (hence the color shift).  You do this by adding a transparency group dictionary to the page's dictionary when creating the PDF.

  • Can't drag image onto stage in new layer, from the library?

    For a text book assignment we have to make a new layer and then drag a image from the library panel onto the stage but it won't let me? The new layer doesn't look the same as the rest in the timeline panel too.

    Hi,
    Thank you for your advice, but sadly it isn't locked. I can drag an image onto a layer already there just not a new layer for some reason. I'm behind in class because of this issue but I'm at a loss. I know how to take a screen shot but how do I add it to here, I pasted it in microsoft word but it wouldn't allow me to upload it as a image...

Maybe you are looking for