java applet: is there a simple way to draw and era

问题:

I have an applet which displays some data using circles and lines. As the data continually changes, the display is updated, which means that sometimes the circles and lines must be erased, so I just draw them in white (my background color) to erase them. (There are a lot of them, so erasing everything and then recomputing and redrawing everything except the erased item would be a horribly slow way to erase a single item.)

The logic of the situation is that there are two layers that need to be displayed, and I need to be able to erase an object in one layer without affecting the other layer. I suppose the upper layer would need to have a background color of "transparent", but then how would I erase an object, since drawing in a transparent color has no effect.

What distinguishes this situation from all the transparency-related help on the web is that I want to be able to erase lines and circles one-by-one from the transparent layer, overwriting their pixels with the "fully transparent" color.

Currently my applet draws (using just a single layer) by doing this in start():

    screenBuffer = createImage(640, 480);
    screenBufferGraphics = screenBuffer.getGraphics();

and this in paint():

    g.drawImage(screenBuffer, 0, 0, this);

and objects are rendered (or "erased" by drawing in white) by commands like:

    screenBufferGraphics.drawLine(x1,y1,x2,y2);

Is it easy to somehow make a second screen buffer with a transparent background and then be able to draw and erase objects in that buffer and render it over the first buffer?

回答1:

This seems fairly quick, so long as the rendered image area remains around 640x480, the code can achieve from 125-165 FPS. The code tracks 2000 semi-transparent lines of width 4px, and moves them around in an area 8 times the size of the rendered image.

import java.awt.image.BufferedImage;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.*;
import javax.swing.*;
import java.util.Random;

class LineAnimator {

    public static void main(String[] args) {
        final int w = 640;
        final int h = 480;
        final RenderingHints hints = new RenderingHints(
            RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON
            );
        hints.put(
            RenderingHints.KEY_ALPHA_INTERPOLATION,
            RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY
            );
        final BufferedImage bi = new BufferedImage(w,h, BufferedImage.TYPE_INT_RGB);
        final JLabel l = new JLabel(new ImageIcon(bi));
        final BouncingLine[] lines = new BouncingLine[20000];
        for (int ii=0; ii<lines.length; ii++) {
            lines[ii] = new BouncingLine(w*8,h*8);
        }
        final Font font = new Font("Arial", Font.BOLD, 30);
        ActionListener al = new ActionListener() {

            int count = 0;
            long lastTime;
            String fps = "";

            public void actionPerformed(ActionEvent ae) {
                count++;
                Graphics2D g = bi.createGraphics();
                g.setRenderingHints(hints);

                g.clearRect(0,0,w,h);
                for (int ii=0; ii<lines.length; ii++) {
                    lines[ii].move();
                    lines[ii].paint(g);
                }

                if ( System.currentTimeMillis()-lastTime>1000 ) {
                    lastTime = System.currentTimeMillis();
                    fps = count + " FPS";
                    count = 0;
                }
                g.setColor(Color.YELLOW);
                g.setFont(font);
                g.drawString(fps,10,30);

                l.repaint();
                g.dispose();
            }
        };
        Timer timer = new Timer(1,al);
        timer.start();

        JOptionPane.showMessageDialog(null, l);
        System.exit(0);
    }
}

class BouncingLine {
    private final Color color;
    private static final BasicStroke stroke = new BasicStroke(4);
    private static final Random random = new Random();
    Line2D line;
    int w;
    int h;
    int x1;
    int y1;
    int x2;
    int y2;

    BouncingLine(int w, int h) {
        line = new Line2D.Double(random.nextInt(w),random.nextInt(h),random.nextInt(w),random.nextInt(h));
        this.w = w;
        this.h = h;
        this.color = new Color(
            128+random.nextInt(127),
            128+random.nextInt(127),
            128+random.nextInt(127),
            85
            );
        x1 = (random.nextBoolean() ? 1 : -1);
        y1 = (random.nextBoolean() ? 1 : -1);
        x2 = -x1;
        y2 = -y1;
    }

    public void move() {
        int tx1 = 0;
        if (line.getX1()+x1>0 && line.getX1()+x1<w) {
            tx1 = (int)line.getX1()+x1;
        } else {
            x1 = -x1;
            tx1 = (int)line.getX1()+x1;
        }
        int ty1 = 0;
        if (line.getY1()+y1>0 && line.getY1()+y1<h) {
            ty1 = (int)line.getY1()+y1;
        } else {
            y1 = -y1;
            ty1 = (int)line.getY1()+y1;
        }
        int tx2 = 0;
        if (line.getX2()+x2>0 && line.getX2()+x2<w) {
            tx2 = (int)line.getX2()+x2;
        } else {
            x2 = -x2;
            tx2 = (int)line.getX2()+x2;
        }
        int ty2 = 0;
        if (line.getY2()+y2>0 && line.getY2()+y2<h) {
            ty2 = (int)line.getY2()+y2;
        } else {
            y2 = -y2;
            ty2 = (int)line.getY2()+y2;
        }
        line.setLine(tx1,ty1,tx2,ty2);
    }

    public void paint(Graphics g) {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor(color);
        g2.setStroke(stroke);
        //line.set
        g2.draw(line);
    }
}

Update 1

When I posted that code, I thought you said 100s to 1000s, rather than 1000s to 100,000s! At 20,000 lines the rate drops to around 16-18 FPS.

Update 2

..is this optimized approach, using layers, possible in Java?

Sure. I use that technique in DukeBox - which shows a funky plot of the sound it is playing. It keeps a number of buffered images.

1. Background. A solid color in a non-transparent image.
2. Old Traces. The older sound traces as stretched or faded from the original positions. Has transparency, to allow the BG to show.
3. Latest Trace. Drawn on top of the other two. Has transparency.

回答2:

After a day of no proposed solutions, I started to think that Java Graphics cannot erase individual items back to a transparent color. But it turns out that the improved Graphics2D, together with BufferedImage and AlphaComposite, provide pretty much exactly the functionality I was looking for, allowing me to both draw shapes and erase shapes (back to full transparency) in various layers.

Now I do the following in start():

    screenBuffer = new BufferedImage(640, 480, BufferedImage.TYPE_INT_ARGB);
    screenBufferGraphics = screenBuffer.createGraphics();

    overlayBuffer = new BufferedImage(640, 480, BufferedImage.TYPE_INT_ARGB);
    overlayBufferGraphics = overlayBuffer.createGraphics();

I have to use new BufferedImage() instead of createImage() because I need to ask for alpha. (Even for screenBuffer, although it is the background -- go figure!) I use createGraphics() instead of getGraphics() just because my variable screenBufferGraphics is now a Graphics2D object instead of just a Graphics object. (Although casting back and forth works fine too.)

The code in paint() is barely different:

        g.drawImage(screenBuffer, 0, 0, null);
        g.drawImage(overlayBuffer, 0, 0, null);

And objects are rendered (or erased) like this:

// render to background
    screenBufferGraphics.setColor(Color.red);
    screenBufferGraphics.fillOval(80,80, 40,40);
// render to overlay
    overlayBufferGraphics.setComposite(AlphaComposite.SrcOver);
    overlayBufferGraphics.setColor(Color.green);
    overlayBufferGraphics.fillOval(90,70, 20,60);
// render invisibility onto overlay
    overlayBufferGraphics.setComposite(AlphaComposite.DstOut);
    overlayBufferGraphics.setColor(Color.blue);
    overlayBufferGraphics.fillOval(70,90, 30,20);
// and flush just this locally changed region
    repaint(60,60, 80,80);

The final Color.blue yields transparency, not blueness -- it can be any color that has no transparency.

As a final note, if you are rendering in a different thread from the AWT-EventQueue thread (which you probably are if you spend a lot of time rendering but also need to have a responsive interface), then you will want to synchronize the above code in paint() with your rendering routine; otherwise the display can wind up in a half-drawn state.

If you are rendering in more than one thread, you will need to synchronize the rendering routine anyway so that the Graphics2D state changes do not interfere with each other. (Or maybe each thread could have its own Graphics2D object drawing onto the same BufferedImage -- I didn't try that.)

It looks so simple, it's hard to believe how long it took to figure out how to do this!