Repainting /clipping area?

[Jay Orsaw]

http://mindprod.com/jgloss/repaint.html

Faster Repaints

One simple technique to speed up repaint is to use

repaint( int x, int y, int width, int height );

When you know that only a portion of the component has changed. You can further speed things up, in your paint or paintComponent method by paying attention to the clip bounds. Anything you paint outside the clipping region will just be ignored. For efficiency, you should make some effort to avoid rendering large amounts of screen real estate outside it.

// Graphics g is passed to your paint as a parameter.
// get x, y, width and height of region we are actually painting
Rectangle r = g.getClipBounds();

This is what is said in this link so I want to know should I be using a clipping area for repainting 1 rectangle after moving it? I tried to do

repaint(currentFace.getX(), currentFace.getY(), currentFace.getWidth(), currentFace.getHeight());

but all I get is it repainting the new one, without getting rid of the original spot...

 
public void paint(Graphics g)
    {

    Graphics2D g2d = (Graphics2D)g;
                super.paint(g);

for(int j = 0; j < p.NumFaces; j++)
        {

           
             
                       
         g.setColor(Color.white);

              g2d.fill(face[j]);
                g2d.setColor(Color.blue);
                g2d.draw(face[j]);  
               // g2d.rotate(Math.PI/3.5);      
        }
}

public void mouseDragged(MouseEvent e)
  {
      Face currentFace = face[currentRect];
    x = e.getX();
    y = e.getY();
  
    
    if (currentRect >=0)
    {
      Graphics g = getGraphics();
    g.setXORMode(getBackground());

 	((Graphics2D) g).draw(currentFace);    	

      
      currentFace.setRect(x, y, currentFace.getWidth(), currentFace.getHeight());

      
      if(snapTo == true)
      {
       for(int j = 0; j < shelf.length; j++)
       {
        if(currentFace.intersectsLine(snapLine[j]))
            {
                System.out.println("kaw4");
                currentFace.setRect(currentFace.getX(), shelf[j].getMinY() - currentFace.getHeight(), 

currentFace.getWidth(), p.faceH[currentRect] * ppi);
            }
        
       }
      }
   
 	((Graphics2D) g).draw(currentFace);
      g.dispose();
 
    }
    
    else
    {
        System.out.println("kaw");
    }
    
  }

 public void mouseReleased(MouseEvent e)
        {
            x = e.getX();
            y = e.getY();

               repaint();

        }

Now if I'm going to use the

.getClipBounds(); 

I would need to do

currentFace.getClipBounds();

but how do I incorporate that with the repaint? There is no clipping method in the rectangle class itself it seems, but it would have to do with the Graphics class? So I would have to set the currentFace in the paint method to "getClipBounds" and in turn only have the currentFace repaint? would I call

repaint();

normally or would I have to do anything extra?


Thanks for any help, much appreciated,

~JO

[Steve Luke]

One way would be to get the bounds of the rectangle before the move, move the rectangle, repaint both the original and the new area.

[Jay Orsaw]

Steve Luke wrote:One way would be to get the bounds of the rectangle before the move, move the rectangle, repaint both the original and the new area.

So to do this I need to be able to call Graphics g as a parameter in my mouseDragged method? Set the bounds before and after, and do a normal repaint();? Or do I need to do something with the repaint as well?

[Martin Vashko]

This is actually a Swing/AWT question, so I'll move it to the appropriate forum.

I'd say it should be possible to invalidate both areas - both old and new position of the rectangle - just call the repaint( int x, int y, int width, int height ) method twice with proper parameters. I'd expect that Swing/AWT will create a bounding rectangle to cover all invalidated areas, which will then be used in the paint method. I haven't tried this, though, I just remember similar mechanism from the old days of my Windows programming.

[Darryl Burke]

Never use getGraphics() of a Component.

Get the Rectangle before the move, probably in mousePressed(...)
Get the Rectangle after teh move, probably in mouseReleased(...) or maybe in mouseDragged(...)
Add one Rectangle to the other (see the API for java.awt.Rectangle)
Repaint the union of the two Rectangles.

But don't do any of that if you don't actually have a performance problem. Premature optimization is evil. Simple code that performs adequately is always more readable and maintainable.

[Jay Orsaw]

Darryl Burke wrote:Never use getGraphics() of a Component.

Get the Rectangle before the move, probably in mousePressed(...)
Get the Rectangle after teh move, probably in mouseReleased(...) or maybe in mouseDragged(...)
Add one Rectangle to the other (see the API for java.awt.Rectangle)
Repaint the union of the two Rectangles.

But don't do any of that if you don't actually have a performance problem. Premature optimization is evil. Simple code that performs adequately is always more readable and maintainable.

Well the issue is that I'm trying to just get the 1 rectangle I move to repaint. With the

repaint(x,y,w,h);

or

repaint(currentFace.x,currentFace.y,currentFace.w,currentFace.h); 

it wont get rid of the old rectangle.

What exactly is adding/union going to accomplish? When adding the 2 rectangles all it does when dragged is make the dragged face bigger, and union doesn't do anything. Will it be that "adding" the 2 together and then creating a new rectangle and repainting that "rectangle area" will just show the 1 rectangle afterwards? What will the union accomplish? It seems like adding already creates a "union" or am I wrong?


void add(Rectangle r)
Adds a Rectangle to this Rectangle.

Rectangle union(Rectangle r)
Computes the union of this Rectangle with the specified Rectangle.

[Darryl Burke]

Post an SSCCE as maybe we're not talking about the same thing.

[Jay Orsaw]

Darryl Burke wrote:Post an SSCCE as maybe we're not talking about the same thing.

sorry I thought the code I had was enough, I'll post more.

public class Draw extends javax.swing.JFrame implements MouseMotionListener
{
   
    planHead p = new planHead();

         
    Face[] face = new Face[p.NumFaces];
    

    Face currentFace2 = new Face();
    Face currentFace = new Face();
    
     int x,y,i,w,h,currentRect;
     byte ppi = 5, OFFSET_Y = 30, OFFSET_X = 5;
     boolean mouse, snapTo;

  public Draw()
    {
        initComponents();
        face();
       
 addMouseListener(new MouseAdapter()
            {
      public void mousePressed(MouseEvent e)
      {
        x = e.getX();
        y = e.getY();
        for(i = face.length-1; i >= 0; i--)
        {
           currentRect = face[i].contains(x,y) ?  i : -1;
             
           if(currentRect == i)
           {
              i = 0;
           }
                       
   
            
        }
      
      //dt.setComponent(panel);
     //list.setDropTarget(dt);
     // panel.setTransferHandler(t);
//      t.canImport(ts);
      
      }
      
      public void mouseClicked(MouseEvent e)
      {
        x = e.getX();
        y = e.getY();

      }
      
       public void mouseReleased(MouseEvent e)
        {
            x = e.getX();
            y = e.getY();


//using your union
               repaint((int) currentFace2.x, (int) currentFace2.y,(int) currentFace2.w,(int) currentFace2.h);

        }
  
     
    
    });
    addMouseMotionListener(this);
  }

    public void face()
    {
        for(int j = 0; j < p.NumFaces; j++)
        {

           face[j] = new Face();
           face[j].setRect((p.faceX[j]+OFFSET_X)*ppi, (p.faceY[j]+OFFSET_Y)*ppi, p.faceW[j]*ppi, p.faceH[j]*ppi);
        }
        
    }

public void paint(Graphics g)
    {

    Graphics2D g2d = (Graphics2D)g;
                super.paint(g);

  
        for(int j = 0; j < p.NumFaces; j++)
        {

           
           
                       
         g.setColor(Color.white);

              g2d.fill(face[j]);
                g2d.setColor(Color.blue);
                g2d.draw(face[j]);  
               // g2d.rotate(Math.PI/3.5);      
        }
}

 

//Netbeans created my Main for me.

  public static void main(String args[]) {
        /
        try {
            for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
                if ("Nimbus".equals(info.getName())) {
                    javax.swing.UIManager.setLookAndFeel(info.getClassName());
                    break;
                }
            }
        } catch (ClassNotFoundException ex) {
            java.util.logging.Logger.getLogger(Draw.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (InstantiationException ex) {
            java.util.logging.Logger.getLogger(Draw.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (IllegalAccessException ex) {
            java.util.logging.Logger.getLogger(Draw.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (javax.swing.UnsupportedLookAndFeelException ex) {
            java.util.logging.Logger.getLogger(Draw.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        }
        //</editor-fold>

        /* Create and display the form */
        java.awt.EventQueue.invokeLater(new Runnable() {

            public void run() {
                new Draw().setVisible(true);
             
            }
        });
    }

 public void mouseMoved(MouseEvent e)
   {
       
    x = e.getX();
    y = e.getY();
  }

  public void mouseDragged(MouseEvent e)
  {


    x = e.getX();
    y = e.getY();
  
    
    if (currentRect >=0)
    {
       currentFace = face[currentRect];
      Graphics g = getGraphics();
    g.setXORMode(getBackground());

 	((Graphics2D) g).draw(currentFace);    	

      currentFace2 = face[currentRect];
      currentFace2.setRect(x, y, currentFace2.getWidth(), currentFace2.getHeight());

      
      if(snapTo == true)
      {
       for(int j = 0; j < shelf.length; j++)
       {
        if(currentFace2.intersectsLine(snapLine[j]))
            {
                System.out.println("kaw4");
                currentFace2.setRect(currentFace2.getX(), shelf[j].getMinY() - currentFace2.getHeight(),
 currentFace2.getWidth(), p.faceH[currentRect] * ppi);
            }
        
       }
      }
   currentFace2.add(currentFace);
   currentFace2.union(currentFace);
 	((Graphics2D) g).draw(currentFace2);
      g.dispose();
 
    }
    
    else
    {
        System.out.println("kaw");
    }
    
  }

This should be all you need, thanks for the help sir!

[Darryl Burke]

Jay, did you read the SSCCE page? You've posted code that includes setting the LaF to Nimbus and who knows what else that isn't relevant to the problem. If there is a problem at all -- are you really experiencing a visible, noticeable performance hit?

edit And you're still using getGraphics(). I already told you that's not correct.

Please go through the Lesson: Performing Custom Painting.

[Jay Orsaw]

Darryl Burke wrote:Jay, did you read the SSCCE page? You've posted code that includes setting the LaF to Nimbus and who knows what else that isn't relevant to the problem. If there is a problem at all -- are you really experiencing a visible, noticeable performance hit?

edit And you're still using getGraphics(). I already told you that's not correct.

Please go through the Lesson: Performing Custom Painting.

Yes I did, I added the main sinceI wasn't sure if it was needed or not, it was something Netbeans auto-created with a Jframe Form... Sorry.... The code should work regardless. I already said what my issue was, trying to repaint the currentFace, without repainting the entire screen... I checked out the tutorial again, thanks for the link, I tihkn I might try doing the painting in the Face class itself(like on #4) and see ow that goes (it repaints the class itself, so this is probably what I am looking for).

I didn't realize that I had

 Graphics g = getGraphics(); 

(I thought you were talking about the

Rectangle r = getGraphics();

from my first post. I believe I need to use

g.setXORMode();

each time I move my rectangle(instead of repainting each time) so I wanted to put Graphics g it into my mouseDragged parameter, but it's giving me an issue with it being an "abstract" class, and wanting mouseDragged(MouseEvent e) only, so I guess I'll have to set up the mouse motion listener like in the example(without implementing it) and put it as a parameter that way. Is there a reason I shouldn't use XORMode and just redraw as I move vs repainting the rectangle each time? What exactly is the issue with getGraphics();? Is there too much overhead associated with calling it, or is it bad practice?

[Jay Orsaw]

Darryl Burke wrote:Jay, did you read the SSCCE page? You've posted code that includes setting the LaF to Nimbus and who knows what else that isn't relevant to the problem. If there is a problem at all -- are you really experiencing a visible, noticeable performance hit?

edit And you're still using getGraphics(). I already told you that's not correct.

Please go through the Lesson: Performing Custom Painting.

Ok so after switching to using repaint() with multi-arg my rectangle changes to the background color(gray) which causes flickerings all over... It also repaints EVERY rectangle, which I have 150 currently and can have way more... That isn't very effective and IMO isn't very practical when you have so many which can cause a big performance hit. I also notice it has to go through the entire paint method to see what I need to repaint.... Next I am trying to drag an outline while having the original stay in place (which is what I had originally). I know you didn't like the getGraphics(); so I tried to use a parameter of the mouseDragged for Graphics g, but that wasn't working for some reason(is it because the only argument it should have is (MouseEvent)? I am going to try using the paint routine in my Face class, and see if using another method like the moveSquare(Graphics g) and see if I can use the XOR like I wanted to and g.draw like I originally had. Everything was fine except for the last repaint, which I believe I understand what happened before( although there was still flickering for some reason).

I learned some things from reading this tutorial again, but I know why I didn't use the repaint in the first place, lots of issues.... Is there a reason why it would flicker?

  addMouseMotionListener(new MouseAdapter()
        {
            public void mouseDragged(MouseEvent e)
            {
  
                if (currentRect >=0)
                {
                currentFace = face[currentRect];

                repaint((int) currentFace.getX(), (int) currentFace.getY(),(int) currentFace.getWidth()+1, (int) currentFace.getHeight()+1);             
                x = e.getX();
                y = e.getY();

                    //((Graphics2D) g2).draw(currentFace);    	


               currentFace.setRect(x, y, currentFace.getWidth(), currentFace.getHeight());
                repaint((int) currentFace.getX(), (int) currentFace.getY(),(int) currentFace.getWidth()+1, (int) currentFace.getHeight()+1);   




              if(snapTo == true)
              {
                for(int j = 0; j < shelf.length; j++)
                {
                    if(currentFace.intersectsLine(snapLine[j]))
                        {
                            System.out.println("kaw4");
                            currentFace.setRect(currentFace.getX(), shelf[j].getMinY() - currentFace.getHeight(), currentFace.getWidth(), p.faceH[currentRect] * ppi);
                        }

                }
             }


                }

                else
                {
                    System.out.println("kaw");
                }

            }
        });
      }

public void paint(Graphics g)
    {

    Graphics2D g2d = (Graphics2D)g;

                super.paint(g);
        for(int j = 0; j < p.NumFaces; j++)
        {
            
           
                       
         g.setColor(Color.white);

              g2d.fill(face[j]);
                g2d.setColor(Color.blue);
                g2d.draw(face[j]);  
               // g2d.rotate(Math.PI/3.5);   
            }

[Darryl Burke]

First off, if you went through the tutorial you should know by now that the method to override is paintComponent(...) not paint(...). And it does rather look like you're trying to do custom painting ins a top level window, which isn't the right way to go about it -- which you would also have learned form the tutorial.

In absence of an SSCCE, it's difficult to know the exact cause, but any and all flickering is on account of your program. Drawing 150 rectangles certainly doesn't impose any noticeable/visible performance hit, and doesn't require clipping the repainting rectangle.

Try this code I posted back in 2008; draw as many faces as you like and drag a few around. Do you see any flicker?

[Jay Orsaw]

Ok so I'm posting again because I'm still having issues... I recently came back to this and I tried to do the code exactly like in the Oracle trail, just modified.

public class Face
extends Rectangle2D.Float
implements Serializable, Comparable<Face>

{

        private float x,y,w,h;
        public Color foreColor, backColor;
        public int x1,y1,w1,h1;
        
        
		
		public Face()
		{
                    super();
                   // this.faceName = "";
                    this.x = 10;
		    this.y = 10;
		    this.w = 100;
		    this.h = 100;
                    this.x1 = Math.round(x);
		    this.y1 = Math.round(y);
		    this.w1 = Math.round(w);
		    this.h1 = Math.round(h);
                    this.backColor = Color.BLUE;
                    this.foreColor = Color.WHITE;


		}

		public Face(float x, float y,float w, float h)
		{
                 
		    this.x = x;
		    this.y = y;
		    this.w = w;
		    this.h = h;
                    this.x1 = Math.round(x);
		    this.y1 = Math.round(y);
		    this.w1 = Math.round(w);
		    this.h1 = Math.round(h);
                    this.backColor = Color.BLUE;
                    this.foreColor = Color.WHITE;

		}
                
		public void setX(float x)
		{
                    this.x = x;
                    this.x1 = Math.round(x);
		}
	
                public int getx()
                {
                    return (int) x;
                }		
                
                public void setY(float y)
		{
                    this.y = y;
                    this.y1 = Math.round(y);

                    
		}
	
                public int gety()
                {
                    return (int)y;
                }		
                
                public void setW(float w)
		{
                    this.w = w;
                    this.w1 = Math.round(w);

                    
		}
	
                public int getw()
                {
                    return Math.round(w);
                }		
                
                public void setH(float h)
		{
                    this.h = h;
                    this.h1 = Math.round(h);
                    

                    
		}
	
                public int geth()
                {
                    return (int)h;
                }
                    
                public void setForeColor(Color foreColor)
		{
			this.foreColor = foreColor;
		}
		
		public Color getForeColor()
		{
			return foreColor;
		}
                
                 public void setBackColor(Color backColor)
		{
			this.backColor = backColor;
		}
		
		public Color getBackColor()
		{
			return backColor;
		}
                

 
                public void paintFace(Graphics g, int zoom)
                {
                    
                    Graphics2D g2 = (Graphics2D)g;
                   int x2 = Math.round(x * zoom); 
                   int y2 = Math.round(y * zoom); 
                   int w2 = Math.round(w * zoom); 
                   int h2 = Math.round(h * zoom); 
                   
               //    setRect(x2,y2,w2,h2);
                    g2.setColor(foreColor);
                    g2.fillRect(x2,y2,w2,h2);
                    g2.setColor(backColor);
                    g2.drawRect(x2,y2,w2,h2);
                    
                }
                
                     
    @Override
    public int compareTo(Face compare) 
                 {
                     int compareDepth = compare.getDepth();
                     return this.depth - compareDepth;
                 }
    
                 

The face class is just an upgrade of a Rectangle. I extend Rectangle2D.Float to be able to use Contains(For the next class I will post) and originally was used for painting faces before I was told/saw in the Oracle trail to paint in the "Face" class itself.

import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Line2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;


public class Main
{
    
  static Toolkit tk = Toolkit.getDefaultToolkit();
  static Dimension d = new Dimension(tk.getScreenSize());

  public static void main(String[] args)
    {

        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
        JFrame f = new JFrame("Swing Paint Demo");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
        f.add(new draw());
        f.setSize(d.width, d.height);
        f.setVisible(true);
            }
        });
    }

   

class draw extends JPanel
        {
    private planHead p = new planHead();


        Face[] face = new Face[p.NumFaces];
    private Face currentFace;
        
    
       int x,y,i,w,h,currentRect;
     byte zoom = 5, OFFSET_Y = 30, OFFSET_X = 5;

    /** Creates new form Draw */
    public draw()
    {

        face();
    addMouseListener(new MouseAdapter()
    {
            @Override
        public void mousePressed(MouseEvent e)
        {
            x = e.getX();
            y = e.getY();
            Point p = new Point(x,y);
            
            
            for(i = face.length-1; i >= 0; i--)
            {

            currentRect = face[i].contains(p) ?  i : -1;
            
 //Arrays.sort(face);


            if(currentRect == i)
            {
System.out.println("k809w");
                i = 0;
                
            }



            }
      }
     });


        addMouseMotionListener(new MouseAdapter()
        {
            @Override
            public void mouseDragged(MouseEvent e)
            {
       if (currentRect >=0)
                {
                currentFace = face[currentRect];
	
               
                             int xx = (currentFace.x1 * ppi);
               int yy = (currentFace.y1 * ppi);
               int ww = (currentFace.w1 * ppi);
               int hh = (currentFace.h1 * ppi);
               
             repaint(xx,yy,ww,hh);//as in the tutorial
           // repaint(currentFace.x1*ppi,currentFace.x1*zoom,(currentFace.w1*zoom),(currentFace.h1*zoom));



currentFace.x1 = (e.getX()/ppi); //issue area
currentFace.y1 = (e.getY()/ppi);


            repaint(currentFace.x1*zoom,currentFace.x1*zoom,(currentFace.w1*zoom),(currentFace.h1*zoom));

                    System.out.println("kaw");
                }

                }
        });
      }
            
  
    
    
    public void face()
    {
        for(int j = 0; j < p.NumFaces; j++)
        {

            face[j] = new Face((p.faceX[j]+OFFSET_X),
                                         (p.faceY[j]+OFFSET_Y), 
                                         p.faceW[j], p.faceH[j]);


          face[j].setRect((p.faceX[j]+OFFSET_X)* zoom,
                                (p.faceY[j]+OFFSET_Y)*zoom,
                                  p.faceW[j]*zoom, p.faceH[j]*zoom);
        }
        
    }

    

    
    @Override
    public void paintComponent(Graphics g)
    {

    Graphics2D g2d = (Graphics2D)g;

                super.paintComponent(g);

 

        for(int q = 0; q< face.length; q++)
        {
face[q].paintFace(g,zoom);  
        }


    }
}

I'm having an issue with the drag... I'm stuck... I originally had it as currentFace.setX(e.getX()); and same for Y, but realized e.getX() is the "Zoomed" value... I have to keep the original values the same and keep everything on the screen "Zoomed." This entire time though the dragged rectangle is ALWAYS gray when using paint and a JFrame, and invisible when it's a JPanel and paintComponent...... WHY?