Results 1 to 11 of 11
  1. #1
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Problem Drawing Grid with BufferedImage.

    Greetings EveryOne :D

    I am learning to draw with BufferedImage, I managed to save my grid in memory with BufferedImage object and then display the grid in an applet, the problem is the background of the created grid is black and it's outline is white as far as I can tell, so as you can see it should be the other way around.

    Here is my code:

    Java Code:
    import java.applet.*;
    import java.awt.*;
    import java.awt.geom.*;
    import java.awt.image.*;
    
    public class DrawGrid extends Applet
    {
        private final int GridSize = 58;
        private final int GridRows = 8;
        private final int GridColumns = 8;
        
        private int BoardWidth  = GridColumns * GridSize;
        private int BoardHeight = GridRows    * GridSize;
        
        private int WinWidth  = BoardWidth+140;
        private int WinHeight = BoardHeight+158;
        
        BufferedImage BuffImg = new BufferedImage(464, 464, 
                                                  BufferedImage.TYPE_INT_BGR);
        
        Graphics2D Grid;
        
        @Override
        public void init()
        {
            setSize(WinWidth,WinHeight);
            
            repaint();
        }
        
        @Override
        public void paint(Graphics G)
        {
            Grid = (Graphics2D)G;
    
            InitGrid(Grid);
            
            Grid.drawImage(BuffImg, null, GridSize, GridSize);
        }
        
        public void InitGrid(Graphics2D G2D)
        {
            G2D.setColor(Color.black);
            G2D.setBackground(Color.white);
            
            for(int Row = 1; Row <= GridRows; Row++)
            {
                for(int Column = 1; Column <= GridColumns; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize), 
                    ((Row   -1)*GridSize),
                    (Column*GridSize), 
                    (Row   *GridSize));
                    
                    G2D = BuffImg.createGraphics();
    
                    G2D.draw(square);
                }
            }
        }
    }
    Can you guide me to the right direction to solve this, Please.

    Thank You :D

  2. #2
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    SW Missouri
    Posts
    17,308
    Rep Power
    25

    Default Re: Problem Drawing Grid with BufferedImage.

    Try filling a rectangle with the background color and drawing over it in the other color.

  3. #3
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Re: Problem Drawing Grid with BufferedImage.

    Thank you Mr. Norm, it worked but it took me a little while to make it

    If anyone cares to know how it's done, here is the code:

    Java Code:
    import java.applet.*;
    import java.awt.*;
    import java.awt.geom.*;
    import java.awt.image.*;
    
    public class DrawGrid extends Applet
    {
        private final int GridSize = 58;
        private final int GridRows = 8;
        private final int GridColumns = 8;
        
        private int BoardWidth  = GridColumns * GridSize;
        private int BoardHeight = GridRows    * GridSize;
        
        private int WinWidth  = BoardWidth+140;
        private int WinHeight = BoardHeight+158;
        
        BufferedImage BuffImg = new BufferedImage(465, 465,
                                                  BufferedImage.TYPE_INT_BGR);
        
        Graphics2D Grid;
        
        @Override
        public void init()
        {
            setSize(WinWidth,WinHeight);
            
            repaint();
        }
        
        @Override
        public void paint(Graphics G)
        {
            Grid = (Graphics2D)G;
    
            InitGrid(Grid);
            
            Grid.drawImage(BuffImg, null, GridSize, GridSize);
        }
        
        public void InitGrid(Graphics2D G2D)
        {
            G2D.setColor(Color.green);
            G2D.setBackground(Color.green);
            
            for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize), 
                    ((Row   -1)*GridSize),
                    (Column*GridSize), 
                    (Row   *GridSize));
                    
                    G2D = BuffImg.createGraphics();
                    
                    G2D.setColor(Color.white);
                    
                    G2D.fillRect(
                    ((Column-1)*GridSize), 
                    ((Row   -1)*GridSize),
                    (Column*GridSize), 
                    (Row   *GridSize));
                    
                    G2D.setColor(Color.red);
                    
                    G2D.draw(square);
                }
            }
        }
    }
    Note, I had to add one pixel to the width and height of the initialized BufferedImage for the last horizontal and vertical lines to show up:

    Java Code:
    BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                                  BufferedImage.TYPE_INT_BGR);
    And that can make sense, but what doesn't make sense is that I have to add another row & column of cells for the last lines to show up, you can see it here:

    Java Code:
            for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                      // same code goes here...
                }
            }
    For me it makes sense doing this:

    Java Code:
            for(int Row = 1; Row <= GridRows; Row++)
            {
                for(int Column = 1; Column <= GridColumns; Column++)
                {               
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize), 
                    ((Row   -1)*GridSize),
                    ((Column+1)*GridSize), 
                    ((Row   +1)*GridSize));
                    
                    G2D = BuffImg.createGraphics();
                    
                    G2D.setColor(Color.white);
                    
                    G2D.fillRect(
                    ((Column-1)*GridSize), 
                    ((Row   -1)*GridSize),
                    ((Column+1)*GridSize), 
                    ((Row   +1)*GridSize));
                    
                    G2D.setColor(Color.red);
                    
                    G2D.draw(square);
                }
            }
    But it doesn't work in that case, Do you have an explanation for this, please share if you do.

    Thank You.
    Last edited by Shikatsu; 11-22-2011 at 07:04 AM.

  4. #4
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    SW Missouri
    Posts
    17,308
    Rep Power
    25

    Default Re: Problem Drawing Grid with BufferedImage.

    There are several issues with your code.
    You should only call InitGrid one time to build the image to be drawn in paintComponent.
    In InitGrid you give a value to G2D inside the loop vs one time outside of the loop.

    But it doesn't work in that case,
    Please explain???
    Last edited by Norm; 11-22-2011 at 12:35 PM.

  5. #5
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Re: Problem Drawing Grid with BufferedImage.

    Quote Originally Posted by Norm
    You should only call InitGrid one time to build the image to be drawn in paintComponent.
    How does this look:

    Java Code:
    public class DrawGrid extends Applet
    {
        private final int GridSize = 58;
        private final int GridRows = 8;
        private final int GridColumns = 8;
        
        private int BoardWidth  = GridColumns * GridSize;
        private int BoardHeight = GridRows    * GridSize;
        
        private int WinWidth  = BoardWidth+140;
        private int WinHeight = BoardHeight+158;
        
        BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                                  BufferedImage.TYPE_INT_BGR);
        
        Graphics2D Grid;
        
        @Override
        public void init()
        {
            setSize(WinWidth,WinHeight);
    
            InitGrid(Grid);
            
            repaint();
        }
            
        @Override
        public void paint(Graphics G)
        {
            Grid = (Graphics2D)G;
    
            Grid.drawImage(BuffImg, null, GridSize, GridSize);
        }
        
        public void InitGrid(Graphics2D G2D)
        {
            for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D = BuffImg.createGraphics();
                     
                    G2D.setColor(Color.white);
                     
                    G2D.fillRect(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D.setColor(Color.red);
                     
                    G2D.draw(square);
                }
            }
        }
    }
    Quote Originally Posted by Norm
    In InitGrid you give a value to G2D inside the loop vs one time outside of the loop.
    Do you mean this:

    Java Code:
    public void InitGrid(Graphics2D G2D)
        {
            G2D.setColor(Color.green);
            G2D.setBackground(Color.green);
             //.....
    If it is, i just forgot to clear that up, if its something else please point it out.

    Quote Originally Posted by Norm
    Please explain???
    If you run the code, you will notice the grid doesn't show when doing this:

    Java Code:
    for(int Row = 1; Row <= GridRows; Row++)
    {
        for(int Column = 1; Column <= GridColumns; Column++)
        {              
            Shape square = new Rectangle2D.Double(
            ((Column-1)*GridSize),
            ((Row   -1)*GridSize),
            ((Column+1)*GridSize),
            ((Row   +1)*GridSize));
             
            G2D = BuffImg.createGraphics();
             
            G2D.setColor(Color.white);
             
            G2D.fillRect(
            ((Column-1)*GridSize),
            ((Row   -1)*GridSize),
            ((Column+1)*GridSize),
            ((Row   +1)*GridSize));
             
            G2D.setColor(Color.red);
             
            G2D.draw(square);
        }
    }
    Instead of adding another row & column of cells for the last lines to show up, as you can see here:

    Java Code:
    for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D = BuffImg.createGraphics();
                     
                    G2D.setColor(Color.white);
                     
                    G2D.fillRect(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D.setColor(Color.red);
                     
                    G2D.draw(square);
                }
            }
        }
    Thank You For your help and please I still need guidance on this.

  6. #6
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    SW Missouri
    Posts
    17,308
    Rep Power
    25

    Default Re: Problem Drawing Grid with BufferedImage.

    Line 49 should be done once outside of the loop

    Why pass the Graphics object to the initGrid method?

  7. #7
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Re: Problem Drawing Grid with BufferedImage.

    Quote Originally Posted by Norm
    Line 49 should be done once outside of the loop
    You mean Line 48 :D, here I worked that up:

    Java Code:
        public void InitGrid(Graphics2D G2D)
        {
            G2D = BuffImg.createGraphics();
            
            for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D.setColor(Color.white);
                     
                    G2D.fillRect(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    G2D.setColor(Color.red);
                     
                    G2D.draw(square);
                }
            }
        }
    Quote Originally Posted by Norm
    Why pass the Graphics object to the initGrid method?
    You mean this is better?

    Java Code:
    public class DrawGrid extends Applet
    {
        private final int GridSize = 58;
        private final int GridRows = 8;
        private final int GridColumns = 8;
        
        private int BoardWidth  = GridColumns * GridSize;
        private int BoardHeight = GridRows    * GridSize;
        
        private int WinWidth  = BoardWidth+140;
        private int WinHeight = BoardHeight+158;
        
        BufferedImage BuffImg = new BufferedImage(465, 465, //464
                                                  BufferedImage.TYPE_INT_BGR);
        
        Graphics2D Grid;
        
        @Override
        public void init()
        {
            setSize(WinWidth,WinHeight);
    
            InitGrid();
            
            repaint();
        }
            
        @Override
        public void paint(Graphics G)
        {
            Grid = (Graphics2D)G;
    
            Grid.drawImage(BuffImg, null, GridSize, GridSize);
        }
        
        public void InitGrid()
        {
            Grid = BuffImg.createGraphics();
            
            for(int Row = 1; Row <= GridRows+1; Row++)
            {
                for(int Column = 1; Column <= GridColumns+1; Column++)
                {
                    Shape square = new Rectangle2D.Double(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    Grid.setColor(Color.white);
                     
                    Grid.fillRect(
                    ((Column-1)*GridSize),
                    ((Row   -1)*GridSize),
                    (Column*GridSize),
                    (Row   *GridSize));
                     
                    Grid.setColor(Color.red);
                     
                    Grid.draw(square);
                }
            }
        }
    }
    If it is, can you explain when please.

  8. #8
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    SW Missouri
    Posts
    17,308
    Rep Power
    25

    Default Re: Problem Drawing Grid with BufferedImage.

    Yes those were the things I was talking about.

  9. #9
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Re: Problem Drawing Grid with BufferedImage.

    About not passing Grid to initGrid method how can that be better coding? noting that Grid must be reinitialized in pain() for the grid to show up.
    Knowledge Is Power! Don't give me a fish but teach me how to catch one
    I am not asking you to code it for me, what i need is guidance so i can learn

  10. #10
    Norm's Avatar
    Norm is offline Moderator
    Join Date
    Jun 2008
    Location
    SW Missouri
    Posts
    17,308
    Rep Power
    25

    Default Re: Problem Drawing Grid with BufferedImage.

    noting that Grid must be reinitialized in paint() for the grid to show up.
    You can delete your class variable: Grid it is not needed. Define it locally in InitGrid and paint as needed for the casting to Graphics2D

  11. #11
    Shikatsu is offline Member
    Join Date
    Nov 2011
    Posts
    49
    Rep Power
    0

    Default Re: Problem Drawing Grid with BufferedImage.

    Done Thank you for you help Mr. Norm :D
    Knowledge Is Power! Don't give me a fish but teach me how to catch one
    I am not asking you to code it for me, what i need is guidance so i can learn

Similar Threads

  1. drawing a 3D hex-grid map
    By samanyu in forum Java Gaming
    Replies: 5
    Last Post: 07-14-2011, 01:54 AM
  2. Drawing BufferedImage or Graphics2D to window
    By danfoster3141 in forum Java 2D
    Replies: 6
    Last Post: 06-16-2011, 02:33 PM
  3. Problem with JFileChooser and BufferedImage Class
    By toro1984 in forum AWT / Swing
    Replies: 3
    Last Post: 11-03-2010, 10:09 AM
  4. creating a BufferedImage from a drawing
    By chappa in forum Java 2D
    Replies: 2
    Last Post: 01-10-2010, 06:04 PM
  5. Drawing a grid
    By CrystalMoth in forum Java 2D
    Replies: 11
    Last Post: 01-10-2010, 05:07 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •