Canvas HELP!!!

[colin shuker]

Hi, I'm trying to draw things into a frame, that already has something drawn onto it. The code I have below draws squares on top of a jpg picture,
in a sequence. The squares are drawn using the Box class, which ive extended from the Canvas class.
This works, but there are a trail of squares being left on the frame.
This isn't what a want. I want to for example, be able to move the squares, or stretch them, WITHOUT redrawing the jpg picture( or whatever drawing is underneath).
I would be grateful if someone could modify my code so that instead of a sequence of squares being drawn, you actual see the square moving across the screen.
I was told I needed to use Canvas to do this, but I dont know how.
To explain the reasoning why I want to do this, I have a program that draws fractals onto a frame(Mandelbrot set to be precise), how ever it takes quite a while to draw one to a frame, and I would like to be able to use an adjustable box in the frame, so that I can zoom in to the box area.
So, if I can figure how to display and remove something, or display something and move it, then I'm sure I can construct an adjustable box.

Hope thats not too confusing.
Here is my code for the squares program that I'm trying to fix.

import javax.swing.*;
import java.awt.*;
 
class CT
{  
  
   public static void main(String[] args)
   {
      Disp obj=new Disp();
      obj.repaint();
 
      for(int i=1;i<10;i++)
      { 
         // Pause
         for(int p=1;p<400000000;p++);
 
         obj.b.A=20+40*i;
         obj.b.B=200;
      
         (obj.b).paint((obj.f).getGraphics());
      }
   }
}
 

 
class Disp extends JPanel
{
   JFrame f;
   Box b;
 
   public Disp()
   {
      f=new JFrame("Hello");
      f.getContentPane().add(this);
      f.setSize(488,394);
      f.setLocation(0,0);
      f.setVisible(true);      
 
      b=new Box();
   }
 
   public void paintComponent(Graphics g)
   {
      super.paintComponent(g);
      Graphics2D g2 = (Graphics2D)g;
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                         RenderingHints.VALUE_ANTIALIAS_ON);
 
      // Draw background
      Image pic=new ImageIcon("burm.jpg").getImage();
      g.drawImage(pic,0,0,this);    
   }
}
 

 

 

 
class Box extends Canvas
{
   int A=100,B=100;
 
   public void paint(Graphics g)
   {
        
      Graphics2D g2 = (Graphics2D)g;
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                         RenderingHints.VALUE_ANTIALIAS_ON);
 
      g2.setColor(Color.white);
      g2.drawRect(A,B,100,100);
         
   }
}
 

[Craig Wood]

Some comments and suggestions:
1 — Swing makes animated drawing pretty easy. I recommend you begin by drawing the image and drawing your graphic over it as shown below. This will often work just fine. If you must keep the drawing separate from the image rendering then I would suggest a non–opaque JPanel on top of the image component set in an OverlayLayout.

You can use a glass pane as shown in the tutorial but this covers the JRootPane which, if it includes other components may require
a – additional work to transfer InputEvents through to the components, and
b – translation of coordinates between glass pane and image component.

There is a third technique of doing all the rendering in a BufferedImage and simply painting the image in the 'paintComponent' method after each update in the animation. This works well for building up images/graphics over time.

2 – Using ImageIcon.getImage is an older method (j2se 1.2) for loading images. The single line of code does not give any feedback for loading problems although it is easy enough to add (ImageIcon and MediaTracker api). The newer way (j2se 1.4) is to use ImageIO whose 'read' methods return a BufferedImage. Using BufferedImages allow for software acceleration; your code can run faster.

Loading an image every time you render graphics (in 'paintComponent') is inefficient. You only need to load the image one time.

3 — it is common practice to use a javax.swing.Timer or a thread for delays/animation. The example below shows one way of doing this.

4 — Canvas is an AWT component. You can mix AWT/heavyweight and Swing/lightweight components but it takes some care to get good results. It is generally recommended that we do not mix them. In Swing we generally use either JComponent or JPanel for custom drawing. JComponent is non–opaque by default and JPanel is opaque.

