#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1

    How to get rid of boarders on images.


    Hello,

    Below is a link to a YouTube video I just uploaded. You can see there's a little boarder around the car. How can I get rid off it? It's a .PNG file (Microsoft paint). Is there a way? Or do I have to do something with PhotoShop or GIMP?

    Also, the car doesn't show up when the program runs initially, it only shows up if I press up, down, left, or right keys.

    My YouTube video, click here

    Code:
    package driveroad;
    
    import java.awt.Color;
    import java.awt.Dimension;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.event.KeyAdapter;
    import java.awt.event.KeyEvent;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.IOException;
    import java.util.logging.Level;
    import java.util.logging.Logger;
    import javax.imageio.ImageIO;
    import javax.swing.JPanel;
    
    public class driveRoadPanel extends JPanel{
        
        private BufferedImage road, currentCar,carUp, carDown, carRight, carLeft;
        private int carX, carY;
        
        public driveRoadPanel()
        {
            try {
                currentCar = ImageIO.read(new File("up.png"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                road = ImageIO.read(new File("road.png"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
                     
            try {
                carUp = ImageIO.read(new File("up.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carDown = ImageIO.read(new File("down.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carRight = ImageIO.read(new File("right.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carLeft = ImageIO.read(new File("left.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            carX = 310;
            carY = 460;
            
            addKeyListener(new AL());
            
            setPreferredSize(new Dimension(600,600));
            setFocusable(true);
    
        }
        
        public class AL extends KeyAdapter
        {                     
            public void keyPressed(KeyEvent e)
            {            
                int keyCode = e.getKeyCode();
                
                if(keyCode == e.VK_UP)
                    {
                        if(carY <= 0)
                            {
                                carY = 0;
                            }
                        else
                            {
                                currentCar = carUp;
                                carY -= 5;
                            }
                    }
                
                if(keyCode == e.VK_DOWN)
                    {
                        if(carY >= 460)
                        {
                            carY = 460;
                        }
                        else
                        {
                            currentCar = carDown;
                            carY += 5;
                        }
                    }
                
                if(keyCode == e.VK_LEFT)
                    {
                        if(carX <= 0)
                        {
                            carX = 0;
                        }
                        else
                        {
                            currentCar = carLeft;
                            carX -= 5;
                        }
                    }
                
                if(keyCode == e.VK_RIGHT)
                    {
                        if(carX >= 460)
                        {
                            carX = 460;
                        }                        
                        else
                        {
                            currentCar = carRight;
                            carX += 5;
                        }
                    }
            }
        }
        
        public void paintComponent(Graphics g)
        { 
            super.paintComponent(g);
    
            g.drawImage(road, 0, 0, this);        
            g.drawImage(currentCar, carX, carY, this);
            
            g.setColor(Color.black);
            g.setFont(new Font("Helvetica", Font.BOLD, 12));
            g.drawString("Car X: " + carX, 20, 20);
            g.drawString("Car Y: " + carY, 20, 40);
            
            repaint();
        }
        
    }
  2. #2
  3. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    Do you have a class with a main() method and JFrame for testing your code?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    Originally Posted by NormR
    Do you have a class with a main() method and JFrame for testing your code?
    Yes, I do.

    Code:
    package driveroad;
    
    import javax.swing.JFrame;
    
    public class DriveRoad {
    
        public static void main(String[] args) {
            
            JFrame frame = new JFrame("Road simulator");
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            frame.getContentPane().add(new driveRoadPanel());
            frame.setResizable(false);
            frame.pack();
            frame.setVisible(true);
            
        }
    }
  6. #4
  7. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    When the program starts, it draws the road image and then the car after a short delay. I don't have to touch any keys.
    I don't see any border with the image I used for the car.

    The repaint() method should NOT be called from inside the paintComponent() method.
    That will result in an infinite loop: each call to paintComponent() will cause another call.
    Call repaint() when the screen needs to be redrawn, like when the car's location has changed.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    Originally Posted by NormR
    When the program starts, it draws the road image and then the car after a short delay. I don't have to touch any keys.
    I don't see any border with the image I used for the car.
    I waited about 15 seconds, but still no car, so I pressed up button, and the car appeared. There's a slight gray boarder, it's hard to see, I matched the background on the road to match the boarder color of the car that's why. If I change the road to green for example, you can see there's a boarder around the car.

    The repaint() method should NOT be called from inside the paintComponent() method.
    That will result in an infinite loop: each call to paintComponent() will cause another call.
    Call repaint() when the screen needs to be redrawn, like when the car's location has changed.
    Not sure if I understand, but I do have the repaint() inside the paintComponent() method.
  10. #6
  11. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    You should call the repaint() method when there has been a change that needs to be redrawn. Do NOT call repaint() from inside the paintComponent() method.

    Is the border you see on the image?
    Last edited by NormR; August 29th, 2013 at 10:10 AM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    Originally Posted by NormR
    You should call the repaint() method when there has been a change that needs to be redrawn. Do NOT call repaint() from inside the paintComponent() method.

    Is the border you see on the image?
    I've modified the code to only call repaint() when needed (only when pushing either up,down,left, or right key).

    Yes, the border is on the image. I'll see if I can upload the car image so you can see.





    Hope you can see the pictures.

    Code:
    package driveroad;
    
    import java.awt.Color;
    import java.awt.Dimension;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.event.KeyAdapter;
    import java.awt.event.KeyEvent;
    import java.awt.image.BufferedImage;
    import java.io.File;
    import java.io.IOException;
    import java.util.logging.Level;
    import java.util.logging.Logger;
    import javax.imageio.ImageIO;
    import javax.swing.JPanel;
    
    public class driveRoadPanel extends JPanel{
        
        private BufferedImage road, currentCar,carUp, carDown, carRight, carLeft;
        private int carX, carY;
        
        public driveRoadPanel()
        {
            try {
                currentCar = ImageIO.read(new File("up.png"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                road = ImageIO.read(new File("road.png"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
                     
            try {
                carUp = ImageIO.read(new File("up.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carDown = ImageIO.read(new File("down.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carRight = ImageIO.read(new File("right.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            try {
                carLeft = ImageIO.read(new File("left.jpg"));
            } catch (IOException ex) {
    //            Logger.getLogger(driveRoadPanel.class.getName()).log(Level.SEVERE, null, ex);
            }
            
            carX = 310;
            carY = 460;
            
            addKeyListener(new AL());
            
            setPreferredSize(new Dimension(600,600));
            setFocusable(true);
    
        }
        
        public class AL extends KeyAdapter
        {                     
            public void keyPressed(KeyEvent e)
            {            
                int keyCode = e.getKeyCode();
                
                if(keyCode == e.VK_UP)
                    {
                        if(carY <= 0)
                            {
                                carY = 0;
                            }
                        else
                            {
                                currentCar = carUp;
                                carY -= 5;
                            }
                        
                        repaint();
                    }
                
                if(keyCode == e.VK_DOWN)
                    {
                        if(carY >= 460)
                        {
                            carY = 460;
                        }
                        else
                        {
                            currentCar = carDown;
                            carY += 5;
                        }
                        
                        repaint();
                    }
                
                if(keyCode == e.VK_LEFT)
                    {
                        if(carX <= 0)
                        {
                            carX = 0;
                        }
                        else
                        {
                            currentCar = carLeft;
                            carX -= 5;
                        }
                        
                        repaint();
                    }
                
                if(keyCode == e.VK_RIGHT)
                    {
                        if(carX >= 460)
                        {
                            carX = 460;
                        }                        
                        else
                        {
                            currentCar = carRight;
                            carX += 5;
                        }
                    }
                
                        repaint();
            }
        }
        
        public void paintComponent(Graphics g)
        { 
            super.paintComponent(g);
    
            g.drawImage(road, 0, 0, this);        
            g.drawImage(currentCar, carX, carY, this);
            
            g.setColor(Color.black);
            g.setFont(new Font("Helvetica", Font.BOLD, 12));
            g.drawString("Car X: " + carX, 20, 20);
            g.drawString("Car Y: " + carY, 20, 40);
        }
        
    }
  14. #8
  15. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    If the border is part of the image then it will be shown when drawn, unless

    The Graphics class's drawImage() method has overrides that you could use to draw only part of the image.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    Originally Posted by NormR
    If the border is part of the image then it will be shown when drawn, unless

    The Graphics class's drawImage() method has overrides that you could use to draw only part of the image.
    Thank you sir,

    I'll try that. Can you see the two images? It should be in my last reply.

    Thanks for your help.
  18. #10
  19. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    No, I can't see the images. Can you see them?
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    Originally Posted by NormR
    No, I can't see the images. Can you see them?
    I can see one of the images, but not the other one.

    Let me go to my google account, and make sure they're both on "public"

    It's just the pictures of road and car.

    Now you should be able to. You have to click on the image, and select open in new tab or window.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    How do you add here anyway?

    I copied the URL for the images inside the

    [IMG]....[/IMG] tag, but it won't show up on the forum.
  24. #13
  25. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,696
    Rep Power
    347
    I don't think I need to see the images.
    Have you tried using an image editor?
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    78
    Rep Power
    1
    To remove the border, you have to download software like GIMP or Paint.NET to edit the image, then save it as a .PNG image.

IMN logo majestic logo threadwatch logo seochat tools logo