Java Swing中的分层画布

Question

I am simulating persons walking on a graph of connected nodes. To display it visually I use the canvas object. I do that by first rendering the graph with it's nodes and links between them, after that I start drawing the person which is represented by a little square moving through the graph.

My problem is that after I draw the map (or graph) the person's animation deletes the labels and sometimes lines of the graph. I know that this is because I render the person's movement on the same canvas that contains the map (and because of the clearRect() method call).

How can I avoid clearing the graph?, at first I looked at the JLayeredPane but the canvases overlap and there's no transparency (without trans-parenting the person) on the topmost canvas. The second option that I thought of is to copy the area before drawing the person and then restoring the area when the person moves, but I'm not sure how to achieve this so guidance is appreciated as I haven't used swing or awt that much and I think this might be a common problem.

I've attached an image to show my issue and my rendering code for each person

public class Person extends Thread {

    public Person(String name, Spot location, World world, Graphics g) {
    this.name= name;
    this.location= location;
    this.world= world;
    this.g= g;
}

private void move() {
    Set<Link> links= world.getLinksFrom(location.getId());  
Link route= CollectionUtil.getRandomElement(links);  
Spot destination= route.getOriginX() == location.getX() &&   
    route.getOriginY() == location.getY() ?  
    route.getTheTarget(): route.getTheOrigin();  

try {
    double deltaX= (destination.getX() - location.getX()) / route.distance();
    double deltaY= (destination.getY() - location.getY()) / route.distance();
    double w2= (PERSON_WIDTH / 2);

    for(double i=location.getX(), j=location.getY(), d= route.distance(); 
    d > 5;
    i+=deltaX, j+= deltaY, 
    d=Point2D.distance(i, j, destination.getX(), destination.getY())) {
            g.clearRect((int)(i - w2 - deltaX), (int)(j - w2 - deltaY), 
        PERSON_WIDTH, PERSON_WIDTH);
        g.drawRect((int)(i-w2), (int)(j-w2), 
        PERSON_WIDTH-1, PERSON_WIDTH-1);
        Thread.sleep(50);
    }

    this.location= destination;

    // Stay ath the new location for a while
    Thread.sleep(new Random(System.currentTimeMillis()).nextInt(Person.MAX_SPOT_MILLIS));
    } catch(InterruptedException e) {
        throw new RuntimeException(e);
    }

@Override
public void run() {
    while(!isInterrupted()) {
        this.move();            
    }
}
}

Answer 1

The two most common solutions are:

1. Draw the graph every time. Use double buffering to avoid flicker. Unless your graph has a lot of nodes and you have a very slow computer, this should work well.

2. Render the graph into an image. Before you start painting the persons, draw the image once. This clears the whole canvas.

Answer 2

1. Unless you create it yourself, you should not be maintaining a reference to the Graphics context. The graphics context can be changed between repaints and repaints will override anything painted to it in between. You should overriding the paintComponet method of a custom component (like JPanel ) and painting the current state of the component on each invocation
2. It sounds like your are using java.awt.Canvas , you should avoid AWT and use Swing instead. It's a more up to date framework and is double buffered by default. You should avoid mixing AWT and Swing components as they tend not to play nice together
3. Swing is a single threaded environment, meaning that you should only interact with the UI from within the context of the Event Dispatching Thread? Check out Concurrency in Swing for more details.
4. There are 3 ways to do animation Swing. You can use a Thread or a javax.swing.Timer or one of the animation frameworks.

Using Threads is more complex and makes you responsible for ensuring that updates are correctly resynced by to the client. This is useful for complex animation jobs, where the time between calculating the state on each cycle my vary.

javax.swing.Timer is simpler, as it's callback is executed within the context of the EDT at regular intervals. It's great for simple animations where the time it takes to update the state are short and/or reasonable constant so that they won't have the potential of causing staggering frames

Answer 3

If you want to try having two canvases then I think I may have a solution.

Create your first canvas that will draw your graph and create a canvas on top of that that will draw your people.

You can set the background colour of the top canvas to be a clear colour and then also clear the canvas with that same clear colour.

For example:

g.setBackground(new Color(0,0,0,0));
g.clearRect(0, 0, width, height);

will clear the top canvas leaving a completely transparent colour behind

canvas.setBackground(new Color(0,0,0,0);

will make the canvas component transparent. This only needs to be called once when you are creating the canvas.

Now the top canvas will be completely transparent after your clear it with the 0 alpha colour and only what you draw on the top canvas will block out the bottom canvas.

Hope this helps