Here is a basic animation setup.

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;
 
public class Drawing extends JPanel
{
    Image image;
    Rectangle r;
    int dx, dy;
 
    public Drawing()
    {
        image = new ImageIcon("images/owls.jpg").getImage();
        r = new Rectangle(200,200,100,100);
        dx = 1;
        dy = 0;
    }
 
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        // draw centered image
        int w = getWidth();
        int h = getHeight();
        int x = (w - image.getWidth(this))/2;
        int y = (h - image.getHeight(this))/2;
        g2.drawImage(image, x, y, this);
        // draw graphics
        g2.setPaint(Color.red);
        g2.draw(r);
    }
 
    public void advance()
    {
        checkBoundries();
        r.x += dx;
        r.y += dy;
        repaint();
    }
 
    private void checkBoundries()
    {
        if(r.x + dx < 0 || r.x + r.width + dx > getWidth())
            dx *= -1;
        if(r.y + dy < 0 || r.y + r.height + dy > getHeight())
            dy *= -1;
    }
 
    public Dimension getPreferredSize()
    {
        return new Dimension(image.getWidth(this), image.getHeight(this));
    }
 
    public static void main(String[] args)
    {
        Drawing drawing = new Drawing();
        Animator animator = new Animator(drawing);
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new JScrollPane(drawing));
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class Animator implements Runnable
{
    Drawing drawing;
    Thread animator;
    boolean animate;
    int delay;
 
    public Animator(Drawing d)
    {
        drawing = d;
        animate = false;
        delay = 75;
        start();
    }
 
    public void start()
    {
        if(!animate)
        {
            animate = true;
            animator = new Thread(this);
            // event dispatch thread priority = 6
            // NORM_PRIORITY = 5
            animator.setPriority(Thread.NORM_PRIORITY);
            animator.start();
        }
    }
 
    public void stop()
    {
        animate = false;
        animator = null;
    }
 
    public void run()
    {
        while(animate)
        {
            try
            {
                Thread.sleep(delay);
            }
            catch(InterruptedException ie)
            {
                System.err.println("interrupt: " + ie.getMessage());
            }
            drawing.advance();
        }
    }
}

As far as zooming in and out of a portion of the graphics (image/drawings) you can use a Rectangle that can be resizable/draggable and expand the portion of the graphics it clips/contains to fill the graphic component. Or you can leave the Rectangle alone and scale the graphics it clips up or down. AffineTransform tries to make this easy with methods for scaling and translating. Also, the BufferedImage class has a handy 'subimage' method.

[colin shuker]

Hi, I've just executed your program, its very nice and does the kind of thing I'm after. I'm going to try and figure out how it works now.
I see you've got threads in there, unfortunately I have a phobia of threads, but I'll see what I can do.
Regarding the fractal program I mentioned. It is almost complete, you can draw out a box using the mouse, and this region is then zoomed in on, but no box is actually drawn when your moving the mouse, you have to use your imagination, which is the reason behind my posts.
Thanks again for your code, I'll let you know if I get stuck.

[colin shuker]

OK, I've just looked through it, and there is a problem.
In the paintComponent() method of Drawing, you are dislaying the image, and then drawing the square.
This is no good for me, as I said above. If it's going to take 20 seconds to draw the fractal on screen, it will be impossible to draw the square on top of this picture and move it about, since each slight movement of the square will mean the whole fractal will have to be drawn again, which means millions more calculations, which is what I'm trying to avoid.
I was just using a jpg image earlier as an example of something in the background, but in the fractal program, the JFrame will actually be showing the result of millions of calculations, hence the slowness.
I was recommended to use a Canvas to get around this, but I don't know how.
Hope you can help. Thanks

[Craig Wood]

Here's an example of the OverlayLayout technique.

import java.awt.*;
import javax.swing.*;
 
public class OverlayDrawing
{
    private JPanel getPanel()
    {
        ImagePanel imagePanel = new ImagePanel();
        GraphicsPanel graphicsPanel = new GraphicsPanel();
        Animator animator = new Animator(graphicsPanel);
        JPanel panel = new JPanel();
        OverlayLayout overlay = new OverlayLayout(panel);
        panel.setLayout(overlay);
        panel.add(graphicsPanel);
        panel.add(imagePanel);
        return panel;
    }
 
    public static void main(String[] args)
    {
        OverlayDrawing od = new OverlayDrawing();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new JScrollPane(od.getPanel()));
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
}
 
class ImagePanel extends JPanel
{
    Image image;
 
    public ImagePanel()
    {
        image = new ImageIcon("images/owls.jpg").getImage();
    }
 
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        // draw centered image
        int w = getWidth();
        int h = getHeight();
        int x = (w - image.getWidth(this))/2;
        int y = (h - image.getHeight(this))/2;
        g.drawImage(image, x, y, this);
    } 
 
    public Dimension getPreferredSize()
    {
        return new Dimension(image.getWidth(this), image.getHeight(this));
    }
}
 
class GraphicsPanel extends JPanel
{
    Rectangle r;
    int dx, dy;
 
    public GraphicsPanel()
    {
        r = new Rectangle(200,200,100,100);
        dx = 1;
        dy = 0;
        setOpaque(false);
    }
  
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        g2.setPaint(Color.red);
        g2.draw(r);
    }
  
    public void advance()
    {
        checkBoundries();
        r.x += dx;
        r.y += dy;
        repaint();
    }
  
    private void checkBoundries()
    {
        if(r.x + dx < 0 || r.x + r.width + dx > getWidth())
            dx *= -1;
        if(r.y + dy < 0 || r.y + r.height + dy > getHeight())
            dy *= -1;
    }
}
 
class Animator implements Runnable
{
    GraphicsPanel graphicsPanel;
    Thread animator;
    boolean animate;
    int delay;
 
    public Animator(GraphicsPanel gp)
    {
        graphicsPanel = gp;
        animate = false;
        delay = 75;
        start();
    }
 
    public void start()
    {
        if(!animate)
        {
            animate = true;
            animator = new Thread(this);
            // event dispatch thread priority = 6
            // NORM_PRIORITY = 5
            animator.setPriority(Thread.NORM_PRIORITY);
            animator.start();
        }
    }
 
    public void stop()
    {
        animate = false;
        animator = null;
    }
 
    public void run()
    {
        while(animate)
        {
            try
            {
                Thread.sleep(delay);
            }
            catch(InterruptedException ie)
            {
                System.err.println("interrupt: " + ie.getMessage());
            }
            graphicsPanel.advance();
        }
    }
}

In either case you could draw the fractal into a BufferedImage and draw the image as often as you like.

...
    BufferedImage image;
...
    image = createFractalImage();
...
    private void createFractalImage()
    {
        image = new BufferedImage(width, height, BufferedImage.TYPE_...);
        Graphics2D g2 = image.createGraphics();
        // create fractal and render into image with g2...
        g2.dispose();
    }
...

This will help avoid re–creating the fractal for system–triggered repaints which are caused by things like restoring the component after minimizing or partial covering by other apps.

[colin shuker]

Thanks very much Craig, I've used the OverlayLayout technique first, which
worked. But then I realised that if I want to go backwards and forwards through the fractal images, I would need to save them. I've just done a quick test using the BufferedImage technique and amazingly it works.
I'm not sure about BufferedImage.TYPE_ thing, but I'll try out different TYPES when i've got it up and running correctly.
It's a lot easier this way as well. It's a bit confusing at the moment, eg yur getPanel() method, I have never done it before like that.
Usually I would just do
f.getContentPane().add(someObj);
But I'll figure it out eventually
Thanks again.
I'm sure I'll get stuck soon with something, so your help is kindly
appreciated.
Thanks